Promise 学习笔记

项目中频频用到 Promise,每次都只是在代码找之前别人是怎么用的,然后仿照别人的用法,出了 bug 也不知道是什么原因,遂有此学习笔记。

为什么会有 Promise

众所周知,JavaScript 是单线程,当遇到异步问题时,传统的解决方案是使用回调函数和事件,此时当我们需要发一个异步的请求时,会产生回调函数的嵌套,影响代码的可读性

而 Promise 使用链式调用,完美的解决了这个问题,使代码更加直观。

什么是 Promise

Promise 在英语中语义为:“承诺”,它表示如 A 调用一个长时间任务 B 的时候,B 将返回一个 “承诺” 给 A,A 不关心整个实施的过程,继续做自己的任务;当 B 实施完成的时候,会通知 A,并将执行 A 之间的预先约定的回调。

Promise 解决的问题是一种带有延迟的事件,这个事件会被延迟到未来某个合适点在执行。

基本概念

  • Promise 只有三种基本状态,未完成、完成(fulfilled)和失败(rejected)
  • Promise 的状态可以由未完成转换成完成,或者未完成转换成失败
  • Promise 的状态转换只发生一次

基本用法

ES6 规定,Promise 对象是一个构造函数,用来生成 Promise 实例。

例:创造一个 Promise 实例

const promise = new Promise( (resolve, reject) => {
    // do something
    if (/* 异步操作成功 */) {
      resolve(value);
     } else {
      reject(error);
    }
  }
);

参数
executor 是一个带有 resolve 和 reject 两个参数的函数。executor 函数在 Promise 构造函数执行时同步执行,被传递 resolve 和 reject 函数(executor 函数在 Promise 构造函数返回新创建的对象前被调用)。resolve 和 reject 函数被调用时,分别将 Promise 的状态改为 fulfilled(完成)或 rejected(失败)。

一个 Promise 有以下几种状态:

  • pending:初始状态,不是成功或失败状态
  • fulfilled:操作成功
  • rejected:操作失败

常用方法

  • then
    最多需要两个参数:Promise 的成功和失败情况的回调函数
promise.then(onFulfilled, onRejected);
  • catch
    返回一个 Promise,只处理拒绝的情况。用于 Promise 组合中的错误处理
promise.catch(onRejected);

由于 then 和 catch 方法返回 promise 对象,所以可以被链式调用。如下图:

image.png

推荐阅读更多精彩内容