Promise是JavaScript异步编程中的重要概念，也是各种面试必考的知识点，今天和大家一起总结下Promise的前世今生，本文篇幅比较长，希望大家耐心阅读。

一、同步与异步

我们都知道JavaScript的执行环境是单线程。和Java不同的是，JS中的单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，即就是一次只能完成一项任务，这个任务执行完后才能执行下一个，这期间它会阻塞其他任务。这个任务我们可称为主线程，所谓主线程并不是唯一的线程，还有其他线程，比如事件触发线程、ajax请求线程等等。

1、同步

同步即单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，返回执行的结果，才能进行下一个任务。如果这个任务执行的时间较长，那么就会导致线程阻塞。

var x = true;
while(x);
console.log("don't carry out");    //不会执行

上述例子中while是一个死循环，它会阻塞进程，因此第三句console不会执行。
同步比较简单，也较容易编写。但问题也显而易见，如果请求的时间较长，而阻塞了后面代码的执行，体验是很不好的。因此对于一些耗时的操作，异步则是更好的选择。

2、异步

异步与同步相反，可以一起执行多个任务，函数调用后不会立即返回执行的结果，如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。

setTimeout(function() {
    console.log('taskA, asynchronous');
}, 0);
console.log('taskB, synchronize');
//while(true);

-------输出-------
taskB, synchronize
taskA, asynchronous

异步最常用的场景就是定时器，上述例子里定时器延时的时间虽然为0，但taskA还是晚于taskB执行。这是为什么呢？由于定时器是异步的，异步任务会在当前脚本的所有同步任务执行完才会执行。如果同步代码中含有死循环，即将上例的注释去掉，那么这个异步任务就不会执行，因为同步任务阻塞了进程。

3、回调函数

回调函数和异步的关系是密切的，前面的setTimeout里的function便是回调函数。回调函数可以理解为是一段可执行的代码段，它以参数的形式传递给其他代码，在其合适的时间执行这段代码。异步和同步的场景也可以使用回调函数。在同步调用下，回调函数一般是最后执行的。而异步调用下，可能一段时间后执行或不执行（未达到执行的条件）。

二、Promise产生的背景

前面介绍这么多主要是为了引出今天的主题Promise，Promise是ES6中新增的一种异步编程的方式，用于解决回调的方式的各种问题，提供了更多的可能性。那么回调有什么问题呢？

相信大家都听过Node中著名的回调地狱（callback hell)。因为Node中的操作默认都是异步执行的，所以需要调用者传入一个回调函数以便在操作结束时进行相应的处理。当回调的层次变多，代码就变得越来越难以编写、理解和阅读。话不多说，直接上图

老话说的好，世上本没有回调，写得人多了，便多了}}}}}}}}}}}}}}}。

因为回调函数是必须得依赖另一个函数执行调用,它是异步执行的,也就是需要时间等待，当许多功能需要连续调用，环环相扣，相互依赖，它就类似上面的代码，代码全部一层一层的嵌套，看起来就很庞大，很恶心，这就是回调地狱。

三、Promise概述

下面接着介绍Promise，Promise是什么呢？

我们来看看MDN对Promise的定义

The Promise object is used for asynchronous computations. 
A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.
Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

Promise，中文意思是承诺，承诺它过一段时间会给你一个结果。Promise对象代表一个未完成、但预计将来会完成的操作，可以表示一个计算结果或网络请求的占位符。由于当前计算或网络请求尚未完成，所以结果暂时无法取得。

Promise对象一共有3中状态，pending，fullfilled（又称为resolved）和rejected：

pending——初始值，不是fulfilled，也不是rejected，任务仍在进行中。
resolved——任务已完成，代表操作成功。
reject——任务出错，代表操作失败。

Promise对象初始时处于pending状态，其生命周期内只可能发生以下一种状态转换：

任务完成，状态由pending转换为resolved。
任务出错返回，状态由pending转换为rejected。

Promise对象的状态转换一旦发生，就不可再次更改，会一直保持这个状态，不会再发生变化。当状态发生变化后，promise.then绑定的函数就会被调用。

