Web/05-JavaScript之ES6语法/10-ES7:async函数详解.md
2020-08-23 23:32:42 +08:00

1.9 KiB
Raw Blame History

备注: async/await 的内容还有待完善。

async/await (异步函数)概述

async/await 是在 ES7 中引入的新语法,可以更加方便地进行异步操作。

本质: Generator 的语法糖。

  • async 的返回值是 Promise 实例对象。

  • await 可以得到异步结果。

我们在普通的函数前面加上 async 关键字,就成了 async 函数。

async/await 的基本用法

async 后面可以跟一个 Promise 实例对象。代码举例如下:

    const request1 = function() {
        const promise = new Promise(resolve => {
            request('https://www.baidu.com', function(response) {
                if (response.retCode == 200) {
                    // 这里的 response 是接口1的返回结果
                    resolve('request1 success'+ response);
                } else {
                    reject('接口请求失败');
                }
            });
        });

        return promise;
    };

    async function queryData() {
        const response = await request1();
        });
        return response;
    }
    queryData().then(data => {
        console.log(data);
    });

基于 async/await 处理多次 Ajax 请求【重要】

实际开发中现在有三个网络请求请求2必须依赖请求1的结果请求3必须依赖请求2的结果如果按照往常的写法会有三层回调会陷入“回调地狱”。

这种场景其实就是接口的多层嵌套调用。之前学过 Promise它可以把原本的多层嵌套调用改进为链式调用

而今天要学习的 async/await ,可以把原本的“多层嵌套调用”改成类似于同步的写法,非常优雅。

代码举例:

暂略。

参考链接