前言

面试时经常会被问道：你了解Promise吗？

遇到这个问题时，你说我不知道吧，我知道一点，但是你让我说的很清楚吧，我好像又说不太明白。 这就导致了我们在面试的过程中，常常回答的一知半解，不够有深度有逻辑的原因。那么下面就通过这篇文章让大家搞搞清楚。

事情起因

在进入正题之前，我们要搞清楚，是什么原因导致我们需要使用promise的呢，为什么需要使用Promise，他到底解决的是什么问题？

同步操作

我们都知道，前端的JS代码是在JS引擎线程中被执行的。并且JS引擎线程是单线程的。也就是说他做了这件事儿的时候就不能同时去做另一件事儿。那往往在代码的执行过程中，有一些动作是‘占着茅坑不拉屎’的。比如：Ajax。

举个例子： 现在我们要向服务端发起一个请求，拿到新的数据去刷新页面内容。

具体运行流程是：前端向服务端发送Ajax请求，等待数据返回，拿到新数据之后刷新页面。

这个过程中对于JS线程来说，他要做的事情就是发送请求，然后等待请求的响应，那么在等待的这个过程中，他是没有办法去做其他事情的，这就会造成JS线程被浪费。具体的体现可能就是页面卡顿或者空白。【JS线程的执行和GUI渲染线程的执行他俩是互斥的，这个不做细讲。】

把上面的例子映射到我们的生活中，可以理解为一对情侣要在女生逛完街之后去吃饭。

JS引擎是个男生，请求是个女生，把发送请求的这个动作理解为女生逛街。女生在逛街的时候男生要做的事情只能是等，那这个时间对于男生来说是完全空白的，浪费掉了。那他能不能去做其它的事情呢，理论上可以，感情上不行。做了女生就要生气。这就是同步操作，做完一个事儿，才能再去做另一个事儿，时间浪费的不讲道理。

异步操作

简单的理解异步就是把等待请求响应的这段时间，交还给JS主线程 ，让他去做别的事情，等响应回来之后再继续执行它的后续操作，也就是可以让男生在女生逛街的这段时间去打两把游戏，等她逛完街再去吃饭。这才是一个对你对我对大家都好的做法。

那么JS是怎么实现这个异步操作的呢？主要有以下四种方法：

1. 回调函数
2. Promise
3. Generator
4. async/await

回调函数

PS：顾名思义，回调函数就是指【回头再次调用的函数】

把请求和响应这两个动作分开，把响应的动作单独放到一个函数中。等重新执行时这个任务的时候，再调用这个函数。

fs.readFile('/etc/fstab', function (err, data) {
  if (err) throw err;
  console.log(data);
  fs.readFile('/etc/shells', function (err, data) {
    if (err) throw err;
    console.log(data);
  });
});

这种写法看起来并没有什么问题，但是当处理多层异步操作，我们往往会像下面那样编写我们的代码。

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('得到最终结果: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

是不是很难受，上述形成了经典的回调地狱

Promise

首先promise相当于是给调用者一个承诺，等会把数据返回时，就可以创建一个promise对象。

当我们在new Promise的时候，我们会传入一个立即执行的函数。这个函数接收两个参数，一个是resolve，一个是reject，当执行resolve函数时，会回调promise.then的函数，reject会回调promise.catch函数。

其中在resolve调用.then函数时，也可以传入两个回调，一个成功，一个失败，并且then方法返回的是一个新的。

我们用Promise改写一下上面的代码

doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('得到最终结果: ' + finalResult);
})
.catch(failureCallback);

瞬间感受到promise解决异步操作的优点：

• 链式操作减低了编码难度
• 代码可读性明显增强

下面我们正式来认识promise：

1、状态

promise对象仅有三种状态

• pending（进行中）
• fulfilled（已成功）
• rejected（已失败）

特点

• 对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪一种状态
• 一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时候都可以得到这个结果

2、流程

认真阅读下图，我们能够轻松了解promise整个流程

3、Promise实例的方法

1. then()
2. catch()
3. finally()

then()

then是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数

then方法返回的是一个新的Promise实例，也就是promise能链式书写的原因

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

catch

catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
}); 

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

一般来说，使用catch方法代替then()第二个参数

Promise对象抛出的错误不会传递到外层代码，即不会有任何反应

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};
浏览器运行到这一行，会打印出错误提示ReferenceError: x is not defined，但是不会退出进程
catch()方法之中，还能再抛出错误，通过后面catch方法捕获到

finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

4、Promise构造函数方法

Promise构造函数存在以下方法：

