ES6--Promise基础

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

---

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)