【笔记】JS的Promise承诺

发表于 更新于 分类于 阅读次数：

前言

JS的Promise承诺学习笔记

Promise对象

  • 创建Promise对象时，需要传入一个回调函数，这个回调函数被称为执行器函数（executor），执行器函数会立即执行，并传入两个形参，这两个形参是两个回调函数，分别表示决议（resolve）回调和拒绝（reject）回调
  • 一旦Promise对象的状态从进行中（pending）变为已兑现（fulfilled）或从进行中（pending）变为已拒绝（rejected）时，这个Promise对象的状态不会再次改变
  • 当执行器函数中还没有调用resolve()或reject()时，则Promise对象的状态为进行中（pending）
  • 当执行器函数中调用resolve()时
    • 如果resolve()没有传递任何参数，则Promise对象的状态变成已兑现（fulfilled）
    • 如果resolve()传入的参数是非thenable对象（一个没有then方法的对象）或普通值，则Promise对象的状态立即变成已兑现（fulfilled）
    • 如果resolve()传入的参数是thenable对象（一个有then方法的对象），则Promise对象的状态由这个对象的then方法的返回值决定
    • 如果resolve()传入的参数是另一个Promise对象，则Promise对象状态由另一个Promise对象的执行器函数的返回值决定
  • 当执行器函数中调用reject()时，则Promise对象的状态立即变为已拒绝（rejected）
  • 当执行器函数中抛出异常，则Promise对象的状态立即变为已拒绝（rejected）
  • 如果Promise对象的状态为已兑现（fulfilled），则立即执行then()中的回调函数；如果Promise对象的状态为已拒绝（rejected），则立即执行catch()中的回调函数

创建Promise对象

创建Promise对象并兑现

1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {
  
  // 进行中（pending）
  ...

  // 已兑现（fulfilled）
  resolve("value");
});

创建Promise对象并拒绝

1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {
  
  // 进行中（pending）
  ...
  
  // 已拒绝（rejected）
  reject("err");
});

创建Promise对象并决议

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const promise = new Promise((resolve, reject) => {

  // 进行中（pending）
  const flag = window.confirm();

  if (flag) {

    // 已兑现（fulfilled）
    resolve("value");
  } else {

    // 已兑现（fulfilled）
    resolve("value");
  }
});

执行器函数中的决议

立即兑现

调用resolve()
1
2
3
4
const promise = new Promise((resolve, reject) => {
  // 已兑现（fulfilled）
  resolve("value");
});
返回普通值
1
2
3
4
const promise = new Promise((resolve, reject) => {
  // 已兑现（fulfilled）
  return "value";
});
返回非thenable对象
1
2
3
4
const promise = new Promise((resolve, reject) => {
  // 已兑现（fulfilled）
  return {};
});
由thenable对象进行决议
1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {
  return {
    then: function (resolve, reject) {
      // 已兑现（fulfilled）
      resolve("value");
    }
  }
});
由新Promise对象进行决议
1
2
3
4
5
6
const promise = new Promise((resolve, reject) => {
  return new Promise((resolve, reject) => {
    // 已兑现（fulfilled）
    resolve("value");
  });
});

立即拒绝

调用reject()
1
2
3
4
const promise = new Promise((resolve, reject) => {
  // 已拒绝（rejected）
  reject("err");
});
抛出异常
1
2
3
4
const promise = new Promise((resolve, reject) => {
  // 已拒绝（rejected）
  throw new Error("err");
});
由thenable对象进行拒绝
1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {
  return {
    then: function (resolve, reject) {
      // 已拒绝（rejected）
      reject("err");
    }
  }
});
由新Promise对象进行拒绝
1
2
3
4
5
6
const promise = new Promise((resolve, reject) => {
  return new Promise((resolve, reject) => {
    // 已拒绝（rejected）
    reject("err");
  });
});

监听Promise对象回调

监听Promise对象的兑现

1
2
3
promise.then((value) => {
  console.log(value);
});

监听Promise对象的拒绝

1
2
3
promise.catch((err) => {
  console.log(err);
});

监听Promise对象的决议

  • 即便只有拒绝，也要同时定义then函数和catch函数，否则会报错：Uncaught (in promise) Error: xxx
1
2
3
4
5
6
7
promise.then((value) => {
  console.log(value);
});

promise.catch((err) => {
  console.log(err);
});
  • 链式调用
1
2
3
4
5
promise.then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err);
});

同一个Promise的多个监听

监听Promise对象的兑现
1
2
3
4
5
6
7
promise.then((value) => {
  console.log(value);
});

