目录
1.ECMAScript 新特性-async 和await
1.1async函数
1.2await函数
1.3补充:
2. ES6模块化
2.1模块化的优点
2.2 ES6 模块化语法
2.3 ES6 模块暴露
2.4ES6 模块导入
1.ECMAScript 新特性-async 和await
1.1async函数
- async函数可以单数使用,但一般我们会将async函数和await函数结合使用,可以让异步代码像同步代码一样运行,也可以用来解决回调地狱的问题。
- async函数的返回值为promise对象。promise对象的结果由async函数执行的返回值决定
const show = async function () { //返回值是一个promise对象 console.log('hhh'); // 如果返回值是非promise或undefined,表示成功,返回值是成功的值 // return 'lll'; // 返回值是promise对象时 return Promise.resolve('ok') // return Promise.reject('no') } var a = show(); console.log(a);
1.2await函数
- await必须写在async函数中,但是async函数中可以没有await
- await右侧的表达式一般为promise对象,但也可以是其它值
//1.创建promise对象 const p = new Promise((resolve, reject) => { resolve('成功'); //用户数据 }); //await 要放在async函数中 async function main() { let result = await p; //成功的结果 console.log(result); } //调用函数 main()
- 如果表达式是Promise 对象,await返回的是Promise成功的值
- 如果表达式是其它值,直接将此值作为await的返回值
- 如果await的promise失败了,就会抛出异常,需要通过 try...catch捕获处理
//1.创建promise对象 const p = new Promise((resolve, reject) => { // resolve('成功的值');//用户数据 reject('失败啦') }); //await 要放在async函数中 async function main() { try { let result = await p; //成功的结果 console.log(result); } catch (i) { console.log(i); } } //调用函数 main()
1.3补充:
- js是单线程的,在执行时会分为同步任务和异步任务,异步任务又分为宏任务(setTimeout,setInterval) 和微任务(promise,await),微任务优先于宏任务执行。
- async通常与await搭配使用,await必须在asyc函数中使用,当async函数中遇到await关键字时,程序 会等待await关键字后面所有的异步代码执行完毕后才会继续执行,注意:await后面通常会跟一个promise 异步任务 当promise状态改变才会执行后面代码
- 定义函数为异步函数,使用关键字async定义的函数,会自动 返回一个成功状态的promise对象 当前函数的返回值则为promise对象成功状态的返回值
2. ES6模块化
模块化就是讲一个大的程序文件,拆分成许多小的文件,然后讲小文件组合起来。
2.1模块化的优点
- 防止命名冲突
- 代码复用----相当封装一个函数,暴露一个接口
- 高维护性----- 可以让多个人分别更改不同模块,互不影响
2.2 ES6 模块化语法
模块功能主要由两个命令构成:export 和 import。
- export 命令 就是导出,用于规定模块的对外接口,会对外暴露接口。
- import 命令 就是导入,用于输入其他模块提供的功能。
2.3 ES6 模块暴露
(1)分别暴露:就是在需要暴露的变量或函数名前加上 export关键字。
export let a=10;
export function show(){
console.log('分别暴露');
}
(2)统一暴露:在export{ }内部写入需要暴露的变量名或函数名,中间用逗号隔开。
// 统一暴露
let a = 100;
let fn = function () {
console.log('统一导出');
}
const obj = {
name: 'aaa',
age: 18
}
let arr = [10, 20, 30]
export {
a,
fn,
obj,
arr
}
(3)默认暴露:export default { }在花括号内可以写入任意数据类型的数据,但大部分都是对象。
// 默认暴露 default
let c = 1000;
let show = function () {
console.log('默认暴露222');
}
export default {
// 可以是数字、字符串,但大部分是对象
a: 800,
b: [11, 22, 33, 44],
fn: function () {
console.log('默认暴露');
},
c,
show
}
2.4ES6 模块导入
(1) 通用方法导入: import 变量名 from '路径' (变量名中存的是对象)
import * as m1 from './1.js'
- 在解构时如果发生变量名重复的情况则需要使用as别名来解决问题。此时使用变量名或者需要调用函数直接用别名进行操作就可以了。
import { a, fn as fn1, obj, arr as arr1} from './2.js';
console.log(arr1);
fn1();
-
在使用默认暴露时就不能使用上面的通用方法导入了,默认暴露有专门的简便的导入形式。
import m3 from './3.js'
(2)解构方法来导入
import { a, fn , obj, arr } from './2.js';
如果默认暴露想要以解析的方式进行导入操作的话必须要使用别名,因为default相当于一个关键字。所以得使用别名。
import{default as m4}from './3.js';
console.log(m4);