项目中频频用到 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 对象,所以可以被链式调用。如下图: