快速理解和使用 ES7 await/async

await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段。

直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据

老朋友 Ajax

传统的写法,无需解释

// 获取产品数据
ajax('products.json', (products) => {
    console.log('AJAX/products >>>', JSON.parse(products));

    // 获取用户数据
    ajax('users.json', (users) => {
        console.log('AJAX/users >>>', JSON.parse(users));

        // 获取评论数据
        ajax('products.json', (comments) => {
            console.log('AJAX/comments >>>', JSON.parse(comments));
        });
    });
});

不算新的朋友 Promise

Promise 已经被提及已久了,也是 ES6 的一部分。Promise 能消除 callback hell 带来的厄运金字塔,相比起来代码更清晰了,但还是达不到编写同步代码的直观程度。

// Promise
// 封装 Ajax,返回一个 Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}

// 获取产品数据
requestP('products.json').then((products) => {
    console.log('Promises/products >>>', products);
    // 获取用户数据
    return requestP('users.json');
}).then((users) => {
    console.log('Promises/users >>>', users);
    // 获取评论数据
    return requestP('comments.json');
}).then((comments) => {
    console.log('Promises/comments >>>', comments);
});

强劲的新朋友 Generators

Generators 也是 ES6 一个新的特性,能够 暂停/执行 代码。yield 表示暂停,iterator.next 表示执行下一步,如果你不了解 Generators 也没关系,可以忽略它直接学习 await/async

// Generators
function request(url) {
    ajax(url, (response) => {
        iterator.next(JSON.parse(response));
    });
}

function *main() {
    // 获取产品数据
    let data = yield request('products.json');

    // 获取用户数据
    let users = yield request('users.json');

    // 获取评论数据
    let products = yield request('comments.json');

    console.log('Generator/products >>>', products);
    console.log('Generator/users >>>', users);
    console.log('Generator/comments >>>', comments);
}

var iterator = main();
iterator.next();

碉堡的朋友 await/async

与 Promise 结合使用

// 封装 Ajax,返回一个 Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}

(async () => {
    // 获取产品数据
    let data = await requestP('products.json');

     // 获取用户数据
    let users = await requestP('users.json');

     // 获取评论数据
    let products = await requestP('comments.json');

    console.log('ES7 Async/products >>>', products);
    console.log('ES7 Async/users >>>', users);
    console.log('ES7 Async/comments >>>', comments);
}());

与 Fetch API 结合使用:

(async () => {
// Async/await using the fetch API
    try {

         // 获取产品数据
        let products = await fetch('products.json');

        // Parsing products
        let parsedProducts = await products.json();

        // 获取用户数据
        let users = await fetch('users.json');

        // Parsing users
        let parsedUsers = await users.json();

        // 获取评论数据
        let comments = await fetch('comments.json');

        // Parsing comments
        let parsedComments = await comments.json();


        console.log('ES7 Async+fetch/products >>>', parsedProducts);
        console.log('ES7 Async+fetch/users >>>', parsedUsers);
        console.log('ES7 Async+fetch/comments >>>', parsedComments);


    } catch (error) {
        console.log(error);
    }
}());

再次结合 Fetch

(async () => {
    let parallelDataFetch = await* [
        (await fetch('products.json')).json(),
        (await fetch('users.json')).json(),
        (await fetch('comments.json')).json()
    ];
    console.log('Async parallel+fetch >>>', parallelDataFetch);
}());

使用 await/async 用同步的思维去解决异步的代码,感觉非常酷非常爽!

参考文献[原文]:https://github.com/jaydson/es...


前端技术教程
前端技术教程
138 声望
9 粉丝
0 条评论
推荐阅读
React 基础实践教程(一):搭建简单的 React + ES6/7 + Webpack 开发环境
React 虽然是个很简单的 UI 库,API 也很少,但是在实际项目中却发现要搭配各种技术栈,例如 Webpack, Babel, Redux, React Router, CSS Modules, NPM, ES6/7 等等,仿佛怎么也学不完,很多人开始吐槽前端发展混...

DEVK1D阅读 5.4k评论 2

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木145阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy45阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木63阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

138 声望
9 粉丝
宣传栏