Async/await 和 Promises 区别

Y3G 发布于2019-08-22 15:12 / 2795人阅读

摘要：原文地址是建立在上的，不能被使用在普通回调以及节点回调和很像，不阻塞代码看起来像同步代码。语法假设函数返回值是，并且有一些对象。我们只想调用它并且记录该并且返回完成。使用使用区别在函数前有一个关键字，关键字只能在使用定义的函数中使用。

原文地址=> 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

Async/await 是建立在 Promises上的，不能被使用在普通回调以及节点回调

Async/await 和 Promises 很像，不阻塞

Async/await 代码看起来像同步代码。

语法

假设函数getJSON返回值是 Promise，并且 Promise resolves 有一些JSON 对象。我们只想调用它并且记录该JSON并且返回完成。

使用Promise

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

makeRequest()

使用Async

const makeRequest = async() => {
        console.log(await getJSON)
        return "done"
}

makeRequest()

区别

在函数前有一个关键字async，await关键字只能在使用async定义的函数中使用。任何一个async函数都会隐式返回一个promise，并且promise resolve 的值就是 return 返回的值 (例子中是”done”)

不能在函数开头使用await

有哪些好处

简洁的代码

使用async函数可以让代码简洁很多，不需要像Promise一样需要些then

错误处理

Promise 中不能自定义使用 try/catch 进行错误捕获，但是在 Async/await 中可以像处理同步代码处理错误

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // this parse may fail
        const data = JSON.parse(result)
        console.log(data)
      })
      // uncomment this block to handle asynchronous errors
      // .catch((err) => {
      //   console.log(err)
      // })
  } catch (err) {
    console.log(err)
  }
}

Async/await

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

条件语句

条件语句也和错误捕获是一样的，在 Async 中也可以像平时一般使用条件语句

Promise

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
      }
    })
}

Async

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 再去触发 promise3，这个时候代码应该是这样的

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

如过 promise3 不需要 value1，嵌套将会变得简单。如果你有强迫症，则将值1&2使用 promise.all() 分装起来。

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

但是使用 Async 就会变得很简单

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

错误栈

如过 Promise 连续调用，对于错误的处理是很麻烦的。你无法知道错误出在哪里。

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
  })

但是对于 Async 就不一样了

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

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at makeRequest (index.js:7:9)
  })

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

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

async/await 真不是你想象中那么简单

摘要：第二种方法一开始就发起了个请求并等待请求都到达后获取数据。请求返回的数据秒后就能操作了这种方法比第二种方法可以更快处理数据。如果请求时间是依次递减的那么和方法二效果是一样在有多个请求时这种情况一般不存在。先上代码公共代码 function getData(data, time) { return new Promise(function (resol...

zsy888 2019-08-30 13:58 评论0 收藏0
async/await 真不是你想象中那么简单

先上代码公共代码 function getData(data, time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(data); ...

CoXie 2019-08-26 11:44 评论0 收藏0
async/await 真不是你想象中那么简单

摘要：第二种方法一开始就发起了个请求并等待请求都到达后获取数据。请求返回的数据秒后就能操作了这种方法比第二种方法可以更快处理数据。如果请求时间是依次递减的那么和方法二效果是一样在有多个请求时这种情况一般不存在。先上代码公共代码 function getData(data, time) { return new Promise(function (resol...

mylxsw 2019-08-01 18:36 评论0 收藏0
翻译：Taming the asynchronous beast with ES7

摘要：让我们使用它从数组中返回一个值数组在中，我们可以这样做，这是一种更简单的方法最重要的部分是创建数组，该数组立即调用所有的我们在主函数中等待这些。所以在我们真正等待完成之前，主函数就退出了。原文：https://pouchdb.com/2015/03/0... PouchDB最棘手的方面之一是它的API是异步的。在Stack Overflow、Github和IRC上，我看到了不少困惑的...

Eastboat 2019-08-23 18:31 评论0 收藏0
async & await (译)

摘要：的出现，让我们可以走出回调地狱，着实惊艳。我已经开始使用里的和关键字来简化的处理。异步任务在这个例子是执行之后，一直在执行完成才继续下一个任务并没有产生阻塞。最后这个函数处理了返回值并且返回了一个对象。依然很棒，但和使得它可维护性更好。 JavaScript Promises的出现，让我们可以走出回调地狱，着实惊艳。Promises 允许我们更好的引入和处理异步任务，虽然如此，但引入好...

The question 2019-08-22 11:07 评论0 收藏0