Promise

目录

• Promise 及其应用
  • promise 与异步编程的关系
  • promise 的作用与用法
  • 静态方法
  • 实例方法
  • 实际环境应用
  • Promise 总结
  • async 函数
  • await
  • 参考

Promise 及其应用

promise 与异步编程的关系

• promise 是异步编程的一种解决方案，可以将异步对象和回调函数脱离开来，通过 then 方法在这个异步操作上面绑定回调函数。

• 一个 Promise 有以下三个状态

  • pending：操作正在进行
  • fulfilled：操作成功
  • rejected：操作失败

• 语法

  var promise=new Promise((resolve,reject)=>{
  //....一些异步操作
  	if(/*异步操作成功*/){
  		resolve(value);
  	}else{
  		reject(error);
  	}
  });
  promise.then((value)=>{
  	//fulfilled
  },(errror)=>{
  	//rejected
  })
  //一般rejected状态使用catch方法来抛出错误，而不在then方法中。
  /*.catch((error)=>{
  console.log(error);
  })*/
  

promise 的作用与用法

• 简单使用

  function timeout(ms) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, "done");
    });
  }
  
  timeout(2000).then((value) => {
    console.log(value); //done
  });
  

  2000 过后，pending->fulfilled,调用 then 方法,'done'作为 resolve 返回值传递给 then，即 value。

• 注意点

  1. Promise 对象在创建后立即执行，then 方法指定的回调函数，将在当前脚本所有的同步任务执行完后才会执行。

     let promise = new Promise((resolve, reject) => {
       console.log("Promise1");
       resolve();
       console.log("Promise2");
     });
     
     promise.then(() => {
       console.log("resolved.");
     });
     
     console.log("Hi!");
     
     // Promise1
     // Promise2
     // Hi!
     // resolved
     

静态方法

iterable:可迭代对象

• Promise.all(iterable)
  这个方法返回一个新的 promise 对象，等到所有的 promise 对象都成功或有任意一个 promise 失败。

  如果所有的 promise 都成功了，它会把一个包含 iterable 里所有 promise 返回值的数组作为成功回调的返回值。顺序跟 iterable 的顺序保持一致。

  一旦有任意一个 iterable 里面的 promise 对象失败则立即以该 promise 对象失败的理由来拒绝这个新的 promise。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

• Promise.allSettled(iterable)

  等到所有 promise 都已敲定（每个 promise 都已兑现或已拒绝）。

  返回一个 promise，该 promise 在所有 promise 都敲定后完成，并兑现一个对象数组，其中的对象对应每个 promise 的结果。

  const promise1 = Promise.resolve(3);
  const promise2 = new Promise((resolve, reject) =>
    setTimeout(reject, 100, "foo")
  );
  const promises = [promise1, promise2];
  
  Promise.allSettled(promises).then((results) =>
    results.forEach((result) => console.log(result.status))
  );
  
  // Expected output:
  // "fulfilled"
  // "rejected"
  

• Promise.any(iterable)

  接收一个 promise 对象的集合，当其中的任意一个 promise 成功，就返回那个成功的 promise 的值。

  const pErr = new Promise((resolve, reject) => {
    reject("总是失败");
  });
  
  const pSlow = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, "最终完成");
  });
  
  const pFast = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, "很快完成");
  });
  
  Promise.any([pErr, pSlow, pFast]).then((value) => {
    console.log(value);
    // pFast fulfils first
  });
  // 期望输出："很快完成"
  

• Promise.race(iterable)

  等到任意一个 promise 的状态变为已敲定。

  当 iterable 参数里的任意一个子 promise 成功或失败后，父 promise 马上也会用子 promise 的成功返回值或失败详情作为参数调用父 promise 绑定的相应处理函数，并返回该 promise 对象。

  const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, "one");
  });
  
  const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, "two");
  });
  
  Promise.race([promise1, promise2]).then((value) => {
    console.log(value);
    // Both resolve, but promise2 is faster
  });
  // Expected output: "two"
  

• Promise.reject(reason)
  返回一个状态为已拒绝的 Promise 对象，并将给定的失败信息传递给对应的处理函数。

function resolved(result) {
  console.log("Resolved");
}

function rejected(result) {
  console.error(result);
}

Promise.reject(new Error("fail")).then(resolved, rejected);
// Expected output: Error: fail

• Promise.resolve(iterable)
  返回一个状态由给定 value 决定的 Promise 对象。如果该值是 thenable（即，带有 then 方法的对象），返回的 Promise 对象的最终状态由 then 方法执行结果决定；否则，返回的 Promise 对象状态为已兑现，并且将该 value 传递给对应的 then 方法。

