promise 一篇搞定

Promise

在本文中您将阅读到以下内容：

1. promise的定义
2. promise的状态
3. promise链式调用
4. promise的创建
5. promise中的常用方法
6. promise代码运行输出的常见练习题讲解

1. 定义

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
promise 代表的是已经正在发生的进程， 而且可以通过回调函数实现链式调用。

2. 状态

一个 Promise 必然处于以下几种状态之一：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）: 意味着操作成功完成。
• 已拒绝（rejected）: 意味着操作失败。

只有两种情况下promise对象的状态会被改变，第一种是pending状态的promise执行成功成为 fulfilled状态，第二种是pending状态的promise执行失败变为rejected。当这些情况之一发生时，我们用 promise 的 then 方法（这个方法会在后面进行详细讲解）排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

3. promise的链式调用

我们可以用 promise.then()，promise.catch() 和 promise.finally() 这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来。这些方法还会返回一个新生成的 promise 对象，这个对象可以被非强制性的用来做链式调用。
链式调用将promise嵌套起来，第一个promise嵌套的最深，也是第一个被弹出的。
注意，所有的 promise 都一定是异步的。因此，一个已经处于"已敲定"（“settled”）状态的 promise 中的操作只有 promise 链式调用的栈被清空了和一个事件循环过去了之后才会被执行。

const promiseA = new Promise( (resolutionFunc,rejectionFunc) => {
    resolutionFunc(777);
});
// 这时，"promiseA" 已经被敲定了。
promiseA.then( (val) => console.log("asynchronous logging has val:",val) );
console.log("immediate logging");

// 代码输出顺序
// immediate logging
// asynchronous logging has val: 777

4. promise的创建

Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”的函数作为它的参数。这个“处理器函数”接受两个函数——resolve 和 reject——作为其参数。当异步任务顺利完成且返回结果值时，会调用 resolve函数；而当异步任务失败且返回失败原因（通常是一个错误对象）时，会调用reject 函数。

使用示例：

let myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行！
    }, 250);
});

myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型，这里只是举个例子
    console.log(successMessage);
});

5. promise中的常用方法

5.1 promise.then()
then() 方法返回一个 Promise，它最多需要有两个参数：Promise 的成功和失败情况的回调函数。

语法：

p.then(onFulfilled[, onRejected]);

p.then(value => {
  // fulfillment
}, reason => {
  // rejection
});

参数介绍：
onFulfilled 可选
当 Promise 变成接受状态（fulfilled）时调用的函数。该函数有一个参数，即接受的最终结果（the fulfillment value）。如果该参数不是函数，则会在内部被替换为 (x) => x，即原样返回 promise 最终结果的函数
onRejected 可选
当 Promise 变成拒绝状态（rejected）时调用的函数。该函数有一个参数，即拒绝的原因（rejection reason）。 如果该参数不是函数，则会在内部被替换为一个 “Thrower” 函数 (it throws an error it received as argument)。

基本使用方法：

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

p1.then(value => {
  console.log(value); // 成功！
}, reason => {
  console.error(reason); // 出错了！
});

如果忽略针对某个状态的回调函数参数，或者提供非函数 (nonfunction) 参数，那么 then 方法将会丢失关于该状态的回调函数信息，但是并不会产生错误。如果调用 then 的 Promise 的状态（fulfillment 或 rejection）发生改变，但是 then 中并没有关于这种状态的回调函数，那么 then 将创建一个没有经过回调函数处理的新Promise 对象，这个新 Promise 只是简单地接受调用这个 then 的原 Promise 的终态作为它的终态。

一些更详细的使用方法可以参考这里

5.2 promise.catch()
catch() 方法返回一个Promise，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。catch 方法可以用于您的promise组合中的错误处理。

语法

p.catch(onRejected);

p.catch(function(reason) {
   // 拒绝
});

使用情景：
1. 与promise.then()一同进行链式调用

var p1 = new Promise(function(resolve, reject) {
  resolve('Success');
});

p1.then(function(value) {
  console.log(value); // "Success!"
  throw 'oh, no!';
}).catch(function(e) {
  console.log(e); // "oh, no!"
}).then(function(){
  console.log('after a catch the chain is restored');
}, function () {
  console.log('Not fired due to the catch');
});

2. 在异步函数中抛出的错误不会被catch捕获到

var p2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    throw 'Uncaught Exception!';
  }, 1000);
});

p2.catch(function(e) {
  console.log(e); // 不会执行
});

3. 在resolve()后面抛出的错误会被忽略