promise.then((value) => {
  console.log(value);
});

监听Promise对象的拒绝

1
2
3
4
5
6
7
promise.catch((err) => {
  console.log(err);
});

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

最终

  • 无论Promise对象的状态变为已兑现（fulfilled）还是已拒绝（rejected），如果定义了finally函数，都会执行finally函数定义的回调函数
  • finally函数定义的回调函数不会接收任何参数
1
2
3
promise.finally(() => {
  console.log("finally"); // "finally"
});

链式调用

  • 由于then()返回的是一个新Promise对象，新Promise对象的状态由then()的回调函数返回值决定，并可以继续链式调用then()
  • 当then()中的回调函数还没有return时，则Promise对象的状态为进行中（pending）
  • 当then()中的回调函数return时
    • 如果返回值是非thenable对象（一个没有then方法的对象）或普通值，则新Promise对象的状态立即变成已兑现（fulfilled）
    • 如果返回值是thenable对象（一个有then方法的对象），则新Promise对象的状态由这个对象的then方法的返回值决定
    • 如果返回值是另一个Promise对象，则新Promise对象状态由另一个Promise对象的执行器函数的返回值决定
  • 当then()中的回调函数抛出异常，则新Promise对象的状态立即变为已拒绝（rejected）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const promise = new Promise((resolve, reject) => {resolve("value")}).then((value) => {

  // 进行中（pending）
  ...

  if (true) {

    // 已兑现（fulfilled）
    return "value";
  } else {
    
    // 已拒绝（rejected）
    throw new Error("err");
  }
}).then((value) => {
  console.log(value); // "value"
}).catch((err) => {
  console.log(err);
});

执行器函数中的决议

立即兑现

返回普通值
1
2
3
4
const promise = new Promise((resolve, reject) => {}).then((value) => {
  // 已兑现（fulfilled）
  return "value";
});
返回非thenable对象
1
2
3
4
const promise = new Promise((resolve, reject) => {}).then((value) => {
  // 已兑现（fulfilled）
  return {};
});
由thenable对象进行决议
1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {}).then((value) => {
  return {
    then: function (resolve, reject) {
      // 已兑现（fulfilled）
      resolve("value");
    }
  }
});
由新Promise对象进行决议
1
2
3
4
5
6
const promise = new Promise((resolve, reject) => {}).then((value) => {
  return new Promise((resolve, reject) => {
    // 已兑现（fulfilled）
    resolve("value");
  });
});

立即拒绝

抛出异常
1
2
3
4
const promise = new Promise((resolve, reject) => {}).then((value) => {
  // 已拒绝（rejected）
  throw new Error("err");
});
由thenable对象进行拒绝
1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {}).then((value) => {
  return {
    then: function (resolve, reject) {
      // 已拒绝（rejected）
      reject("err");
    }
  }
});
由新Promise对象进行拒绝
1
2
3
4
5
6
const promise = new Promise((resolve, reject) => {}).then((value) => {
  return new Promise((resolve, reject) => {
    // 已拒绝（rejected）
    reject("err");
  });
});

监听then函数的回调

监听then函数的兑现

1
2
3
promise.then((value) => {}).then((value) => {
  console.log(value);
}).catch(() => {});

监听then函数的拒绝

1
2
3
promise.then((value) => {}).catch((err) => {
  console.log(err);
});

监听then函数的决议

1
2
3
4
5
promise.then((value) => {}).then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err);
});

监听catch函数的回调

监听then函数的兑现

1
2
3
promise.catch((err) => {}).then((value) => {
  console.log(value);
}).catch(() => {});

监听then函数的拒绝

1
2
3
promise.catch((err) => {}).catch((err) => {
  console.log(err);
});

监听then函数的决议

1
2
3
4
5
promise.catch((err) => {}).then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err);
});

多级链式调用

多级链式调用的兑现

  • 链式调用时，只要Promise对象的状态变为已兑现（fulfilled），则立即寻找最近的then函数进行回调
1
2
3
4
5
6
7
8
9
const promise = new Promise((resolve, reject) => {
  reject("err1")
}).then((value) => {
  throw new Error("err2");
}).then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err); // "err1"
});

多级链式调用的拒绝

  • 链式调用时，只要Promise对象的状态变为已拒绝（rejected），则立即寻找最近的catch函数进行回调
1
2
3
4
5
6
7
8
9
const promise = new Promise((resolve, reject) => {
  reject("err1")
}).then((value) => {
  throw new Error("err2");
}).then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err); // "err1"
});

