以同步格式写异步代码 - await

ashe 发布于2019-08-26 12:24 / 1595人阅读

摘要：用优雅的方式编写异步代码前言随着互联网的发展，的应用越来越广泛，地位也越来越重要，网站也发生了翻天覆地的变化。也是中的关键字，字面意思是异步，作用就是声明一个异步方法。注意不能多带带存在，必须和异步关键字一起使用。

用优雅的方式编写异步代码-Eric

前言

随着互联网的发展，js的应用越来越广泛，地位也越来越重要，网站也发生了翻天覆地的变化。
到目前为止，前后台基本彻底分离，交互都采用异步的方式，ajax、fetch...

fetch

目前大部分互联网公司开发都转向React、Vue，前后台交互也大都使用fetch取代ajax，而我们知道fetch的实现原理采用了es6中的Promise，Promise把异步请求变得简单优雅，代码示例：

</>复制代码 
fetch(url, {})
    .then(response=>{})
    .then(res=>{})
    .catch(err=>{});

我们要处理返回结果一般这么写：

</>复制代码 
fetch(url, {})
    .then(response=>{ return response.json() })
    .then(res=>{
        // 结果处理
        if(res.success){
            // somecode...
        }
    })
    .catch(err=>{});

如果处理逻辑比较多，这么写不直观，能不能这么写呢：

</>复制代码 
let res = fetch(url, {});
// 结果处理
if(res.success){
    // somecode...
}

结果当然是可以的，那就是es7中的await

await & async

await 是es7中定义的一个关键字，可以等待Promise返回数据，相当于暂停功能，await字面意思就是等待。
async也是es7中的关键字，字面意思是异步，作用就是声明一个异步方法。

注意：
1、await不能多带带存在，必须和async（异步）关键字一起使用。
2、await 后面如果不是一个Promise对象的话，那么不会等待哦！

代码走一波：

</>复制代码 
// async写在方法前面
asyncFunc = async ()=>{
    console.time();
    let res = await (new Promise((resolve, reject)=>{
        setTimeout(resolve.bind(this, 10), 2000);
    }));
    console.timeEnd(); // default: 2711.656982421875ms  等待Promise执行完毕
    console.log( res ); // 10  拿到了Promise的返回结果
}
asyncFunc();

await 对普通异步代码无效：

</>复制代码 
asyncFunc2 = async ()=>{
    console.time();
    let res = await setTimeout( ()=>{return 10}, 2000);
    console.timeEnd(); // default: 0.705078125ms， 说明没有等待setTimeout完成
    console.log( res ); // 737 setTimeout定时器的返回值
}
asyncFunc2();

更多操作自己去实践吧！

扩展

有兴趣的小伙伴可以去研究下 yield 关键字哦，可以暂停方法的执行，并返回yield 后面的值

喜欢我的文章就点赞转发吧！

GPU云服务器云服务器同步和异步同步与异步同步回调和异步回调同步调用和异步调用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108622.html

async/await 异步应用的常用场景

摘要：下面将简单地描述一下一些日常常用场景加深对认识最普遍的异步操作就是请求我们也可以用来简单模拟异步请求。其中是必须的如果省略了程序就不能按预期得到结果。前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代...

ermaoL 2019-08-02 16:18 评论0 收藏0
async/await 异步应用的常用场景

摘要：下面将简单地描述一下一些日常常用场景加深对认识最普遍的异步操作就是请求我们也可以用来简单模拟异步请求。其中是必须的如果省略了程序就不能按预期得到结果。前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代...

darkbug 2019-08-26 13:45 评论0 收藏0
async/await 异步应用的常用场景

摘要：下面将简单地描述一下一些日常常用场景加深对认识最普遍的异步操作就是请求我们也可以用来简单模拟异步请求。其中是必须的如果省略了程序就不能按预期得到结果。前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代...

宠来也 2019-08-30 10:53 评论0 收藏1
细说JS异步发展历程

摘要：换句话说，当一个异步过程调用发出后，调用者不会立刻得到结果。参考文章珠峰架构课墙裂推荐细说异步函数发展历程异步编程谢谢各位小伙伴愿意花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，请不要吝啬你的赞和，您的肯定是我前进的最大动力。知其然知其所以然，首先了解三个概念： 1.什么是同步？所谓同步，就是在发出一个调用时，在没有得到结果之前，该调用就不返回。但是一旦调用返回，就得到返回值了...

Alfred 2019-05-23 12:19 评论0 收藏0
细说JS异步发展历程

摘要：参考文章珠峰架构课墙裂推荐细说异步函数发展历程异步编程谢谢各位小伙伴愿意花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，请不要吝啬你的赞和，您的肯定是我前进的最大动力。知其然知其所以然，首先了解三个概念： 1.什么是同步？所谓同步，就是在发出一个调用时，在没有得到结果之前，该调用就不返回。但是一旦调用返回，就得到返回值了。换句话说，就是由调用者主动等待这个调用的结果。此调...

RiverLi 2019-08-26 13:53 评论0 收藏0