彻底掌握 Promise

文章目录

• 一、Promise 出现的原因
• 二、什么是 Promise？
• 三、Promise 的优缺点
• 四、Promise 的用法
• • 1. Promise是一个构造函数
  • 2. then 与 reject 的用法
  • 3. then的链式调用
  • 4. catch的用法
  • 5. all的用法
  • 6. race的用法
  • 7. Promise.resolve()

---

其他相关传送门

1. Promise异步操作详解
2. Promise详细用法
3. 手写一个Promise
4. 细说 async/await

---

一、Promise 出现的原因

在 Promise 出现以前，我们处理一个异步网络请求，大概是这样：

// 请求 代表 一个异步网络调用。
// 请求结果 代表网络请求的响应。
请求1(function(请求结果1){
    处理请求结果1
})

看起来还不错。
但是，需求变化了，我们需要根据第一个网络请求的结果，再去执行第二个网络请求，代码大概如下：

请求1(function(请求结果1){
    请求2(function(请求结果2){
        处理请求结果2
    })
})

看起来也不复杂。
但是。。需求是永无止境的，于是乎出现了如下的代码：

请求1(function(请求结果1){
    请求2(function(请求结果2){
        请求3(function(请求结果3){
            请求4(function(请求结果4){
                请求5(function(请求结果5){
                    请求6(function(请求结果6){
                        ...
                    })
                })
            })
        })
    })
})

这回傻眼了。。。 臭名昭著的 回调地狱 现身了。

更糟糕的是，我们基本上还要对每次请求的结果进行一些处理，代码会更加臃肿，在一个团队中，代码 review 以及后续的维护将会是一个很痛苦的过程。

回调地狱带来的负面作用有以下几点：

• 代码臃肿
• 可读性差
• 耦合度过高，可维护性差
• 代码复用性差
• 容易滋生 bug
• 只能在回调里处理异常

出现了问题，自然就会有人去想办法。这时，就有人思考了，能不能用一种更加友好的代码组织方式，解决异步嵌套的问题。

let 请求结果1 = 请求1();
let 请求结果2 = 请求2(请求结果1); 
let 请求结果3 = 请求3(请求结果2); 
let 请求结果4 = 请求2(请求结果3); 
let 请求结果5 = 请求3(请求结果4); 

类似上面这种同步的写法。 于是 Promise 规范诞生了，并且在业界有了很多实现来解决回调地狱的痛点。比如业界著名的 Q 和 bluebird，bluebird 甚至号称运行最快的类库。

---

二、什么是 Promise？

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

• 从语法上讲，Promise 是一个 ES6 的原生对象，从它可以获取异步操作的消息；
• 从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
• Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

Promise 有三种状态：

• pending (等待态)
• fulfiled (成功态)
• rejected (失败态)

一旦 Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。
创造 promise 实例后，它会立即执行。

基本过程：

1. 初始化 Promise 状态（pending）；
2. 立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理；
3. 执行 then(…) 注册回调处理数组（then 方法可被同一个 promise 调用多次）；
4. Promise里的关键是要保证，then方法传入的参数 onFulfilled 和 onRejected，必须在then方法被调用的那一轮事件循环之后的新执行栈中执行；

promise是用来解决两个问题的：

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

---

三、Promise 的优缺点

优点：

1. 有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数（回调地狱）。
2. 此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

缺点：

1. 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
3. 当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

---

四、Promise 的用法

1. Promise是一个构造函数

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

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

let p = new Promise((resolve, reject) => {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
        resolve(num);
    } else {
        reject('数字太大了');
    }
})

2. then 与 reject 的用法

then 中传了两个参数，then 方法可以接受两个参数，第一个对应 resolve 的回调，第二个对应 reject 的回调。
所以我们能够分别拿到他们传过来的数据。

let p = new Promise((resolve, reject) => {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
        resolve(num);
    } else {
        reject('数字太大了');
    }
})

p.then((data) => {
    console.log('resolve:' + data); // 处理resolve回调
}, (err) => {
    console.log('reject:' + err); // 处理reject回调
})

多次运行这段代码，你会随机得到下面两种结果：
resolve:5 、 reject:数字太大了

3. then的链式调用

所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