类方法

resolve

  • 直接定义状态为已兑现（fulfilled）的Promise对象
1
const promise = Promise.resolve("value");
1
2
3
const promise = new Promise((resolve) => {
  resolve("value");
});

reject

  • 直接定义状态为已拒绝（rejected）的Promise对象
1
const promise = Promise.reject("value");
1
2
3
const promise = new Promise((_, reject) => {
  reject("value");
});

all

  • 将多个Promise对象包裹在一起形成一个新的Promise，新的Promise对象的状态由包裹的所有Promise对象共同决定

  • 获取所有已成功的值

    • 当所有的Promise对象的状态都变为已兑现（fulfilled），则新Promise对象的状态变为已兑现（fulfilled），并将所有Promise对象返回值以数组的形式作为then函数的参数
1
2
3
4
5
6
const promise1 = new Promise((resolve, reject) => {resolve("value1")});
const promise2 = new Promise((resolve, reject) => {resolve("value2")});

const promiseAll = Promise.all([promise1, promise2]).then((value) => {
  console.log(value); // ["value1", "value2"]
}).catch((err) => {});
  • 当有一个Promise对象的状态变为已拒绝（rejected），则新Promise对象的状态立即变为已拒绝（rejected），且立即终止执行其他Promise对象的执行器函数，并将第一个已拒绝（rejected）的返回值作为catch函数的参数
1
2
3
4
5
6
const promise1 = new Promise((resolve, reject) => {reject("err1")});
const promise2 = new Promise((resolve, reject) => {reject("err2")});

const promiseAll = Promise.all([promise1, promise2]).then((value) => {}).catch((err) => {
  console.log(err); // "err1"
});

allSettled

  • 将多个Promise对象包裹在一起形成一个新的Promise，新的Promise对象状态由包裹的所有Promise对象共同决定

  • 获取所有值，不论是否已成功

    • 不论任何一个Promise对象的状态变为已兑现（fulfilled）还是已拒绝（rejected），都会继续执行完所有其他Promise对象的执行器函数
    • 新Promise对象的状态最终一定会变为已兑现（fulfilled）
    • 所有执行器函数都执行完成后，将所有结果以数组的形式作为then函数的参数
1
2
3
4
5
6
const promise1 = new Promise((resolve, reject) => {resolve("value")});
const promise2 = new Promise((resolve, reject) => {reject("err")});

const promiseAll = Promise.allSettled([promise1, promise2]).then((value) => {
  console.log(value); // [{status: "fulfilled", value: "value"}, {status: "rejected", reason: "err"}]
}).catch((err) => {});

any

  • 将多个Promise对象包裹在一起形成一个新的Promise，新的Promise对象状态由包裹的所有Promise对象共同决定

  • 获取第一个已成功的值

    • 当有一个Promise对象的状态变为已兑现（fulfilled），则新Promise对象状态变为已兑现（fulfilled），并立即终止所有所有其他Promise对象的执行器函数
1
2
3
4
5
6
const promise1 = new Promise((resolve, reject) => {resolve("value1")});
const promise2 = new Promise((resolve, reject) => {resolve("value2")});

const promiseAll = Promise.rase([promise1, promise2]).then((value) => {
  console.log(value); // "value1"
}).catch((err) => {});
  • 当有Promise对象的状态变为已拒绝（rejected），继续寻找状态变为已兑现（fulfilled）的Promise对象
  • 当所有Promise对象的状态都变为已拒绝（rejected），则新Promise对象状态变为已拒绝（rejected）
1
2
3
4
5
6
const promise1 = new Promise((resolve, reject) => {reject("err1")});
const promise2 = new Promise((resolve, reject) => {reject("err2")});

const promiseAll = Promise.rase([promise1, promise2]).then((value) => {}).catch((err) => {
  console.log(err); // "AggregateError: All promises were rejected"
});

rase

  • 将多个Promise对象包裹在一起形成一个新的Promise，新的Promise对象状态由包裹的所有Promise对象共同决定

  • 获取第一个值，不论是否已成功

    • 不论任何一个Promise对象的状态变为已兑现（fulfilled）还是已拒绝（rejected），则新Promise对象的状态立即跟随改变，并立即终止所有所有其他Promise对象的执行器函数
1
2
3
4
const promise1 = new Promise((resolve, reject) => {resolve("value")});
const promise2 = new Promise((resolve, reject) => {reject("err")});

const promiseAll = Promise.rase([promise1, promise2]).then((value) => {}).catch((err) => {});

完成