async和await

小结

await后面接一个会return new promise的函数并执行它
await只能放在async函数里
复制代码

什么是async

ES7 提出的async 函数,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。
async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。
想较于 Generator,Async 函数的改进在于下面四点:
- **内置执行器**。Generator 函数的执行必须依靠执行器,而<font color=#A52A2A>Aysnc</font>函数自带执行器,调用方式跟普通函数的调用一样
- **更好的语义**。async 和 await 相较于 * 和 yield 更加语义化
- **更广的适用性**。co 模块约定,yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值(Number,string,boolean,但这时等同于同步操作)
- **返回值是 Promise**。async 函数返回值是 Promise 对象,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用
复制代码

如何使用async

结果必须return,不然值都为undefined, 建议使用箭头函数
可以return各种数据类型的值,皆为resolve
但是返回如下结果,则判定失败reject
1. 内部含有直接使用未声明的变量或函数
2. 内部抛出一个错误throw new Error 或者返回reject状态 return Promise.reject('执行失败')
3. 函数方法执行错误
复制代码

什么是await

await意思是async wait(异步等待)。这个关键字只能在使用async定义的函数里面使用。
任何async函数都会默认返回promise,并且这个promise解析的值都将会是这个函数的返回值,而async函数必须等到内部所有的 await 命令的 Promise 对象执行完,才会发生状态改变。
正常情况下,await 命令后面跟着的是 Promise ,如果不是的话,也会被转换成一个 立即 resolve 的 Promise。
复制代码
async function testSometing() {
    console.log("testSomething");
    return "return testSomething";
}

async function testAsync() {
    console.log("testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");

    const testFn1 = await testSometing();
    console.log(testFn1);

    const testFn2 = await testAsync();
    console.log(testFn2);

    console.log('test end...');
}

test();

var promiseFn = new Promise((resolve)=> { 
    console.log("promise START...");
    resolve("promise RESOLVE");
});
promiseFn.then((val)=> console.log(val));

console.log("===END===")

结果:
test start...
testSomething
promise START...
===END===
return testSomething
test end...
testAsync
promise RESOLVE
hello async
复制代码
1. 执行test(), 先输出"test start..."
2. 声明函数await testSometing(),先执行console.log("testSomething")输出,后跳出test(),执行后面代码
3. 执行promiseFn,输出"promise START...",遇Promise,放置Promise队列第一位,跳出函数,向下执行
4. 输出"===END===",返回test(),继续执行console.log(testFn1),testSometing()被调用,输出"return testSomething"
5.声明函数await testAsync(),先执行console.log("testAsync")输出,后跳出test(),执行后面代码
6. 这时需要执行之前的Promise队列第一位,输出"promise RESOLVE",返回test(),继续执行console.log(testFn2),testAsync()被调用,遇Promise,放置当前Promise队列第一位,因当前没有其他代码执行,故输出"hello async"
7. 最后输出"test end..."
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享