通常而言，如果你不知道一个值是否是 promise 对象，使用 Promise.resolve(value) 来返回一个 Promise 对象，这样就能将该 value 以 promise 对象形式使用。

const promise1 = Promise.resolve(123);

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

实例方法

• Promise.prototype.catch()

  为 promise 添加一个被拒绝状态的回调函数，并返回一个新的 promise，若回调函数被调用，则兑现其返回值，否则兑现原来的 promise 兑现的值。

  const promise1 = new Promise((resolve, reject) => {
    throw new Error("Uh-oh!");
  });
  
  promise1.catch((error) => {
    console.error(error);
  });
  // Expected output: Error: Uh-oh!
  

• Promise.prototype.then()

  为 promise 添加被兑现和被拒绝状态的回调函数，其以回调函数的返回值兑现 promise。若不处理已兑现或者已拒绝状态（例如，onFulfilled 或 onRejected 不是一个函数），则返回 promise 被敲定时的值。

  const promise1 = new Promise((resolve, reject) => {
    resolve("Success!");
  });
  
  promise1.then((value) => {
    console.log(value);
    // Expected output: "Success!"
  });
  

• Promise.prototype.finally()

  为 promise 添加一个回调函数，并返回一个新的 promise。这个新的 promise 将在原 promise 被兑现时兑现。而传入的回调函数将在原 promise 被敲定（无论被兑现还是被拒绝）时被调用。

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

实际环境应用

示例：
本例展示了 Promise 的一些机制。testPromise() 方法在每次点击 按钮时被调用，该方法会创建一个 promise 对象，使用 setTimeout() 让 Promise 等待 1-3 秒不等的时间来兑现计数结果（从 1 开始的数字）。使用 Promise 构造函数来创建 promise。

promise 的值的兑现过程都被日志记录（logged，使用 p1.then()）下来。这些日志信息展示了方法中的同步代码和异步代码是如何通过 promise 完成解耦的。

通过在短时间内多次点击按钮，你可以看到不同的 promise 被一个接一个地兑现。

HTML

<button id="make-promise">Make a promise!</button>
<div id="log"></div>

JavaScript

"use strict";
let promiseCount = 0;

function testPromise() {
  let thisPromiseCount = ++promiseCount;
  let log = document.getElementById("log");
  // begin
  log.insertAdjacentHTML("beforeend", thisPromiseCount + ") Started<br>");
  // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s)
  let p1 = new Promise((resolve, reject) => {
    // The executor function is called with the ability to resolve or reject the promise
    log.insertAdjacentHTML(
      "beforeend",
      thisPromiseCount + ") Promise constructor<br>"
    );
    // This is only an example to create asynchronism
    window.setTimeout(function () {
      // We fulfill the promise !
      resolve(thisPromiseCount);
    }, Math.random() * 2000 + 1000);
  });

  // We define what to do when the promise is resolved with the then() call,
  // and what to do when the promise is rejected with the catch() call
  p1.then(function (val) {
    // Log the fulfillment value
    log.insertAdjacentHTML("beforeend", val + ") Promise fulfilled<br>");
  }).catch((reason) => {
    // Log the rejection reason
    console.log(`Handle rejected promise (${reason}) here.`);
  });
  // end
  log.insertAdjacentHTML("beforeend", thisPromiseCount + ") Promise made<br>");
}

if ("Promise" in window) {
  let btn = document.getElementById("make-promise");
  btn.addEventListener("click", testPromise);
} else {
  log = document.getElementById("log");
  log.textContent =
    "Live example not available as your browser doesn't support the <code>Promise<code> interface.";
}

Promise 总结

1. then()方法、catch()方法是Promise()对象的原型方法，被Promise对象调用，返回值是一个Promise对象。

2. all()、race()、reject()、resolve()方法是Promise类的静态方法，被Promise类调用，返回值也是一个Promise对象。

3. 使用new Promise((resolve, reject)=>{});的方式创建Promise对象时，如果构造函数中传递的不是function类型，则会报错。

async 函数

async 函数是使用 async 关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();

//calling
//resolved

await

await 操作符用于等待一个 Promise 兑现并获取它兑现之后的值。它只能在异步函数或者模块顶层中使用。

参考

Promise - JavaScript | MDN (mozilla.org)

await - JavaScript | MDN (mozilla.org)

async 函数 - JavaScript | MDN (mozilla.org)