猫老板的豆

彻底掌握 Promise

文章目录

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

其他相关传送门

Promise异步操作详解
Promise详细用法
手写一个Promise
细说 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 实例后，它会立即执行。

基本过程：

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

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

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

三、Promise 的优缺点

优点：

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

缺点：

无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
当处于 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对象。

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

return 一个同步的值，或者 undefined（当没有返回一个有效值时，默认返回undefined），then方法将返回一个resolved状态的Promise对象，Promise对象的值就是这个返回值。
return 另一个 Promise，then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
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);
})