• all()
• race()
• allSettled()
• resolve()
• reject()
• try()

all()

Promise.all()方法用于将多个 Promise实例，包装成一个新的 Promise实例

const p = Promise.all([p1, p2, p3]);

接受一个数组（迭代对象）作为参数，数组成员都应为Promise实例

实例p的状态由p1、p2、p3决定，分为两种：

• 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
• 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数 注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

如果p2没有自己的catch方法，就会调用Promise.all()的catch方法

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了

race()

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

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

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。 率先改变的 Promise 实例的返回值则传递给p的回调函数

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

allSettled()

Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例

只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();

resolve()

将现有对象转为 Promise对象

Promise.resolve('foo') 
// 等价于 
new Promise(resolve => resolve('foo'))

参数可以分成四种情况，分别如下：

• 参数是一个 Promise 实例，promise.resolve将不做任何修改、原封不动地返回这个实例
• 参数是一个thenable对象，promise.resolve会将这个对象转为 Promise对象，然后就立即执行thenable对象的then()方法
• 参数不是具有then()方法的对象，或根本就不是对象，Promise.resolve()会返回一个新的 Promise 对象，状态为resolved
• 没有参数时，直接返回一个resolved状态的 Promise 对象

reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

Promise.reject()方法的参数，会原封不动地变成后续方法的参数

Promise.reject('出错了') .catch(e => { console.log(e === '出错了') }) // true

Generator

介绍 Generator

Generator 函数是 ES6 提供的一种异步编程的解决方案，语法行为与传统函数完全不同。

执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator函数是一个普通函数，但是有两个特征：

• function关键字与函数名之间有一个星号
• 函数体内部使用yield表达式，定义不同的内部状态

function* helloWorldGenerator() { 
    yield 'hello'; 
    yield 'world'; 
    return 'ending'; 
}

使用 Generator

Generator 函数会返回一个遍历器对象，即具有Symbol.iterator属性，并且返回给自己

function* gen(){ 
    // some code 
} 
var g = gen(); 
g[Symbol.iterator]() === g // true

通过yield关键字可以暂停generator函数返回的遍历器对象的状态

function* helloWorldGenerator() { 
    yield 'hello';
    yield 'world'; 
    return 'ending';
} 
var hw = helloWorldGenerator();

上述存在三个状态：hello、world、return

通过next方法才会遍历到下一个内部状态，其运行逻辑如下：

• 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
• 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式
• 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
• 如果该函数没有return语句，则返回的对象的value属性值为undefined

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true } 

done用来判断是否存在下个状态，value对应状态值

yield表达式本身没有返回值，或者说总是返回undefined

通过调用next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true } 

异步解决方案

回顾之前展开异步解决的方案：

• 回调函数
• Promise 对象
• generator 函数
• async/await

这里通过文件读取案例，将几种解决异步的方案进行一个比较：

回调函数

所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，再调用这个函数

fs.readFile('/etc/fstab', function (err, data) {
  if (err) throw err;
  console.log(data);
  fs.readFile('/etc/shells', function (err, data) {
    if (err) throw err;
    console.log(data);
  });
}); 

readFile函数的第三个参数，就是回调函数，等到操作系统返回了/etc/passwd这个文件以后，回调函数才会执行

Promise

Promise就是为了解决回调地狱而产生的，将回调函数的嵌套，改成链式调用

const fs = require('fs');
const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};
readFile('/etc/fstab').then(data =>{
    console.log(data)
    return readFile('/etc/shells')
}).then(data => {
    console.log(data)
}) 

这种链式操作形式，使异步任务的两段执行更清楚了，但是也存在了很明显的问题，代码变得冗杂了，语义化并不强

generator

yield表达式可以暂停函数执行，next方法用于恢复函数执行，这使得Generator函数非常适合将异步任务同步化

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
}; 

async/await

将上面Generator函数改成async/await形式，更为简洁，语义化更强了

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
}; 

Promise、Generator、async/await的区别：

通过上述代码进行分析，将promise、Generator、async/await进行比较：

• promise和async/await是专门用于处理异步操作的
• Generator并不是为异步而设计出来的，它还有其他功能（对象迭代、控制输出、部署Interator接口…）
• promise编写代码相比Generator、async更为复杂化，且可读性也稍差
• Generator、async需要与promise对象搭配处理异步情况
• async实质是Generator的语法糖，相当于会自动执行Generator函数
• async使用上更为简洁，将异步代码以同步的形式进行编写，是处理异步编程的最终方案

参考文献：ES6- Promise及它的使用场景、 ES6之 Generator及它的使用场景