Promise一旦新建就会“立即执行”，无法取消，这也是它的缺点之一。

Promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
Promise可以支持多个并发的请求，获取并发请求中的数据
这个Promise可以解决异步的问题，不能说Promise是异步的

四、Promise的用法

1、创建Promise

//创建Promise
var promise = new Promise(function (resolve, reject) {
    if (/* 异步操作成功 */) {
        resolve(data);
    } else {
        /* 异步操作失败 */
        reject(error);
    }
});

我们使用new来构建一个Promise。Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」，由JavaScript引擎提供。

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

注意这里有个细节：前面只是new了一个对象，并没有调用它，但是我们传进去的函数就已经执行了。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数。

2、.then()

Promise.prototype.then(onFulfilled, onRejected)

then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。（也就是说then方法中接受两个回调，一个成功的回调函数，一个失败的回调函数，并且能在回调函数中拿到成功的数据和失败的原因）。对Promise添加onFulfilled和onRejected回调，并返回的是一个新的Promise实例（不是原来那个Promise实例），且返回值将作为参数传入这个新Promise的resolve函数。

3、Promise和then

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数。

promise.then(onFulfilled, onRejected);

promise.then(function(data) {
  //成功时的操作
}, function(error) {
  // 失败时的操作
});

then方法会返回一个Promise。它有两个参数，分别为Promise从pending变为fulfilled和rejected时的回调函数（第二个参数非必选）。这两个函数都接受Promise对象传出的值作为参数。
简单来说，then就是定义resolve和reject函数的，其resolve参数相当于：

function resolveFun(data) {
    //data为promise传出的值
}

而新建Promise中的'resolve(data)'，则相当于执行resolveFun函数。
Promise新建后就会立即执行。而then方法中指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

var promise = new Promise(function(resolve, reject) {
  console.log('before resolved');
  resolve();
  console.log('after resolved');
});

promise.then(function() {
  console.log('resolved');
});

console.log('outer');

-------output-------
before resolved
after resolved
outer
resolved

由于resolve指定的是异步操作成功后的回调函数，它需要等所有同步代码执行后才会执行，因此最后打印'resolved'

4、.catch()

Promise.prototype.catch(onRejected)

该方法是.then(undefined, onRejected)的别名，用于指定发生错误时的回调函数。catch是与then方法并行的一个方法，与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的

promise.then(function(data) {
    console.log('success');
}).catch(function(error) {
    console.log('error', error);
});

/*******等同于*******/
promise.then(function(data) {
    console.log('success');
}).then(undefined, function(error) {
    console.log('error', error);
});

var promise = new Promise(function (resolve, reject) {
    throw new Error('test');
});
/*******等同于*******/
var promise = new Promise(function (resolve, reject) {
    reject(new Error('test'));
});

//用catch捕获
promise.catch(function (error) {
    console.log(error);
});
-------output-------
Error: test

上面reject方法的作用，等同于抛错。

promise对象的错误，会一直向后传递，直到被捕获。即错误总会被下一个catch所捕获。then方法指定的回调函数，若抛出错误，也会被下一个catch捕获。catch中也能抛错，则需要后面的catch来捕获。

sendRequest('test.html').then(function(data1) {
    //do something
}).then(function (data2) {
    //do something
}).catch(function (error) {
    //处理前面三个Promise产生的错误
});

promise状态一旦改变就会凝固，不会再改变。因此promise一旦fulfilled了，再抛错，也不会变为rejected，就不会被catch了。

var promise = new Promise(function(resolve, reject) {
  resolve();
  throw 'error';
});

promise.catch(function(e) {
   console.log(e);      //This is never called
});

如果没有使用catch方法指定处理错误的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应（Chrome会抛错），这是Promise的另一个缺点。

var promise = new Promise(function (resolve, reject) {
    resolve(x);
});
promise.then(function (data) {
    console.log(data);
});

5、.all()

Promise.all(iterable)

该方法用于将多个Promise实例，包装成一个新的Promise实例。该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 3000, "first");
});
var p2 = new Promise(function (resolve, reject) {
    resolve('second');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "third");
}); 

