ES6之Promise

发表于 | 分类于

接下来我将会从下面几个方面谈及Promise：

  • Promise解决了什么
  • Promise使用、方法
  • Promise在事件循环中的执行过程
  • Promise的串行、并行
  • 手写Promise

Promise

简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
特点

  1. 状态不受外界影响，三种状态
  • pending：进行中
  • fulfilled：已成功
  • rejected：已失败

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

  1. 一旦状态改变，就不会再变。有两种状态改变：
  • pending —— fulfilled (resolve)
  • pending —— rejected (reject)

缺点

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

用法

Promise对象是一个构造函数，用来生成Promise实例

Promise构造函数接受一个函数作为参数，这个函数有两个参数，resolve和reject，它们是两个函数，由 JS 引擎提供，不用自己部署。

1
2
3
4
5
6
7
8
9
const p= new Promise((resolve,reject)=>{
    if(异步成功){
        resolve(value);
    }else{
        reject(error);
        //new Error('错误信息')
    }
})
//

Promise实例生成后可以用then方法指定resolved和rejected状态的回调函数

1
2
3
4
5
p.then((value)=>{

},(error)=>{

})
  • 第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。第二个函数是可选的，不一定要提供
  • Promise 新建后立即执行，回调函数是异步进行的
  • 这两个函数都接受Promise对象传出的值作为参数，即如果调用resolve()和reject()时带有参数，那么它们的参数会被传递给回调函数
  1. reject函数的参数通常是Error对象的实例，表示抛出的错误
  2. resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例
    1
    2
    3
    4
    5
    6
    7
    const p1 = new Promise((resolve,reject

    })
    const p1 = new Promise((resolve,reject
        resolve(p1)
    })
    // p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作

这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。

  • 如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变
  • 如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。
1
2
3
4
5
6
7
8
9
10
11
12
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。

调用resolve或reject并不会终结 Promise 的参数函数的执行

1
2
3
4
5
6
7
8
new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句

1
2
3
4
5
new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

Promise.prototype.then()

Promise 实例具有then方法，作用是为Promise实例添加状态改变时的回调函数

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

1
2
3
4
5
getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

链式调用时，前一个回调函数有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

1
2
3
4
5
6
getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

Promise 在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。因为Promise的状态一旦改变，就永久保持该状态，不会再变了

1
2
3
4
5
6
7
8
const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
.then(function(value) { console.log(value) })
.catch(function(error) { console.log(error) });
// ok

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获

一般来说，不要在then方法里面定义reject 状态的回调函数（then的第二个参数），总是使用catch方法。

then的第二个参数无法处理同级then中（第一个回调函数中）的错误，catch可以捕获异步操作抛出的错误和then方法指定的回调函数中抛出的错误。

catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

运行完catch方法指定的回调函数，会接着运行后面那个then方法指定的回调函数。如果没有报错，则会跳过catch方法。

如果catch方法抛出一个错误，后面没有别的catch方法，导致这个错误不会被捕获，也不会传递到外层。后面的then也不会进行了。

Promise.prototype.finally()

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

1
2
3
4
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···})

不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

Promise.all()

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

1
const p = Promise.all([p1, p2, p3]);

Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例（Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）

p的状态由p1、p2、p3决定，分成两种情况

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

如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

Promise.race()

Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

1
const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

  • 可以利用Promise.race()做超时处理
1
2
3
4
5
6
7
8
const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
]);
p.then(response => console.log(response));
p.catch(error => console.log(error));

Promise.race([p1, p2])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Promise.resolve()

将现有对象转为 Promise 对象， 可以接收的参数分4种情况：

  1. Promise 实例： 将不做任何修改、原封不动地返回这个实例。

  2. thenable对象（具有then方法的对象）：
    Promise.resolve()会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let thenable = {
      then: function(resolve, reject) {
        resolve(42);
      }
    };

    let p1 = Promise.resolve(thenable);
    p1.then(function(value) {
      console.log(value);  // 42
    });

  3. 参数不是具有then方法的对象，或根本就不是对象：返回一个新的Promise对象，状态为resolved。Promise.resolve()的参数，会传给回调函数。

    1
    2
    3
    4
    5
    6
    const p = Promise.resolve('Hello');

    p.then(function (s){
      console.log(s)
    });
    // Hello

  4. 不带参数：直接返回一个resolved状态的 Promise 对象。

1
2
3
4
5
// 直接得到一个 Promise 对象
const p = Promise.resolve();

p.then(function () {
});

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。

Promise.reject()

也会返回一个新的Promise实例，该实例的状态为rejected。

Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

1
2
3
4
5
6
7
8
9
10
11
const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

Promise.reject方法的参数是一个thenable对象，执行以后，后面catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。

实现

  1. Promise.all
    使用场景：多个异步结果合并到一起

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    const p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
    // Promise.all([p1, p2, p3]).then(function (results) {
    //     console.log(results);  // [1, 2, 3]
    // });
    function promiseAll(promises) {
        return new Promise((resolve,reject)=>{
            if(!Array.isArray(promises)){
                reject('not array')
            }
            let resolvedCounter = 0,
            promiseNum = promises.length,
            resolvedValues = new Array(promiseNum);
            for(let i=0;i<promiseNum;i++){
                Promise.resolve(promises[i]).then((value)=>{
                    resolvedCounter++
                    resolvedValues[i] = value
                    if (resolvedCounter == promiseNum) {
                        return resolve(resolvedValues)
                    }
                },(reason)=>{
                    return reject(reason)
                })
            }
        })
    }
    const pAll=promiseAll([p1,p2,p3])
    console.log(pAll)

  2. promise.race
    把异步操作和定时器放到一起，如果定时器先触发，认为超时，告知用户

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功了')
    }, 2000);
})

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

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

QA

  1. ：Promise的then方法的参数期望是函数，传入非函数则会发生值穿透

promise.done()

总是处于回调链末端，保证抛出任何可能出现的错误

1
2
3
4
5
6
7
8
Promise.prototype.done= function(onFulfilled,onDejected){
    this.then(onFulfilled,onDejected).catch((reason)=>{
        // 抛出一个全局错误
        setTimeout(()=>{
            throw resson
        },0)
    })
}

promise的串行和并行

1. 并行

多个异步请求同时进行，可以利用promise.all

1
2
3
4
5
6
7
Promise.all(promises)
.then(() => {
  console.log('done')
})
.catch(() => {
  console.log('error')
})

2. 串行

一个异步请求完了之后在进行下一个请求，利用Array.prototype.reduce()：每次 reduce 返回的值都会作为下次 reduce 回调函数的第一个参数，直到队列循环完毕

1
2
3
4
let arr1 = [1, 2, 3, 4, 5]
let res = arr1.reduce((total, currentValue, currentIndex, arr) => {
    return total + currentValue
})

实现一个Promise

new Promise()时接收一个executor函数作为参数，该函数会立即执行，函数中有两个参数，它们也是函数，分别是resolve和reject，函数同步执行一定要放在try…catch中，否则无法进行错误捕获

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Promise(fn) {
    this.state = 'pending' // Promise 当前的状态
    this.data = undefined // Promise 当前的返回值
    this.callbacks = [] // 回调队列

    try {
        fn(this.resolve, this.reject)
    } catch (reason) {
        this.reject(reason)
    }
}

Promise.prototype = {
    constructor: Promise,
    resolve: function (value) { },
    reject: function (reason) { },
}