Async/await 和 Promises 区别

时间: 2020-03-29阅读: 327标签: 区别

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

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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8465

Vue的computed和watch的使用和区别

模板内表达式非常便利,可用于简单计算,当模板内放入太多的逻辑时,模板会过重且难以维护;可以使用computed替代

HTML中name、id、class的区别介绍

在一个页面中,有许多的控件(元素或标签)。为了更方便的操作这些标签,就需要给这些标签标识一个身份牌。在HTML中有name、id、class等属性区分一个元素,下面我们就来看一下这几种属性的区别。

Vue 中的 Props 与 Data 细微差别,你知道吗?

Vue提供了两种不同的存储变量:props和data。这些方法一开始可能会让人感到困惑,因为它们做的事情很相似,而且也不清楚什何时使用props,何时使用data。那么props和data有什么区别呢?

node全局安装与本地安装的区别

node的安装有全局安装和本地安装两种方式。命令中,全局安装(global)和本地安装(local)方式的区别为带参数-g和不带参数-g。下面我们来看一下具体的区别。

Jst中Element与Node的区别,children与childNodes的区别

关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点

初中高级工程师的区别?

我们知道程序员分 初级,中级, 高级, 这个概念, 并不是以工作年限作为分类依据的。 也就是说, 级别和你工作多少年没有必然的联系。一个初级工程师可能工作很多年依然是初级工程师, 也有的工程师, 工作短短两三年, 就跻身高级工程师的行列。

javascript和java之间有什么关系

Java与JavaScript是目前比较流行的两种语言,单从表面上看,两者名称很相似,于是许多初学者容易将二者混淆,或者直接归为一类,其实不然,虽然两者有着紧密的联系,但确是两个完全不同的语言。

HTML中src和href之间的区别

src 主要用于元素替换,href 用于和相关文档和外部资源建立相关链接。href 属性说明本地Web资源和定义的资源建立了链接。

javascript中===和==的区别是什么

==运算符会在进行相等比较之前会进行必要值的类型转换。简单来说,就是先把值转换为一样的类型再进行相等比较。就算比较的值的类型不相同,也可以通过强制转换类型成一样的,不会发生错误。

setTimeout和setInterval实现倒计时的区别

这是一个由于倒计时插件出现bug而出现的文章,导致我努力去寻找这个原因的源头,最后终于发现了新大陆(先事先展示一下新大陆的结论):setTimeout和setInterval都有误差

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广