Promise.all([p1, p2, p3]).then(function(values) { 
  console.log(values); 
});

-------output-------
//约 3s 后
["first", "second", "third"]

Promise.all方法接受一个数组（或具有Iterator接口）作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定。

当p1, p2, p3状态都变为fulfilled，p的状态才会变为fulfilled，并将三个promise返回的结果，按参数的顺序（而不是 resolved的顺序）存入数组，传给p的回调函数，如例3.8。
当p1, p2, p3其中之一状态变为rejected，p的状态也会变为rejected，并把第一个被reject的promise的返回值，传给p的回调函数

var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, "one"); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(reject, 2000, "two"); 
});
var p3 = new Promise((resolve, reject) => {
  reject("three");
});

Promise.all([p1, p2, p3]).then(function (value) {
    console.log('resolve', value);
}, function (error) {
    console.log('reject', error);    // => reject three
});

-------output-------
reject three

这多个 promise 是同时开始、并行执行的，而不是顺序执行。

6、.race()

Promise.race(iterable)
var p = Promise.race([p1, p2, p3]);

all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调。

该方法同样是将多个Promise实例，包装成一个新的Promise实例。

Promise.race方法同样接受一个数组（或具有Iterator接口）作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数。

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

Promise.race([p1, p2]).then(function(value) {
    console.log('resolve', value); 
}, function(error) {
    //not called
    console.log('reject', error); 
});
-------output-------
resolve two

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

Promise.race([p3, p4]).then(function(value) {
    //not called
    console.log('resolve', value);              
}, function(error) {
    console.log('reject', error); 
});
-------output-------
reject four

在第一个promise对象变为resolve后，并不会取消其他promise对象的执行

var fastPromise = new Promise(function (resolve) {
    setTimeout(function () {
        console.log('fastPromise');
        resolve('resolve fastPromise');
    }, 100);
});
var slowPromise = new Promise(function (resolve) {
    setTimeout(function () {
        console.log('slowPromise');
        resolve('resolve slowPromise');
    }, 1000);
});
// 第一个promise变为resolve后程序停止
Promise.race([fastPromise, slowPromise]).then(function (value) {
    console.log(value);    // => resolve fastPromise
});
-------output-------
fastPromise
resolve fastPromise
slowPromise     //仍会执行

7、.resolve()

Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

它可以看做new Promise()的快捷方式。

Promise.resolve('Success');

/*******等同于*******/
new Promise(function (resolve) {
    resolve('Success');
});

这段代码会让这个Promise对象立即进入resolved状态，并将结果success传递给then指定的onFulfilled回调函数。由于Promise.resolve()也是返回Promise对象，因此可以用.then()处理其返回值。

8、.reject()

Promise.reject(reason)

该方法和Promise.resolve()类似，也是new Promise()的快捷方式。

Promise.reject(new Error('error'));

/*******等同于*******/
new Promise(function (resolve, reject) {
    reject(new Error('error'));
});

这段代码会让这个Promise对象立即进入rejected状态，并将错误对象传递给then指定的onRejected回调函数。

五、Promise常见问题

1、reject 和 catch 的区别

promise.then(onFulfilled, onRejected)
在onFulfilled中发生异常的话，在onRejected中是捕获不到这个异常的。
promise.then(onFulfilled).catch(onRejected)
.then中产生的异常能在

一般情况，还是建议使用第二种，因为能捕获之前的所有异常。当然了，第二种的.catch()也可以使用.then()表示，它们本质上是没有区别的，.catch === .then(null, onRejected).catch中捕获

2、如果在then中抛错，而没有对错误进行处理（即catch），那么会一直保持reject状态，直到catch了错误

function taskA() {
    console.log(x);
    console.log("Task A");
}
function taskB() {
    console.log("Task B");
}
function onRejected(error) {
    console.log("Catch Error: A or B", error);
}
function finalTask() {
    console.log("Final Task");
}
var promise = Promise.resolve();
promise
    .then(taskA)
    .then(taskB)
    .catch(onRejected)
    .then(finalTask);
    
-------output-------
Catch Error: A or B,ReferenceError: x is not defined
Final Task

