【前端面试】一篇文章搞清楚Promise、Generator和async/await

969 阅读12分钟

前言

面试时经常会被问道:你了解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整个流程

image.png

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及它的使用场景