Promise的用法

1.什么是Promise

引用MDN上关于Promise的定义

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象

一个 Promise有以下几种状态:

• pending: 初始状态，既不是成功，也不是失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。
  pending 状态的 Promise 对象可能会变为fulfilled 状态并传递一个值给相应的状态处理方法，也可能变为失败状态（rejected）并传递失败信息。当其中任一种情况出现时，Promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法， 所以在异步操作的完成和绑定处理方法之间不存在竞争）。

2.如何使用Promise

我们来简单的使用下Promise

let p = new Promise((resolve, reject) => {
    resolve('test');
});

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

3.resolve

我们在刚刚简单使用Promise的时候，用了resolve，那么resolve是什么呢？

在刚刚的代码中加入打印出p的值看下

let p = new Promise((resolve, reject) => {
    resolve('resolve是什么');
});

console.log(p);  // Promise { 'resolve是什么' }

可以看到resolve返回的是带有值的Promise对象。这时候Promise的状态由pending变为fulfilled

4.reject

我们再用刚刚的方法打印出p的值，发现控制台报了一堆错误！

let p = new Promise((resolve, reject) => {
    reject('reject是什么');
});

console.log(p);

这个时候Promise的状态由pending变为rejected

5.then

then方法返回一个Promise，它可以有两个参数：Promise成功和失败的回调函数

let p = new Promise((resolve, reject) => {
    resolve('执行resolve')
    // reject('执行reject')
})

p.then(data => {
    console.log(data) // 执行resolve
},
    err => {
        console.log(err)
    }
)

如果是resolve，执行第一个函数，如果是reject，则执行第二个函数。

6.catch

catch方法返回一个Promise，用来处理拒绝的情况，接收一个参数，实质上catch就是then的方法的别名。

let p = new Promise((resolve, reject) => {
    reject('执行reject')
})

p.catch(err => {
	console.log(err);
})

7.链式调用

由于then方法和catch方法都返回了Promise，所以都能进行链式调用。

let p = new Promise((resolve, reject) => {
	resolve('链式调用');
})

p.then(data => {
	console.log(data+1);  // 链式调用1
	return data;
}).then(data => {
	console.log(data+2);  // 链式调用2
	return data;
}).then(data => {
	console.log(data+3);  // 链式调用3
})

8.Promise.resolve()

Promise.resolve()是new Promise()的简写，以下两种写法是一样的。

let p = new Promise((resolve, reject) => {
	resolve('new Promise()写法')
})

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

Promise.resolve('Promise.resolve()写法').then(data => console.log(data));

9.Promise.reject()

Promise.reject()和Promise.resolve()类似，都是new Promise()的快捷方式。

10.Promise.all()

Promise.all()接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 then 方法。

let p1 = new Promise((resolve, reject) => {
    resolve('p1');
})

let p2 = new Promise((resolve, reject) => {
    resolve('p2');
})

let p3 = new Promise((resolve, reject) => {
    resolve('p3');
})

Promise.all([p1, p2, p3]).then(data => {
    console.log(data);  // [ 'p1', 'p2', 'p3' ]
})

11.Promise.race()

Promise.race()接收一个 promise对象的数组作为参数,只要有一个promise对象变为resolve或reject状态的时候，就会继续进行后面的处理。

let p1 = new Promise((resolve, reject) => {
    resolve('p1');
})

let p2 = new Promise((resolve, reject) => {
    resolve('p2');
})

let p3 = new Promise((resolve, reject) => {
    resolve('p3');
})

Promise.race([p1, p2, p3]).then(data => {
    console.log(data);  // 'p1'
})