Promise/Async/Await

Promise

promise就像是个容器,里面包含着异步操作。他首先本身是一个对象,这个对象是一个构造函数。然后传递一个函数作为参数,该函数里面有两个参数一个叫resolve(成功)和reject(失败),这两个参数也是函数。他有三种状态分别是pending(进行中),resolve(已成功),reject(已失败)。调用promise他一定会返回一个结果,这个结果只有两种可能,要么从pending到resolve,要么是pending到rejcet。这个结果的状态是无法改变的。得到了结果后可以用then方法和catch方法分别指定resolve状态和reject状态的回调。
then()方法它是定义在promise原型上的,它的作用是为promise实例添加状态改变时的回调函数。then方法里面他也有两个参数,第一个是resolve状态的回调函数,第二个是reject状态的回调函数,第二个参数是可选可不选的。then方法它返回的是一个全新的promise实例,所以在这个than方法后面还可以继续调用另一个than方法,这个一直调用的模式也就是链式调用
catch()方法是用于指定发生错误时的回调函数,如果异步操作抛出错误,状态就会变成reject,这时就会调用catch方法指定的回调函数来处理操作。如果then方法指定的回调函数运行中抛出错误也会被catch捕获。
promise方法还有,all(),race()。
all()方法是提供了并行执行操作异步的能力,并且是在所有异步操作都完成后而且执行结果都是成功的情况下才会执行回调
race()方法跟all()方法正好相反,它是谁先执行完成就先执行回调,先执行完的不管是进行了race的成功回调还是失败回调,其余的都不会再进入race的任何回调。

实现一个promise

//首先来实现promise的构造函数
function Promise(excutor) {
  var self = this
  self.onResolvedCallback = []  //promise  resolve时的回调函数集

	//传递给promise处理函数的resolve
  function resolve(value) {
  	//promise的then函数需要异步执行
    setTimeout(() => {
    	//直接往实例上挂个data
      self.data = value
      	//然后把onResolveCallback数组里的函数依次执行一遍
      self.onResolvedCallback.forEach(callback => callback(value))
    })
  }
  	//执行用户传递的参数
  excutor(resolve.bind(self))
}
Promise.prototype.then = function(onResolved) {
	//保存上下文,哪个promise调用的then,就指向哪个promise
  var self = this
	
	//一定要返回一个新的promise
  return new Promise(resolve => {
  	//self指向的就是用户新创建的promise
  	//push函数在用户新创建的promise被reslove了以后才会执行
    self.onResolvedCallback.push(function() {
    	//onResloved就对应then传入的函数
      var result = onResolved(self.data)
      	//这里他会返回一个用户所创建的promise
      if (result instanceof Promise) {
      	//那么直接把用户新创建的promise的reslove决定权交给user promise
      	//resolve的权利交给了uesr promise
      	//在用户调用then方法的时候,用户手动构造了一个promise用来做异步的操作,叫它user promise
      	//那么在then的实现中,self其实就指向用户新创建的promise
        result.then(resolve)
      } else {
        resolve(result)
      }
    })
  })
}


new Promise(resolve => {
  setTimeout(() => {
    resolve(1)
  }, 500)
})
  .then(res => {
    console.log(res)
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(2)
      }, 500)
    })
  })
  .then(console.log)

Async
首先Async返回的是一个promise对象,promise对象的结果由async函数执行的返回值决定。可以使用then方法添加回调函数。它内部return返回的值,会成为then方法回调函数的参数。

Await
await等待的是一个表达式,这个表达式结果是promise对象或其他值。因为Async返回的是一个promise对象,所以await可以用来等待一个async函数的返回值。这也可以说await在等待async函数。
如果它等到的是一个promise,那么它会返回promise对象处理的结果得到resolve的值。
如果它等到的不是一个promise,那么await表达式运算的结果就是它要等到的东西。
如果async的promise抛出错误了,可以通过将其放入try…catch中来处理

Await必须写在Async函数中,但Async函数中可以没有Await

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值