async-await和Promise的关系
async-await是建立在promise机制之上 ,async-await是promise和generator的语法糖。增强了代码的可读性,让代码书写起来更加流畅。
基本语法
async function basicDemo() {
let result = await Math.random();
console.log(result);
}
basicDemo();
// 0.6484863241051226
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: underfined}
上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await,同时函数执行结果似乎返回了一个promise对象。
async
async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。
async function demo01() {
return 123;
}
demo01().then(val => {
console.log(val); // 123
});
若async定义的函数有返回值,return 123;相当于Promise.resolve(123),没有声明式的return则相当于执行了Promise.resolve();
await
await可以理解为是async wait的简写。await必须出现在async函数内部,不能单独使用。
function notAsyncFunc() {
await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier
await后面可以跟任何的JS表达式。虽然说await可以等待很多类型的东西,但是它最主要的意图是用来等待Promise对象的状态被resolved。如果await的是promise对象会造成异步函数停止执行并且等待promise的解决,如果等的是正常的表达式则立即执行。
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(' enough sleep~');
}, second);
})
}
function normalFunc() {
console.log('normalFunc');
}
async function awaitDemo() {
await normalFunc();
console.log('something, ~~');
let result = await sleep(2000);
console.log(result);// 两秒之后会被打印出来
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15 enough sleep~