欢迎学习交流！！！
持续更新中…

文章目录

• Promise
• • ES6 promise用法
  • • then 链式操作的用法
    • reject 的用法
    • catch 的用法
    • all 的用法 ：以跑得慢为准执行回调
    • race 的用法：以跑得快为准执行回调
  • 手动实现promise
  • • 步骤一：实现成功和失败的回调方法
    • 步骤二：then方法链式调用

Promise

Promise是异步编程的一种解决方案，promise是一个对象，从它可以获取异步操作的消息。有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

promise目的：

• 解决回调地狱，代码难以维护，第一个函数的输出是第二个函数的输入
• promise支持多个并发的请求，获取并发请求中的数据
• 解决异步问题，本身不能说promise是异步的

ES6 promise用法

Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

基础：

let p = new Promise((resolve, reject) => {//异步操作setTimeout(() => {console.log('执行完成');resolve('成功！')}, 2000)
});

Promise的构造函数接收一个函数作为参数，且这个函数需要传入两个参数：

• resolve ：异步操作执行成功后的回调函数
• reject：异步操作执行失败后的回调函数

then 链式操作的用法

表面上看，Promise只是能够简化层层回调，但实质上，Promise的重点是“状态”，用维护状态、传递状态的方式使得回调函数能够及时调用，比传递callback函数要简单、灵活许多。

使用Promise的正确场景：

p.then((data) => {console.log(data);
})
.then((data) => {console.log(data);
})
.then((data) => {console.log(data);
});

reject 的用法

将Promise的状态设置为rejected，然后在then中就能捕捉到，执行“失败”的回调。

let p = new Promise((resolve, reject) => {//异步操作setTimeout(function() {var num = Math.ceil(Math.random()*10);   //生成1-10的随机数if (num <= 5) {resolve(num)} else {reject('数字太大了')}}, 2000)
});
p.then((data) => {console.log('resolved',data);
}, (err) => {console.log('rejected', err);
})

then方法可以接收传的两个参数，第一个对应resolve的回调，第二个对应reject的回调，我们能够分别拿到他们传过来的数据。多次运行这段代码，会随机得到以下两种结果：

或者

catch 的用法

Promise对象除了then方法还有一个catch方法，它和then的第二个参数一样，用来指定reject的回调。用法：

p.then((data) => {console.log('resolve',data);
}).catch((err) => {console.log('reject',err);
})

效果和写在then中的第二个参数一样，除此之外还会：在执行resolve的回调（上面then中的第一个参数）时，如果抛出异常即代码出错时，并不会报错卡死js，而是会进入catch方法中：

p.then((data) => {console.log('resolved',data);console.log(somedata); //此处的somedata未定义
})
.catch((err) => {console.log('rejected',err);
});

在resolve回调中，somedata变量未被定义，若不使用Promise，则代码运行此处会直接在控制台报错，但在此处会进入catch中，并且把错误原因传到reason参数中，控制台得到：

与try/catch语句功能相同

all 的用法 ：以跑得慢为准执行回调

all接收一个数组参数，里面的值最终都返回Promise对象

Promise的all方法提供了并行执行异步操作的能力，并在所有异步操作执行完后才执行回调：

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})let p = Promise.all([Promise1, Promise2, Promise3])p.then(funciton(){// 三个都成功则成功  
}, function(){// 只要有失败，则失败 
})

使用all可以并行执行多个异步操作，并在一个回调中处理所有的返回数据。使用场景：在素材较多的游戏应用中，打开网页时，预先加载需要用到的各种资源（图片、flash、静态文件等）。所有都加载完毕后再进行页面的初始化。

race 的用法：以跑得快为准执行回调

使用场景：用race给异步请求设置超时时间，并在超时后执行相应操作：

 //请求某个图片资源function requestImg(){var p = new Promise((resolve, reject) => {var img = new Image();img.onload = function(){resolve(img);}img.src = '错误的图片路径';});return p;}//延时函数，用于给请求计时function timeout(){var p = new Promise((resolve, reject) => {setTimeout(() => {reject('图片请求超时');}, 5000);});return p;}Promise.race([requestImg(), timeout()]).then((data) =>{console.log(data);}).catch((err) => {console.log(err);});

requestImg函数会异步请求一张图片，请求图片地址是错误的，因此无法成功请求到。timeout函数是一个延时5秒的异步操作。把这两个返回Promise对象的函数放进race，二者就会赛跑比较，若5秒之内图片请求成功了，则进入then方法，执行正常的流程。若5秒图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：

手动实现promise

步骤一：实现成功和失败的回调方法

这是promise的基本功能。首先，创建一个构造函数promise，创建一个promise类，在使用的时候传入一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)。因为成功和失败二者唯一且对立。在默认状态下，调用成功时，就返回成功态，调用失败时，返回失败态。代码如下：

class Promise {constructor (executor){//默认状态是等待状态this.status = 'panding';this.value = undefined;this.reason = undefined;//存放成功的回调this.onResolvedCallbacks = [];//存放失败的回调this.onRejectedCallbacks = [];let resolve = (data) => {//this指的是实例if(this.status === 'pending'){this.value = data;this.status = "resolved";this.onResolvedCallbacks.forEach(fn => fn());}}let reject = (reason) => {if(this.status === 'pending'){this.reason = reason;this.status = 'rejected';this.onRejectedCallbacks.forEach(fn => fn());}}try{//执行时可能会发生异常executor(resolve,reject);}catch (e){reject(e);//promise失败了}}
}

步骤二：then方法链式调用

then方法是promise的最基本的方法，返回两个回调，成功的回调和失败的回调：

    then(onFulFilled, onRejected) {if (this.status === 'resolved') { //成功状态的回调onFulFilled(this.value);}if (this.status === 'rejected') {//失败状态的回调onRejected(this.reason);}}

let p = new Promise(function(){resolve('我是成功');
})
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});

返回结果：

我是成功
我是成功
我是成功

为了实现该效果，则上一次的代码将要重新写过，因此可以把每次调用resolve的结果存入一个数组中，每次调用reject的结果存入另一个数组。这就是在上面定义两个数组,且分别在resolve()和reject()遍历两个数组的原因。

因此，在调用resolve()或者reject()之前，在pending状态时，会把多次then中的结果存入数组中，则上面的代码会改变为：

  then(onFulFilled, onRejected) {if (this.status === 'resolved') {onFulFilled(this.value);}if (this.status === 'rejected') {onRejected(this.reason);}// 当前既没有完成 也没有失败if (this.status === 'pending') {// 存放成功的回调this.onResolvedCallbacks.push(() => {onFulFilled(this.value);});// 存放失败的回调this.onRejectedCallbacks.push(() => {onRejected(this.reason);});}}

Promise 中then方法可以链式调用

在promise中，要实现链式调用返回的结果是返回一个新的promise.第一次then中返回的结果，无论是成功或失败，都将返回到下一次then中的成功态中，但在第一次then中若抛出错误，则将返回到下一次then的失败态中

参考文章：Promise不会？？看这里！！！史上最通俗易懂的Promise！！！ - 掘金 (juejin.cn)