一、promise概念

1、Promise 是异步编程的一种解决方案

从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果，其实是一个构造函数，自己身上有all、reject、resolve，race这几个方法，原型上有then、catch，finally等方法。

 promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

Promise对象有以下两个特点：

1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

2、promise.prototytype.then()

promise实例状态改变的回调函数，有两个参数：第一个是成功回调函数，第二个是失败回调函数。他会返回一个全新的promise，因此可以继续then链式调用。

		let p = new Promise(function (resolve, reject) { //做一些异步操作
		setTimeout(function () {
			var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
			console.log('随机数生成的值：', num)
			if (num <= 10) {
				resolve(num);
			} else {
				reject('数字太于10了即将执行失败回调');
			}
		}, 200);
	})
	p.then(res => { // 成功
		console.log('then1', res);
	}, error => {
		// 失败
		console.log('then1', error);
	}).then(res => {
		// 成功
		console.log('then2', res);
	}, error => {
		// 失败
		console.log('then2', error);
	}).then(res => {
		// 成功
		console.log('then3', res);
	}, error => {
		// 失败
		console.log('then3', error);
	});

 

3、promise.prototype.catch()

失败回调函数，状态变为rejected执行。相当于promise.prototytype.then(null/undifined,rejection)，如果promise内发生了错误，但却没有定义catch()，这时运行到这一行代码会报错，但是不会影响到promise后面代码的执行

	function promiseClick() {
		let p = new Promise(function (resolve, reject) {
			setTimeout(function () {
				var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
				console.log('随机数生成的值：', num)
				if (num <= 10) {
					resolve(num);
				} else {
					reject('数字太于10了即将执行失败回调');
				}
			}, 2000);
		})
		return p
	}
	promiseClick().then(function (data) {
		console.log('resolved成功回调');
		console.log('成功回调接受的值：', data);
		console.log(noData);
	}).catch(function (reason, data) {
		console.log('catch到rejected失败回调');
		console.log('catch失败执行回调抛出失败原因：', reason);
	});

在resolve的回调中，我们console.log(noData);而noData这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到上图的结果，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了

二、使用方法

1、基础用法

new Promise((resolve, reject) => {
        // resolve 成功的回调
        // reject  失败的回调
        // 成功或者失败只能存在一种状态，不能同事执行两个状态
        resolve('成功')
        reject('失败')
        // then 是获取Promise的resolve, reject状态
    }).then(res => {
        // 成功
        console.log(res);
    }, error => {
        // 失败
        console.log(error);
    })

2、promise.finally()

promise实例无论状态是什么都会执行的函数，finally不接受任何参数。

 const p1 = function () {
            return new Promise((resolve, reject) =>{
                // 失败时
                // reject("失败了")
                //  resolve(2);
                // 成功时
                resolve(2)
                reject("失败了")
            });
        };
        p1().then(res=> {
            console.log(res);
        }).catch(error=>{
            console.log(error);
        }).finally(()=>{
            console.log('无论失败或者成功都会走这个函数');
        })

3、promise.all()

将多个promise实例包装成一个新的promise实例

1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

const p1 = function () {
                    return new Promise((resolve, reject)=>{
                        resolve(1);
                    });
                };
                const p2 = function () {
                    return new Promise((resolve, reject)=>{
                        resolve(2);
                    });
                };
                const p3 = function () {
                    return new Promise((resolve, reject)=>{
                        // reject("失败了")
                        resolve(3);
                    });
                };
 
                // Promise.all 所有封装的Promise都成功才会成功，只要有一个失败就会失败
                let p = Promise.all([p1(), p2(), p3()]).then(results=>{
                    console.log(results);//[1, 2, 3]
                }).catch(error=>{
                    console.log(err);
                    // 当p3的reject("失败了")被解开时控制台会打印失败了
                })
 
 

4、promise.race()

// race()  把多个封装的promise 组合起来，看谁跑的快
        const p1 = function () {
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(1);
                }, 500)
 
            });
        };
        const p2 = function () {
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(2);
                }, 400)
            });
        };
        const p3 = function () {
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve(3);
                }, 600)
            });
        };
        //谁先执行完成就先执行回调，其余的将不会再进入race的任何回调,其余的没有停止，自行执行
        let result = Promise.race([p1(), p2(), p3()]).then(results=>{
            console.log(results);
        }).catch(error=>{
            console.log(error);
        })
 
 
 
 
 

5、promise.any()

 // 1. 只要有一个实例变成fulfilled，他就会变成fulfilled
        // 2. 只有全部实例状态都变成rejected，它才会变成rejected
  const p1 = function () {
            return new Promise((resolve, reject)=>{  
                resolve(5);
            });
        };
        const p2 = function () {
            return new Promise((resolve, reject)=>{
                reject(2);
            });
        };
        const p3 = function () {
            return new Promise((resolve, reject)=>{ 
                resolve(3);
            });
        };
 
        let result = Promise.any([p1(), p2(), p3()]).then(results=>{
            console.log(results);
            // 5 因为p1成功了，只返回找到的第一个成功的，遇到reject会继续向下寻找
        }).catch(error=>{
            console.log(error);
            // 当三个return返回的都是reject时，控制台打印AggregateError: All promises were rejected
        })

6、promise.allSettled()

等所有实例都返回结果，他的状态就只会变成fulfilled

const p1 = function () {
        return new Promise((resolve, reject) => {
            resolve(1);
        });
    };
    const p2 = function () {
        return new Promise((resolve, reject) => {
            resolve(2);
        });
    };
    const p3 = function () {
        return new Promise((resolve, reject) => {
            reject(3);
        });
    };
 
    // Promise.allSettled无论成功或者失败会把所有的状态返回给results
    // 没有catch
    let result = Promise.allSettled([p1(), p2(), p3()]).then(results => {
        console.log(results);
    })