JavaScript 的 Async\/Await 完胜 Promise 的六

参考:http://www.10tiao.com/html/558/201705/2650964601/1.html

Node 现在从版本 7.6 开始就支持 async/await 了。

简介:

Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。

Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。

Async/await 像 promise 一样,也是非阻塞的。

Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。

语法:

假设函数 ajax 返回一个promise,而该promise的完成值是一些JSON对象。我们只想调用它,并输出该JSON,然后返回"done"。

如下是用 ajax 实现的代码:

        var ajax=new Promise(function(resolve,reject){
            $.ajax({
                type:"post",
                url:"list.php",
                success:function(result){
                    /*
                        result = {
                            flag: true,
                            msg: ‘‘,
                            data: []
                        }
                    */
                    if(result.flag){
                        resolve(data.data)//在异步操作成功时调用
                    }else{
                        reject(data.msg);//在异步操作失败时调用
                    }
                }
            });
        });

如下是用 promise 实现的代码:

const makeRequest = () => ajax.then(data => {
     console.log(data);
     return "done";
})makeRequest();

如下是用 async/await 实现的代码:

 const makeRequest = async () => {
     console.log(await ajax);
     return ‘done‘;
 }

区别:

  1. 函数前面有一个关键字 asyncawait 关键字只用在用 async 定义的函数内。所有 async 函数都会隐式返回一个 promise,而 promise 的完成值将是函数的返回值(本例中是 "done")。
  2. 不能在代码的顶层用 await,因为这样就不是在 async 函数内。
 // await makeRequest()  这段代码在顶层不能执行
 // 而下面这段代码可以执行
 makeRequest().then((result) => {
    // do something
 })

  3.await ajax 意味着 console.log 调用会一直等待,直到 ajax promise 完成并打印出它的值。

async/await 优点:

1. 简洁干净

  节省了不少代码。不必写 .then,创建一个匿名函数来处理响应,或者给不需要用的变量一个名称 data。还避免了代码嵌套。这些小小的优势会快速累积起来,在后面的代码中会变得更明显。

2. 错误处理

  Async/await 会最终让用同样的结构( try/catch)处理同步和异步代码变成可能。在下面使用 promise 的示例中,如果 JSON.parse 失败的话,try/catch 就不会处理,因为它是发生在一个 prmoise 中。需要在 promise 上调用 .catch,并且重复错误处理代码。这种错误处理代码会比可用于生产的代码中的 console.log 更复杂。

const makeRequest = () => {
     try {
         ajax.then(result => {
             console.log(result);
         })
     } catch(err) {
         // statements
         console.log(err);
     }
 }

用 async/await 实现的代码。现在 catch 块会处理解析错误。

const makeRequest = async () => {
     try {
         // 这个会解析失败
         const data  = JSON.parse(await ajax);
         console.log(data)
     } catch (err) {
         console.log(err);
     }
 }

3. 条件句

假设想做像下面的代码一样的事情,获取一些数据,并决定是否应该返回该数据,或者根据数据中的某些值获取更多的细节。

const makeRequest = () =>  {
     return ajax.then(data => {
         if (data.flag) {
             return makeAnotherRequest(data).then(moreData => {
                 console.log(moreData);
                 return moreData;
             })
         } else {
             console.log(data);
         }
     })
 }

这些代码看着就让人头疼。它只需将最终结果传播到主 promise,却很容易让我们迷失在嵌套、大括号和返回语句中。

把这个示例用async / await 重写,就变得更易于阅读。

const makeRequest = async () => {
     const data = await ajax;
     if (data.flag) {
         const moreData = await makeAnotherRequest(data);
         console.log(moreData);
         return moreData;
     } else {
         console.log(data);
     }
 }

4. 中间值

情景:调用 promise1,然后用它的返回值来调用promise2,然后使用这两个 promise 的结果来调用 promise3。你的代码很可能看起来像这样:

 const makeRequest = () => {
     return pomise1().then(value1 => {
         return pomise2().then(value2 => {
             return pomise3(value1, value2);
         })
     })
 }

如果 promise3 不需要 value1,那么很容易就可以把 promise 嵌套变扁平一点。那么可能就会像下面这样,在一个 Promise.all中包含值 1 和 2,并避免更深层次的嵌套:

 const makeRequest = () => {
     return pomise1().then(value1 => {
         return Pomise.all([
             value1,
             promise2(value1)
         ]).then(([value1, value2]) => {
             return pomise3(value1, value2);
         })
     })
 }

这种方法为了可读性而牺牲了语义。除了为了避免 promise 嵌套,没有理由将 value1value2并入一个数组。

不过用 async/await 的话,同样的逻辑就变得超级简单直观了。

 const makeRequest = async () => {
     const value1 = await promise1();
     const value2 = await promise2();
     return promise3(value1, value2);
 }

5. 错误栈

假如有一段链式调用多个 promise 的代码,在链的某个地方抛出一个错误。

 // 错误栈
 const makeRequest = () => {
     return callAPromise().then(() => callAPromise())
                          .then(() => callAPromise())
                          .then(() => callAPromise())
                          .then(() => callAPromise())
                          .then(() => {
                             throw new Error(‘opps‘;)
                          })
 }

 makeRequest().catch(err => {
     console.log(err);
 })