request('test1.html', data)
	.then(function (data1) {
	    console.log('第一次请求成功, 这是返回的数据:', data1);
	    return request('test2.html', data1);
	})
	.then(function (data2) {
	    console.log('第二次请求成功, 这是返回的数据:', data2);
	    return request('test3.html', data2);
	})
	.then(function (data3) {
	    console.log('第三次请求成功, 这是返回的数据:', data3);
	})
	.catch(function (error) {
	    console.log('sorry, 请求失败了, 这是失败信息:', error);
	});

Promise对象的then方法返回一个新的Promise对象，因此可以通过链式调用then方法。

then方法接收两个函数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败时的回调。
两个函数只会有一个被调用，函数的返回值将被用作创建then返回的Promise对象。

这两个参数的返回值可以是以下三种情况中的一种：

1. return 一个同步的值 ，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
2. return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
3. throw 一个同步异常，then方法将返回一个rejected状态的Promise, 值是该异常。

var p = new Promise(function (resolve, reject) {
    resolve(1);
});

p.then(function (value) {
    console.log(value); // 1
    return value * 2; // return一个同步的值(resolved状态)
}).then(function (value) {
    console.log(value); // 2
}).then(function (value) {
    console.log(value); // 上面的then没有return，因此默认是return undefined
    return Promise.resolve(3);
}).then(function (value) {
    console.log(value); // 接收到resolve(3)
    return Promise.reject(4);
}).then(function (value) {
    console.log('resolve: ' + value);
}, function (err) {
    console.log('reject: ' + err); // 接收到reject(4)
})

控制台输出：

1
2
undefined
3
"reject: 4"

4. catch的用法

我们知道 Promise 对象除了 then 方法，还有一个 catch 方法，它是做什么用的呢？

其实它和 then 的第二个参数一样，用来指定 reject 的回调。 用法是这样：

let p = new Promise((resolve, reject) => {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
        resolve(num);
    } else {
        reject('数字太大了');
    }
})

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

效果和写在then的第二个参数里面一样。

不过它还有另外一个作用：在执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死 js，而是会进到这个 catch 方法中。

catch 既能处理 reject 回调，也能捕捉错误

请看下面的代码：

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

在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。
如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。
但是在这里，会得到这样的结果：

也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。
即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能

5. all的用法

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

多个 Promise 任务同时执行。 如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个Promise 任务 rejected，则只返回 rejected 任务的结果。

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(){
  // 只要有失败，则失败
})

三个都成功，则成功
只要有失败，则失败

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

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

let p3 = Promse.reject('失败');

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

Promse.all 在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个 ajax 的数据回来以后才正常显示，在此之前只显示 loading 图标。

showLoading(); // 显示loading

let p1 = new Promise((resolve, reject) => {
    resolve('请求1成功');
})

let p2 = new Promise((resolve, reject) => {
    resolve('请求2成功');
})

Promise.all([p1, p2]).then(() => {
    hideLoading(); // 消失loading
})

需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

6. race的用法

顾名思义，Promse.race 就是赛跑的意思，意思就是说，
Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

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，报出“图片请求超时”的信息。

7. Promise.resolve()

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

console.log(p1 === p2); 
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(function(value){
  console.log('p4=' + value);
});

p2.then(function(value){
  console.log('p2=' + value);
})

p1.then(function(value){
  console.log('p1=' + value);
})

控制台输出：

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...) 可以接收一个 值 或者是一个 Promise对象 作为参数。

当参数是普通值时，它返回一个resolved状态的Promise对象，对象的值就是这个参数；
当参数是一个Promise对象时，它直接返回这个Promise参数。因此，p1 === p2。

但通过new的方式创建的Promise对象都是一个新的对象，因此后面的三个比较结果都是false。

另外，为什么p4的then最先调用，但在控制台上是最后输出结果的呢？
因为p4的resolve中接收的参数是一个Promise对象p1，resolve会对p1”拆箱“，获取p1的状态和值，但这个过程是异步的

.

无论是 then 还是 catch ，只要不报错，都返回的是 resolved 状态的 promise。
报错则返回的是 rejected 状态的 promise。

Promise.resolve().then(() => {
    console.log(1); // 不报错，返回的是resolved状态的promise，触发then回调
}).catch(() => {
    console.log(2); // 不触发
}).then(() => {
    console.log(3); // 触发
})

// 1
// 3

Promise.resolve().then(() => {
    console.log(1);
    throw new Error('error'); // 报错，返回的是rejected状态的promise，触发catch回调
}).catch(() => {
    console.log(2); // 不报错，返回的是resolved状态的promise，触发then回调
}).then(() => {
    console.log(3); // 触发
})

// 1
// 2
// 3