3、每次调用then都会返回一个新创建的promise对象，而then内部只是返回的数据

//方法1：对同一个promise对象同时调用 then 方法
var p1 = new Promise(function (resolve) {
    resolve(100);
});
p1.then(function (value) {
    return value * 2;
});
p1.then(function (value) {
    return value * 2;
});
p1.then(function (value) {
    console.log("finally: " + value);
});
-------output-------
finally: 100

//方法2：对 then 进行 promise chain 方式进行调用
var p2 = new Promise(function (resolve) {
    resolve(100);
});
p2.then(function (value) {
    return value * 2;
}).then(function (value) {
    return value * 2;
}).then(function (value) {
    console.log("finally: " + value);
});
-------output-------
finally: 400

第一种方法中，then的调用几乎是同时开始执行的，且传给每个then的value都是100，这种方法应当避免。方法二才是正确的链式调用。

4、在异步回调中抛错，不会被catch到

// Errors thrown inside asynchronous functions will act like uncaught errors
var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    throw 'Uncaught Exception!';
  }, 1000);
});

promise.catch(function(e) {
  console.log(e);       //This is never called
});

5、promise状态变为resove或reject，就凝固了，不会再改变

console.log(1);
new Promise(function (resolve, reject){
    reject();
    setTimeout(function (){
        resolve();            //not called
    }, 0);
}).then(function(){
    console.log(2);
}, function(){
    console.log(3);
});
console.log(4);

-------output-------
1
4
3

六、最后的总结

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

1、Promise对象的特点：

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

2、创建Promise的流程：

使用new Promise(fn)或者它的快捷方式Promise.resolve()、Promise.reject()，返回一个promise对象
在fn中指定异步的处理
处理结果正常，调用resolve
处理结果错误，调用reject

3、Promise的使用总结：

创建一个promise的关键在于确定resolve的执行时机
then方法总是返回一个新的promise
使用这种写法promise.then(successFn).catch(errorFn),而不是promise.then(successFn,errorFn)
Promise.reslove()可以创造一个立即resolve的promise，结合reduce方法可使代码更加精炼
async函数基于Promise，可解决串行链式调用过长的问题，并且语义清楚，推荐使用
Promise.all方法有风险，尽量不用

4、超时和可取消的Promise：

// 可取消的Promise（本质上并没有取消请求，只是不用promise的返回值而已）
export default function makeCancelable(promise){
    let hasCanceled_ = false;
    const wrappedPromise = new Promise((resolve, reject) => {
        promise.then((val) =>
            hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
        );
        promise.catch((error) =>
            hasCanceled_ ? reject({isCanceled: true}) : reject(error)
        );
    });
    return {
        promise: wrappedPromise,
        cancel() {
            hasCanceled_ = true;
        },
    };
}

// 超时的Promise
export const makeTimeoutPromise = ({ timeout = 300000, callback,promise }) => {
  // 默认5分钟超时
  let hasTimeout = false;
  let timer = setTimeout(() => {
    hasTimeout = true;
  }, timeout);
  const wrappedPromise = new Promise((resolve, reject) => {
        promise.then((val) =>
            hasTimeout ? reject({hasTimeout: true}) : resolve(val)
        ).catch((error) =>
            hasTimeout ? reject({hasTimeout: true}) : reject(error)
        ).finally(()=>timer && clearTimeout(timer))
  }
  return wrappedPromise;
};

文章内容很长，感谢您的耐心阅读，希望对你理解和使用Promise有所帮助。

万字长文帮你彻底搞懂JS中的Promise

一、同步与异步

二、Promise产生的背景

三、Promise概述

四、Promise的用法

五、Promise常见问题

六、最后的总结

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

【验证码逆向专栏】vaptcha 手势验证码逆向分析

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

python使用fitz模块提取pdf中的图片

万字长文帮你彻底搞懂JS中的Promise

一、同步与异步

二、Promise产生的背景

三、Promise概述

四、Promise的用法

五、Promise常见问题

六、最后的总结

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

【验证码逆向专栏】vaptcha 手势验证码逆向分析

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

python使用fitz模块提取pdf中的图片

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