codecademy课程笔记——JavaScript Promise

 

Promise是一种表示异步操作最终的结果的对象，一个Promise对象有三种状态

Pending： 初始状态 ，操作还未完成

Fullfilled：操作成功完成，且这个promise现在有一个resolved value

Rejected: 操作失败

 

promise 最终状态都是 settled: fulfilled or rejected

 

 构造一个Promise对象

 

const executorFunction = (resolve, reject) => { };
const myFirstPromise = new Promise(executorFunction);

Promise构造函数接收一个函数（executor function）作为参数，这个函数会在构造函数调用时自动开始执行，这个函数通常发起一个异步操作，并且决定这个promise该如何被settle

这个 executor function 有两个参数，通常被用来指代 resolve() 和 reject() 函数，这两个函数不是程序员定义的，JavaScript会传递它自己的 resolve() 和 reject() 函数到 executor function

resolve 函数把 promise 的状态由 pending 改为 fulfilled，然后 promise 的 resolved value 会作为参数传给 resolve()

reject 函数会 promise 的状态由 pending 改为 rejected，然后 promise 的rejection reason 会作为参数传给 reject()

const executorFunction = (resolve, reject) => {
  if (someCondition) {
      resolve('I resolved!');
  } else {
      reject('I rejected!');
  }
}
const myFirstPromise = new Promise(executorFunction);

上面这段代码：

声明了一个变量 myFirsePromise

myFirsePromise 是用new操作符 调用Promise构造函数构造的

executorFunction() 被传给这个构造函数，这个函数参数有两个参数 resolve 和 reject

如果 someCondition 的计算结果为 true，调用 resolve()

反之，则调用 reject()

这段代码是基于一个简单的条件判断，实际应用时，promise会基于异步操作返回的结果来决定最后的操作。

下面是一个简单的例子

const inventory = {
  sunglasses: 1900,
  pants: 1088,
  bags: 1344
};

// Write your code below:
function myExecutor(resolve, reject) {
  if(inventory.sunglasses > 0){
    resolve('Sunglasses order processed.')
  } else {
    reject('That item is sold out.')
  }
}

let orderSunglasses = () => {
  return new Promise(myExecutor)
}

let orderPromise = orderSunglasses()

console.log(orderPromise) // Promise {'Sunglassed'}

首先，创建了一个函数 myExecutor() ，后面将把这个函数传入 Promise 构造函数中

myExecutor() 的作用：

有两个参数 resolve 和 reject

检测对象 inventory 的属性 sunglasses 是否大于0

如果是 myExecutor() 会以字符串参数 'Sunglasses order processd' 调用 resolve()

如果不是 myExecutor() 会以字符串参数 'That item is sold out.' 调用 reject()

然后创建了一个函数 orderSunglasses() ，这个函数没有参数，并且返回一个以 myExecutor() 为参数构造的Promise对象

然后创建了一个变量 orderPromise 并将 orderSunglasses() 的返回值赋值给这个变量

执行结果为

了解怎么创建一个 Promise 对象是有用的，但是大多数时候，知道怎么去使用它才是关键

你要处理一个异步操作返回的 Promise 对象，这些对象开始都是 pending 状态，但最终都会被处理完成

Consuming Promise （消耗）使用Promise

一个Promise的初始状态是 Pending， 但是 Promise 一定会被处理，.then() 方法就是当 Promise 解决之后要执行的代码

.then() 是一个高阶函数，它以两个回调函数作为参数，用 handlers 指代这些回调函数  (callbacks)，当Promise被解决之后，对应的 handler 就会被调用

onFulfilled 成功时的回调函数

onRejected 失败时的回调函数

我们可以在调用 .then()  的时候传入一个或两个hendler，或者不传入 handler

如果没有合适的回调函数，.then() 会返回一个Promise对象

下面是 .then() 的一个例子

const prom = new Promise((resolve, reject) => {
  resolve('Yay!');
});

const handleSuccess = (resolvedValue) => {
  console.log(resolvedValue);
};

prom.then(handleSuccess); // Prints: 'Yay!'

prom 是一个Promise 对象 并且 resolved value 是 'Yay!'

handleSuccess() 会打印出传入的参数值

调用 prom 的 .then() 方法，传入函数 handleSuccess()

因为 prom 直接进入 resolve 状态，handleSuccess() 被调用，'Yay!' 被输出到控制台。

但是通常在使用 Promise 时，我们不知道这个对象最终是 resolve 还是 reject，所以需要添加一些逻辑判断：

let prom = new Promise((resolve, reject) => {
  let num = Math.random();
  if (num < .5 ){
    resolve('Yay!');
  } else {
    reject('Ohhh noooo!');
  }
});

const handleSuccess = (resolvedValue) => {
  console.log(resolvedValue);
};

const handleFailure = (rejectionReason) => {
  console.log(rejectionReason);
};

prom.then(handleSuccess, handleFailure);

prom 会根据一个随机数决定最终的状态。

给 .then() 传入两个函数参数， 第一个是 resolve 状态的回调，第二个是 reject 状态的回调。

separation of concerns

如果没有合适的回调函数，.then() 会返回一个 Promise 对象，这种实现可以让我们把 resolve 的处理逻辑和 reject 状态的处理逻辑分开。我们不必同时传入两个回调函数，而是通过链式调用。

prom
  .then((resolvedValue) => {
    console.log(resolvedValue);
  })
  .then(null, (rejectionReason) => {
    console.log(rejectionReason);
  });

我们可以使用 .catch() 使代码更易读

.catch() 只有一个参数，onRejected() ，使用 .catch() 和使用 只传入失败回调的 .then() 是同样的效果

prom
  .then((resolvedValue) => {
    console.log(resolvedValue);
  })
  .catch((rejectionReason) => {
    console.log(rejectionReason);
  });

composition

promise调用链

firstPromiseFunction()
.then((firstResolveVal) => {
  return secondPromiseFunction(firstResolveVal);
})
.then((secondResolveVal) => {
  console.log(secondResolveVal);
});

调用 firstPromiseFunction() 得到一个 Promise 对象

调用 .then()  传入一个匿名函数作为成功时的调用

在回调函数中返回一个 secondPromiseFunction() ，参数为第一个 Promise 的 resolved value，这保证了第一个 .then() 的返回值是第二个 promise 对象而不是默认值（有着相同 settled value 的 一个新的promise 对象）

然后第二次调用 .then() ，传入一个回调函数，将第二个 promise 对象的 resolved value 打印出来

concurrency, multiple asynchronous operations happening together

多个异步操作同时进行

Promise.all() accepts an array of promises as its argument and returns a single promise. That single promise will settle in one of two ways:

Promise.all() 接收一个 Promise 数组作为参数，返回一个 promise 对象：

如果参数中的每个 promise 最终都是 resolved 状态，返回的 promise 对象也会是resolve 状态，并且 resolved value 是每个 promise 对象的 resolved value 组成的数组

如果参数中任何一个 promise 是 rejected 状态， 返回的 promise 对象也会立刻变成 rejected 状态，并且 reject reason 就是那个失败的 promise 的 reject reason （failing fast 快速失败原则）

let myPromises = Promise.all([returnsPromOne(), returnsPromTwo(), returnsPromThree()]);

myPromises
  .then((arrayOfValues) => {
    console.log(arrayOfValues);
  })
  .catch((rejectionReason) => {
    console.log(rejectionReason);
  });

声明一个变量，赋值为 调用Promise.all() 的返回值，参数是三个 promise 对象，分别是三个函数的返回值。

调用 .then() 函数处理成功回调，打印 resolved value 数组

调用 .catch() 函数处理失败回调，打印 rejection message