var p3 = new Promise(function(resolve, reject) {
  resolve();
  throw 'Silenced Exception!';
});

p3.catch(function(e) {
   console.log(e); // 不会执行
});

5.3 promise.finally()
finally() 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。
这避免了同样的语句需要在then()和catch()中各写一次的情况。

语法：

p.finally(onFinally);

p.finally(function() {
   // 返回状态为(resolved 或 rejected)
})

如果你想在 promise 执行完毕后无论其结果怎样都做一些处理或清理时，finally() 方法可能是有用的。

finally() 虽然与 .then(onFinally, onFinally) 类似，它们不同的是：

• 调用内联函数时，不需要多次声明该函数或为该函数创建一个变量保存它。
• 由于无法知道promise的最终状态，所以finally的回调函数中不接收任何参数，它仅用于无论最终结果如何都要执行的情况。
• 与Promise.resolve(2).then(() => {}, () => {})（resolved的结果为undefined）不同，Promise.resolve(2).finally(() => {})resolved的结果为 2。
• 同样，Promise.reject(3).then(() => {}, () => {})(fulfilled的结果为undefined), Promise.reject(3).finally(() => {})
  rejected 的结果为 3。

5.4 promise.all(iterable)
Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型，即一个可迭代的对象）的输入，并且只返回一个Promise实例， 那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。
如果参数中包含非 promise 值，这些值将被忽略，但仍然会被放在返回数组中（如果 promise 完成的话。

Promise.all 当且仅当传入的可迭代对象为空时为同步

var p = Promise.all([]); // will be immediately resolved
var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
console.log(p);
console.log(p2)
setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p2);
});

// logs
// Promise { <state>: "fulfilled", <value>: Array[0] }
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }

5.5 promise.any(iterable)
Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise 和AggregateError类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。本质上，这个方法和Promise.all()是相反的。只要有一个 promise 成功此方法就会终止，它不会等待其他的 promise 全部完成。
5.6 promise.race(iterable)
方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

var p1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "two");
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // 两个都完成，但 p2 更快
});

var p3 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "three");
});
var p4 = new Promise(function(resolve, reject) {
    setTimeout(reject, 500, "four");
});

Promise.race([p3, p4]).then(function(value) {
  console.log(value); // "three"
  // p3 更快，所以它完成了
}, function(reason) {
  // 未被调用
});

var p5 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, "five");
});
var p6 = new Promise(function(resolve, reject) {
    setTimeout(reject, 100, "six");
});

Promise.race([p5, p6]).then(function(value) {
  // 未被调用
}, function(reason) {
  console.log(reason); // "six"
  // p6 更快，所以它失败了
});

5.7 promise.reject(reason)
Promise.reject()方法返回一个带有拒绝原因的Promise对象。 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
使用方法：

Promise.reject(new Error('fail')).then(function() {
  // not called
}, function(error) {
  console.error(error); // Stacktrace
});

5.8 promise.resolve(value)
Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是thenable（即带有"then" 方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
使用方法

const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value);
  // expected output: 123
});

5.9 promise.allSettled(iterable)
该Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。

相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。

6. promise代码运行输出的常见练习题讲解

题目1：

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

结果：
1 2 4 3

Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。

题目2：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})

console.log('promise1', promise1)
console.log('promise2', promise2)

setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

结果：

promise1 Promise { <pending> }
promise2 Promise { <pending> }
(node:50928) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: error!!!
(node:50928) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
promise1 Promise { 'success' }
promise2 Promise {
  <rejected> Error: error!!!
    at promise.then (...)
    at <anonymous> }

promise 有 3 种状态：pending、fulfilled 或 rejected。状态改变只能是
pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。上面 promise2 并不是
promise1，而是返回的一个新的 Promise 实例。

题目3：

const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

结果：
then: success1

构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用

题目4

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })

结果：
1 2

promise链式调用

题目5：

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

结果

then: Error: error!!!
    at Promise.resolve.then (...)
    at ...

.then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获

题目6

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

结果
1

.then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。

题目7：

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

结果

fail2: Error: error
    at success (...)
    at ...

.then 可以接收两个参数，第一个是处理成功的函数，第二个是处理错误的函数。.catch 是 .then
第二个参数的简便写法，但是它们用法上有一点需要注意：.then 的第二个处理错误的函数捕获不了第一个处理成功的函数抛出的错误，而后续的
.catch 可以捕获之前的错误。

参考连接：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://mp.weixin.qq.com/s/LlYpzppjZ37MfafGKP2GCw