×

JavaScript应用:简单聊聊Promise与async/await

作者:Terry2023.01.16来源:Web前端之家浏览:158评论:0
关键词:js

JavaScript应用:简单聊聊Promise与async/await。

promise与async和await有什么用

都是为了解决异步回调产生的。

Promise的字面意思是“承诺”,即承诺会执行。Promise好比容器,里面存放着一些未来才会执行完毕的事件的结果,而这些结果一旦生成是无法改变的。

async和await遵循的是Generator 函数的语法糖,他拥有内置执行器,不需要额外的调用直接会自动执行并输出结果,它返回的是一个Promise对象。

Promise的作用

底层代码是怎样的?

promise的精髓是状态的传递,方法的封装者并不需要关心异步方法的执行结果,方法的封装者通过状态传递拿到执行结果书写自己的逻辑,使得封装者与使用者的真正解耦。

这种状态传递有种发布订阅的味道,回调地狱并非书写上的地狱而诟病,promise 的链式调用也会有地狱之感,而回调地狱真正为之诟病的是没有真正解耦。async 是 promise 的语法糖。

在之前没有promise的时候,我们处理多个异步请求回调是一层一层嵌套的,第一个函数的输出是第二个函数的输入,比如:

ajax.get(url, function(id) {
    ajax.get({id}, function() {
        ajax.get({name}, function() {
            ......
        })
    })
})

如果业务逻辑复杂,且基本上我们对于请求回来的数据还得做一系列的处理,这样的代码对于后期的可阅读性和可维护性都十分不友好,那么promise的链式调用就解决了多层异步嵌套回调的问题,且代码可读性和可维护性都会提高。

promise有三种状态pending、fulfilled、reject

new Promise调用的时候需要传入一个executor执行器函数,该函数会立即执行;

executor函数接收两个参数,resolve,reject,分别对应异步请求成功执行和失败执行;

设置默认状态stratus为pending,请求成功状态下的值为value,默认值为undefined,请求失败下的值为reason,默认值为unfined

promise的状态值只能从pending -> fulfilled 或者 pending -> reject,状态一旦确定就不会再改变

promise有一个then方法,接收两个参数onFulfilled、onRejected,分别为异步请求成功的回调和失败的回调。

promise的使用

function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}
const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log('data==>', data)
      return 'done'
    })
    .catch(err => {
      console.log('err==>', err)
    })
makeRequest()

async和await的使用

要理解async函数,首先得来了解一下Generator函数。因为 async和await遵循的是 Generator 函数的语法糖

Generator函数生成器的理解:

是es6引入的一个数据类型,相当于一个状态机,内部封装了很多状态,同时返回一个迭代器对象。可以通过这个迭代器遍历相关的值和状态。

Generator的显著特点是可以多次返回,每次的返回值作为迭代器的一部分保存下来,可以被我们显式调用。

  • async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。

  • async函数可能包含0个或者多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权,只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。使用async / await关键字就可以在异步代码中使用普通的try / catch代码块。

  • await关键字只在async函数内有效。如果你在async函数体之外使用它,就会抛出语法错误 SyntaxError 。

  • async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。

  • async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。

Async/Await的使用

function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}
const makeRequest = async () => {
  const value = await getJSON()
  console.log(value)
  return value
}
makeRequest()

promise与async、await的区别

  • Promise 是应用层的解决方案,它有一个规范,不同的语言也可以实现,它只能异步的处理错误,在js 里它本质上是一个对象。

  • async-await 是语言层的解决方案,它可以说是 Promise的补充,可以让用户像编写同步代码一样编写异步代码,通过try-catch 可以同步地处理错误。

  • Promise 更多应用在函数封装中,async用在函数的使用中。

  • Promise链式调用相当于一个新的回调地狱, 也不能统一处理异常。 Promise 本身是同步函数,多个不会等待。

  • async-await用同步的写法使得可读性更强,同时方便 try-catch 捕获异常, async-await 有明确的前后关系,可读性好。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20230116a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2