zoukankan      html  css  js  c++  java
  • ES8 async/await语法

     Async/await的主要益处是可以避免回调地狱(callback hell)问题

    Chromium JavaScript引擎 从v5.5开始支持async/await功能,Chromium JavaScript引擎版本号的查看方法是:在浏览器地址栏输入 chrome://version,查询出来的信息如下图所示:

    这意味着async/await不再是实验性功能,使用它时无需指定--harmony参数,此参数用来开启那些几乎已完成但被V8团队认为还不稳定的功能。不同的node版本使用不同的V8引擎,查看方式是:

    Node.js 7.6正式默认支持async/await功能

     async-await语法介绍

    在函数,匿名函数,箭头函数,变量,类中加上关键字async就行了

    async function asyncFunc() {}
    
    const asyncFunc = async function() {}
    
    async function() {}
    
    async () => {}
    
    class someClass {
        async asyncFunc() {}
    }

    function前面加上async关键字,表示该function需要执行异步代码。 async function函数体内可以使用await关键字,且await关键字只能出现在async function函数体内。

    await关键字可以跟在任意变量或者表达式之前,await后面通常会跟一个异步过程,如下

    async function asyncFunc() {
        await somePromise;
    }

    async function的返回值

    async function固定会返回一个promise,即便函数体里面没有调用return。由于async function返回一个promise,所以可以写在await后面,类似这样

    async function asyncFun1() {}
    async function asyncFun2() {
        await asyncFun1();
    }
    async function asyncFun3() {
        await asyncFun2();
    }
    asyncFun3();

    等效于: async
    function asyncFun1() {} async function asyncFun2() {} async function asyncFun3() { await asyncFun1(); await asyncFun2(); } asyncFun3();

    如果有return,return后面的值都会被包装成一个promise执行正确的回调函数,所以return 'foo'会被包装成return Promise.resolve('foo')。

    React中使用jQuery $.ajax Promise避免回调地狱的语法

    componentDidMount() {
        const self = this;
        // 获取用户名
        $.ajax('get_my_name')
        .then(name => {
            // 根据用户名获取个人信息
            // 链式Promise
            return $.ajax(`get_my_info_by_name'?name=${name}`);
        }).then(function(info) {
            self.setSate({info});
        }).catch(function(err) => {
            console.error(err);
        });
    }

    React中使用async,await的避免回调地狱的语法

    async componentDidMount() {
        try {
            // 获取用户名
            const name = await $.ajax('get_my_name');
            // 根据用户名获取个人信息
            const info = await $.ajax(`get_my_info_by_name'?name=${name}`);
            this.setSate({info});
        } catch(err) {
            console.error(err);
        }
    }

    可以看出,async,await的写法更优雅

    参考文章

    [1] 7.6默认支持Async/Await

    [2] Hey async,await me    

    [3] 如何在浏览器使用 async/await 

     

  • 相关阅读:
    Tarjan求LCA
    过滤器、监听器、拦截器的区别
    java操作Redis缓存设置过期时间
    Redis和Memcached区别,Redis的过期策略
    缓存穿透、缓存击穿、缓存雪崩区别和解决方案
    Memcached和Redis在Linux下的安装
    jmeter学习
    用FastDFS一步步搭建文件管理系统
    version control
    关于Linux的防火墙命令和端口占用查询
  • 原文地址:https://www.cnblogs.com/wangpenghui522/p/6793801.html
Copyright © 2011-2022 走看看