20170610-async、await与Promise

OnlyLing 发布于2019-08-21 11:42 / 1399人阅读

摘要：所有函数都会隐式返回一个，而的完成值将是函数的返回值本例中是。意味着调用会一直等待，直到完成并打印出它的值。调试最后但是同样重要的是，在使用时，一个杀手级优势是调试更容易。引用资料的完胜的六个理由函数的含义和用法

async和await

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

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

async/await像promise一样，也是非阻塞的

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

语法(对比promise)

假设函数getJSON返回一个promise，而该promise的完成值是一个JSON对象，我们只想调用它，并输出该JSON，然后返回“done”

promise的实现

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

makeRequest()

async、await的实现

const makeRequest = async ()=>{
    console.log(await get.JSON())
    return "down"
}
makeRequest()

async、await与Promise的区别

函数前面有一个关键字 async。await 关键字只用在用 async 定义的函数内。所有 async 函数都会隐式返回一个 promise，而 promise 的完成值将是函数的返回值（本例中是 "done"）。

上面一点暗示我们不能在代码的顶层用 await，因为这样就不是在 async 函数内。

await getJSON() 意味着 console.log 调用会一直等待，直到 getJSON() promise 完成并打印出它的值。

async/await的优势 简洁干净

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

错误处理

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

const makeRequest = () => {  
  try {  
    getJSON().then(
      result => {  
        // 这里发生错误
        const data = JSON.parse(result)  
        console.log(data)  
    }).catch((error)=>{
        console.log(error)
    })
  } catch (err) {  // 这里不会捕捉到err
    console.log(err)  
  } 
}

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

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

条件语句

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

const makeRequest = () => {  
  return getJSON()  
        .then(data => {  
            if (data.needsAnotherRequest) {  
                return makeAnotherRequest(data)  
                       .then(moreData => {  
                           console.log(moreData)  
                            return moreData  
                        })  
            } else {  
                console.log(data)  
                return data  
            }  
         })  
}

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

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

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

中间值

你可能发现自己处于一种状态，即调用你 promise1，然后用它的返回值来调用promise2，然后使用这两个 promise 的结果来调用 promise3。你的代码很可能看起来像这样：

const makeRequest = () => {  
  return promise1()  
    .then(value1 => {  
        // do something  
          return promise2(value1)  
            .then(value2 => {  
            // do something  
                return promise3(value1, value2)  
        })  
      })  
 }

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

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

调试

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

没法在返回表达式（无函数体）的箭头函数中设置断点。

const makeRequest = () =>{
    return callAllPromise()
        .then(()=> callAllPromise())
        .then(()=> callAllPromise())
        .then(()=> callAllPromise())
        .then(()=> callAllPromise())
}

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

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

const makeRequest = async ()=>{
    await callAllPromise()
    await callAllPromise()
    await callAllPromise()
    await callAllPromise()
}

引用资料

JavaScript 的 Async/Await 完胜 Promise 的六个理由
async 函数的含义和用法

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

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

Promises与 async/await

摘要：是一种与协作的特殊的语法。换句话说，仅可以运行在中。所以将会进行等待，而之后抛出一个错误。同时这也将更为便利。允许在函数内部使用。关键词确保运行时将会等待处理完毕，并且如果触发了一个运行错误，运行中断，并在改处类似触发。 async/await是一种与promise协作的特殊的语法。它使得异步工作更加容易理解和使用。 Async函数我们从async关键词开始，它可以被放置在任何函数的...

beita 2019-08-21 17:49 评论0 收藏0
重构：从Promise到Async/Await

摘要：一方面，这里替代的是异步代码的编写方式，并非完全抛弃大家心爱的，地球人都知道是基于的，不用太伤心另一方面，是基于回调函数实现的，那也没有替代回调函数咯重构代码之后，我仍然用到了库。摘要：夸张点说，技术的发展与历史一样，顺之者昌，逆之者亡。JS开发者们，赶紧拥抱Async/Await吧！ GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前，...

zhangfaliang 2019-08-22 13:47 评论0 收藏0
异步解决方案----Promise与Await

摘要：前言异步编程模式在前端开发过程中，显得越来越重要。随着新标准的到来，处理异步数据流又有了新的方案。接下来我们介绍这两种处理异步编程的方案。仍在继续执行，但执行结果将被丢弃。使得异步代码看起来像同步代码，再也没有回调函数。前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新...

Blackjun 2019-08-29 16:56 评论0 收藏0
异步解决方案----Promise与Await

摘要：前言异步编程模式在前端开发过程中，显得越来越重要。随着新标准的到来，处理异步数据流又有了新的方案。接下来我们介绍这两种处理异步编程的方案。仍在继续执行，但执行结果将被丢弃。使得异步代码看起来像同步代码，再也没有回调函数。前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新...

Neilyo 2019-08-02 11:43 评论0 收藏0
异步解决方案----Promise与Await

摘要：前言异步编程模式在前端开发过程中，显得越来越重要。随着新标准的到来，处理异步数据流又有了新的方案。接下来我们介绍这两种处理异步编程的方案。仍在继续执行，但执行结果将被丢弃。使得异步代码看起来像同步代码，再也没有回调函数。前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据流又有了新...

entner 2019-08-23 12:20 评论0 收藏0