深入理解ES6以后前端异步玩法async和await

});

}

async function asyncPrint(value, ms) {

await timeout(ms);

console.log(value)

}

3.1 async语法

---

（1）async函数返回一个promise

aysnc函数内部设置的return返回的值，会自动成为then方法回调函数的参数。要想使用async函数的回调then，async必须有个return，不然回调的是“undefined”。

async function f() {

return ‘hello world’; //返回hello world

}

f().then(v => console.log(v))

// “hello world”

//函数f内部return命令返回的值，会被then方法回调函数接收到

（2）async函数内部报错了，返回的promise对象会变成reject状态，抛出的错误对象会被catch方法回调函数接收到。

async function f() {

throw new Error(‘出错了’);

}

f().then(

v => console.log(v),

e => console.log(e)

)

// Error: 出错了

（3）async函数返回的promise对象，必须等到内部所有的await命令的promise对象执行完毕后，才会发生状态改变。也就是说async函数内部所有的异步操作执行完毕，才会执行其then方法指定的回调函数。

3.2 await语法

---

（1）正常情况下，await命令后是一个promise对象，如果不是，会被自动转成一个立即resolve的promise对象。也就是说await可以是任何类型的。

async function f() {

return await 123;

}

f().then(v => console.log(v))

// 123

//上述代码中，await命令的参数是123，它被转成promise对象，立即resolve

（2）awiat命令后面的promise对象如果报错了，返回reject状态，则reject参数会自动被catch方法的回调函数接收，即使不用return。

async function f() {

await Promise.reject(‘出错了’);

}

f()

.then(v => console.log(v))

.catch(e => console.log(e))

// 出错了

//上面代码，await语句前面没有return，但是reject方法的参数依然传入了catch方法的回调函数里面

特别需要注意的是，只要有一个await语句后的promise变成了reject，那么整个async函数都会中断。

async function f() {

await Promise.reject(‘出错了’);

await Promise.resolve(‘hello world’); // 不会执行，因为第一个await语句状态变成了reject

}

因为多个await时候，为了避免上述情况发生导致下面代码不执行，可以将前面的await放在try…catch…机构里面，这样第二个await就会执行。

async function f() {

try {

await Promise.reject(‘出错了’);

} catch(e) {

}

return await Promise.resolve(‘hello world’);

}

f()

.then(v => console.log(v))

// hello world

（3）多个await命令，可以统一放在try…catch结构中

async function main() {

try {

var val1 = await firstStep();

var val2 = await secondStep(val1);

var val3 = await thirdStep(val1, val2);

console.log('Final: ', val3);

}

catch (err) {

console.error(err);

}

}

（4）await命令后面是promise对象，运行结果可能是rejected，所以最好是吧await命令放到try…catch结构中。

async function myFunction() {

try {

await somethingThatReturnsAPromise();

} catch (err) {

console.log(err);

}

}

// 另一种写法

async function myFunction() {

await somethingThatReturnsAPromise()

.catch(function (err) {

console.log(err);

};

}

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总