从 promise 链返回的错误栈没有发现错误发生在哪里的线索。更糟糕的是,这是误导的;它包含的唯一的函数名是callAPromise,它完全与此错误无关(不过文件和行号仍然有用)。

但是,来自async / await的错误栈会指向包含错误的函数:

 const makeRequest = async() => {
     await callAPromise();
     await callAPromise();
     await callAPromise();
     await callAPromise();
     await callAPromise();
     throw new Error(‘oops‘);
 }

 makeRequest().catch(err => {
     console.log(err);
 })

当在本地环境中开发并在编辑器中打开文件时,这不是啥大事,但是当想搞清楚来自生产服务器的错误日志时,就相当有用了。在这种情况下,知道错误发生在makeRequest中比知道错误来自一个又一个的 then 要好。

6. 调试

最后但是同样重要的是,在使用 async/await 时,一个杀手级优势是调试更容易。调试 promise 一直是如此痛苦,有两个原因:

  1. 没法在返回表达式(无函数体)的箭头函数中设置断点。
 // 错误栈
 const makeRequest = () => {
     return callAPromise().then(() => callAPromise())
                          .then(() => callAPromise())
                          .then(() => callAPromise())
                          .then(() => callAPromise())
                          .then(() => {
                             throw new Error(‘opps‘;)
                          })
 }

试着在此处设置断点

2.如果在.then块中设置断点,并使用像单步调试这类调试快捷方式,调试器不会移动到后面的 .then ,因为它只单步调试同步代码。

有了 async/await,我们就不再需要那么多箭头函数,您可以像正常的同步调用一样单步调试 await 调用。

 const makeRequest = async() => {
     await callAPromise();
     await callAPromise();
     await callAPromise();
     await callAPromise();
     await callAPromise();
     throw new Error(‘oops‘);
 }

总结

Async/await 是过去几年中添加到 JavaScript 中的最具革命性的功能之一。它让我们意识到 promise 的语法有多混乱,并提供了直观的替代。

时间: 2024-12-06 16:26:54

JavaScript 的 Async\/Await 完胜 Promise 的六的相关文章

JavaScript异步编程——Async/Await vs Promise

兼容性 提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await 了.而就在前几天,Node 8已经正式发布了,你可以放心地使用它. 如果你还没有试过它,这里有一堆带有示例的理由来说明为什么你应该马上采用它,并且再也不会回头. Async/await  对于那些从未听说过这个话题的人来说,如下是一个简单的介绍: Async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. Async/await 实际上是建立在 promise 的基础上.

理解 JavaScript 的 async/await

随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 c# 5.0 的语法中.C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤了一阵--为了要兼容 XP 系统,我们开发的软件不能使用高于 4.0 版本的 .NET Framework. 我之前在<闲谈异步调用"扁平"化> 中就谈到了这个问题.无论

Async/Await替代Promise的理由

Async/Await简介 对于从未听说过async/await的朋友,下面是简介: async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. async/await与Promise一样,是非阻塞的. async/await使得异步代码看起来像同步代码,这正是它的魔力所在. Async/Await语法 示例中,getJSON函数返回一个promise,这个promise成功resolve时会返

[转] Async/Await替代Promise的6个理由

Node.js 7.6已经支持async/await了,如果你还没有试过,这篇博客将告诉你为什么要用它. Async/Await简介 对于从未听说过async/await的朋友,下面是简介: async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. async/await与Promise一样,是非阻塞的. async/await使得异步代码看起来像同步代码,这正是它的魔力所在. Async/A

【转】6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

原文:https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9 ---------------------------------------------------------------------------------------------- 6 Reasons Why JavaScript's Async/Await Blows Prom

简单理解JavaScript 的async/await

什么是Async/Await? async 函数 : 是 Generator 函数的语法糖 async函数返回一个 Promise 对象,可以使用then方法添加回调函数.当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句. async/await与Promise一样,是非阻塞的 async函数返回的是 Promise 对象,可以作为await命令的参数 二.语法 1.返回 Promise 对象 async函数返回一个 Promise 对象. asyn

关于async/await、promise和setTimeout执行顺序

先来一道关于async/await.promise和setTimeout的执行顺序的题目: 1 async function async1() { 2 console.log('async1 start'); 3 await async2(); 4 console.log('asnyc1 end'); 5 } 6 async function async2() { 7 console.log('async2'); 8 } 9 console.log('script start'); 10 set

Async/Await替代Promise的6个理由

译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止境的,这时,我们有了Async/Await. 原文: 6 Reasons Why JavaScript’s Async/Await Blows Promises Away 译者: Fundebug 为了保证可读性,本文采用意译而非直译. Node.js 7.6已经支持async/await了,如果你

js异步回调Async/Await与Promise区别 新学习使用Async/Await

Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面一起来看看这篇文章:Async/Await替代Promise的6个理由. 什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. async/await与Prom