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
- Promise、Async/Await的使用
- 【前端前沿看点】告别promise的低可读性,Async/Await替代Promise的6个理由
- Promise和Async/Await用法整理
- ie兼容es6,ie兼容ES6的方法,包括箭头函数,Promise,async,await
- 基于Promise的async和await的区别
- “setTimeout、Promise、Async/Await 的区别”题目解析和扩展
- 前端的异步解决方案之Promise和Await-Async
- JavaScript 的 Async\/Await 完胜 Promise 的六
- async await promise
- async await promise
- promise、async、await之执行顺序
- 关于async/await 和 promise的一些问题
- 细说 async/await 相较于 Promise 的优势
- vue使用技巧:Promise + async + await 解决组件间串行编程问题
- Async/Await替代Promise的6个理由
- 用async-await实现类似Promise.all()的执行效果
- node Promise (async/await)
- ES6 Promise 和 Async/await的使用
- 异步Promise及Async/Await可能最完整入门攻略
- 详解promise、async和await的执行顺序