透过面试题来说说Promise

Posted chenshufang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了透过面试题来说说Promise相关的知识,希望对你有一定的参考价值。

前言

我们先看看这几个来自大厂的面试题

面试题1:

const promise = new Promise(function(resolve,reject){
  console.log(1)
  resolve()
  console.log(2)
})
console.log(3)

面试题2:

setTimeout(function () {
  console.log(1);
}, 0)
new Promise(function (resolve) {
  console.log(2);
  for (var i = 0; i < 100; i++) {
    i == 99 && resolve();
  }
  console.log(3);
}).then(function () {
  console.log(4);
})
console.log(5);

面试题3:

Promise.resolve(1)
.then((res)=>{
  console.log(res)
  return 2
})
.catch( (err) => 3)
.then(res=>console.log(res))。

面试题4:

Promise.resolve(1)
.then( (x) => x + 1 )
.then( (x) => {throw new Error('My Error')})
.catch( () => 1)
.then( (x) => x + 1)
.then((x) => console.log(x))
.catch( (x) => console.log(error))

如果你看完这些题一脸懵逼,恭喜你,你可以继续往下看了,else,出门左拐大佬。

技术分享图片

首先简单介绍一些Promise

Promise简介

Promises对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口

那么,什么是Promises?首先,它是一个对象,也就是说与其他javascript对象的用法,没有什么两样;其次,它起到代理作用(proxy),使得异步操作具备同步操作(synchronous code)的接口,即充当异步操作与回调函数之间的中介,使得程序具备正常的同步运行的流程,回调函数不必再一层层包裹起来。

简单说,它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程。

Promise 表示一个异步操作的最终结果,与之进行交互的方式主要是 then 方法,该方法注册了两个回调函数,用于接收 promise 的终值或本 promise 不能执行的原因。

下图是一张Promise的API结构图。(引自https://github.com/leer0911/myPromise)
技术分享图片

面试题解析

面试题1:

const promise = new Promise(function(resolve,reject){
  console.log(1)
  resolve()
  console.log(2)
})
console.log(3)
// 1
// 2
// 3

解析

Promise类似于XMLHttpRequest,从构造函数Promise来创建一个新Promise对象作为接口。

要想创建一个Promise对象吗可以使用new来调用Promise的构造器来进行实例化。

var promise = new Promise(function(resolve, reject) { 
// 异步处理
// 处理结束后、调用resolve 或 reject
});

new Promise的时候, 需要传递一个executor执行器 ,执行器函数会默认被内部所执行。借用VSCode编辑器我们可以看到一些内部的参数和返回值。

技术分享图片

new Promise内部的执行器会立即执行它里面的代码,这里的resolve()并不会阻塞下面的代码执行,我们可以理解new Promise(function(){...})这个就是一段同步代码而已。所以第一道题的答案显而易见。

巩固一下,下面的代码你一定可以准确的得出结果了。

setTimeout(function () {
  console.log('setTimeout')
}, 0);

let p = new Promise(function (resolve,reject) {
  resolve();
  console.log('a')
});

结果是:

// a
// setTimeout

这里会有EventLoop的一些知识,补充知识链接:说一说javascript的异步编程,到目前来说可以得到两点:

1. 我们完全可以把`new Promise(function(){...})`看成是同步代码。
2. `Promise`会优先于`setTimeout`执行。

约定

不同于老式的传入回调,在应用 Promise 时,我们将会有以下约定:

  • 在 JavaScript 事件队列的当前运行完成之前,回调函数永远不会被调用。
  • 通过 .then 形式添加的回调函数,甚至都在异步操作完成之后才被添加的函数,都会被调用。
  • 通过多次调用 .then,可以添加多个回调函数,它们会按照插入顺序并且独立运行。
    因此,Promise 最直接的好处就是链式调用

引自MND

面试题2:

setTimeout(function () {
  console.log(1);
}, 0)
new Promise(function (resolve) {
  console.log(2);
  for (var i = 0; i < 100; i++) {
    i == 99 && resolve();
  }
  console.log(3);
}).then(function () {
  console.log(4);
})
console.log(5);

// 2
// 3
// 5
// 4
// 1

解析:

Then 方法

可以把 Promise 看成一个状态机。初始是 pending 状态,可以通过函数 resolvereject ,将状态转变为 resolved 或者 rejected 状态,状态一旦改变就不能再次变化。

then 函数会返回一个 Promise 实例,并且该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态,其他状态是不可以改变的,如果返回的是一个相同实例的话,多个 then 调用就失去意义了。

MDN中对于promise的介绍一个小案例非常的简单易懂,如下:

一个常见的需求就是连续执行两个或者多个异步操作,这种情况下,每一个后来的操作都在前面的操作执行成功之后,带着上一步操作所返回的结果开始执行。我们可以通过创造一个 Promise chain 来完成这种需求。

then 函数会返回一个新的 Promise,跟原来的不同:

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

或者

const promise2 = doSomething().then(successCallback, failureCallback);

第二个对象(promise2)不仅代表doSomething()函数的完成,也代表了你传入的 successCallback 或者failureCallback 的完成,这也可能是其他异步函数返回的 Promise。这样的话,任何被添加给 promise2 的回调函数都会被排在 successCallbackfailureCallback 返回的 Promise 后面。

特别重申一下,then 函数一定返回一个新的 Promise,跟原来的不同,下面的是错误的应用:

技术分享图片

Promise对象的运行结果,最终只有两种。

  • 得到一个值,状态变为fulfilled
  • 抛出一个错误,状态变为rejected
promise.then(onFulfilled, onRejected);

promise对象的then方法用来添加回调函数。它可以接受两个回调函数,第一个是操作成功(fulfilled)时的回调函数,第二个是操作失败(rejected)时的回调函数(可以不提供)。一旦状态改变,就调用相应的回调函数。

onFulfilledonRejected 都是可选参数。

  • 如果 onFulfilled 是函数,当 promise 执行结束后其必须被调用,其第一个参数为 promise 的终值,在 promise 执行结束前其不可被调用,其调用次数不可超过一次

  • 如果 onRejected 是函数,当 promise 被拒绝执行后其必须被调用,其第一个参数为 promise 的据因,在 promise 被拒绝执行前其不可被调用,其调用次数不可超过一次

  • onFulfilledonRejected 只有在执行环境堆栈仅包含平台代码 ( 指的是引擎、环境以及 promise 的实施代码 )时才可被调用

  • 实践中要确保 onFulfilledonRejected 方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

  • onFulfilledonRejected 必须被作为函数调用即没有 this 值 ( 也就是说在 严格模式(strict) 中,函数 this 的值为 undefined ;在非严格模式中其为全局对象。)

  • then 方法可以被同一个 promise调用多次

  • then 方法必须返回一个 promise 对象

为了避免意外,即使是一个已经变成 resolve状态的 Promise,传递给 then的函数也总是会被异步调用:

Promise.resolve().then(() => console.log(2));
console.log(1); // 1, 2

至此,我们再回过头来看面试题:

setTimeout(function () {
  console.log(1);
}, 0)
new Promise(function (resolve) {
  console.log(2);
  for (var i = 0; i < 100; i++) {
    i == 99 && resolve();
  }
  console.log(3);
}).then(function () {
  console.log(4);
})
console.log(5);
// 2
// 3
// 5
// 4
// 1

new Promise构造器之后,会返回一个promise对象,对于这个promise对象,我们调用他的then方法来设置resolve后的回调函数。

promise对象会在for循环满足i==99时被resolve(),这时then的回调函数会被调用。

基于第一道题的基础,我们知道最后被打印的一定是1,然后是2,接着是3,由于.then是一个异步函数,用来接受promise的返回结果,很显然应该是5setTimeout由于EventLoop的原因是最后执行,所以后面是4,最后是1.

面试题3:

Promise.resolve(1)
.then((res)=>{
  console.log(res)
  return 2
})
.catch( (err) => 3)
.then(res=>console.log(res))

// 1
// 2

解析:

New Promise的快捷方式

静态方法Promise.resolve(value)可以认为是new Promise()方法的快捷方式。
比如Promise.resolve(1);,可以认为是一下代码的语法糖:

new Promise(function(resolve){ 
  resolve(1);
});

在这段代码中的 resolve(1); 会让这个 promise 对象立即进入确定(即resolved)状态,
并将 1 传递给后面then里所指定的 onFulfilled 函数。

方法Promise.resolve(value) 的返回值也是一个promise对象,所以我们可以像下面那样
接着对其返回值进行.then调用。

Promise.resolve(42).then(function(value){
    console.log(value)
})

简单总结一下 Promise.resolve 方法的话,可以认为它的作用就是将传递给它的参数填 充(Fulfilled)到promise对象后并返回这个promise对象。

Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。但如果这个值是个thenable(即带有then方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态(指resolved/rejected/pending/settled);如果传入的value本身就是promise对象,则该对象作为Promise.resolve方法的返回值返回;否则以该值为成功状态返回promise对象。

语法为:

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

我们知道.then()同样是返回一个promise对象才能实现链式调用,所以连续的.then()是同样的道理,多个 then 方法调用串连在了一起,各函数也会严 格按照 resolve → then → then → then 的顺序执行,并且传给每个 then 方法的 value 的值都是前一个promise对象通过 return 返回的值。并且上面已经提到then 方法每次都会创建并返回一个新的promise对象。

Promise 的链式调用

then方法执行完会判断返回的结果,如果是promise会把这个promise执行,会取到它的结果。成功态(onFulfilled)和失败态(onRejected)。如果成功了就会把成功的结果传递给后面then里所指定的 onFulfilled函数,失败了传递给onRejected函数。
```
Promise.resolve(1)
.then((value)=>{
console.log(‘value‘,value)
},
(reason)=>{
console.log(‘reason‘,reason)
})
// value 1

Promise.reject(2)
.then((value)=>{
console.log(‘value‘,value)
},
(reason)=>{
console.log(‘reason‘,reason)
})
// reason 2
``上面的两个案例可以很清楚的看到,promise分别在成功态和失败态的时候传递给后面的then函数的调用输出结果。下一层的then是调成功还是失败是根据上面的promise`返回的是成功还是失败决定的。

说到这里第三题的答案已经不用说了。

面试题4:

Promise.resolve(1)
.then( (x) => x + 1 )
.then( (x) => {throw new Error('My Error')})
.catch( () => 1)
.then( (x) => x + 1)
.then((x) => console.log(x))
.catch( (x) => console.log(error))
// 2

Catch 的后续链式操作

在一个失败操作(即一个 catch)之后可以继续使用链式操作,即使链式中的一个动作失败之后还能有助于新的动作继续完成。请阅读下面的例子:

new Promise((resolve, reject) => {
    console.log('Initial');

    resolve();
})
.then(() => {
    throw new Error('Something failed');
        
    console.log('Do this');
})
.catch(() => {
    console.log('Do that');
})
.then(() => {
    console.log('Do this whatever happened before');
});

输出结果如下:

Initial
Do that
Do this whatever happened before

注意,由于“Something failed”错误导致了拒绝操作,所以“Do this”文本没有被输出。

解析:

这道题唯一的疑惑可能是在第二个then这里,这个错误状态为什么没有被打印出来,我们知道catch是用来捕获错误的,但是这里catch是可以捕获到错误的,但是这段代码没有对捕获的错误进行处理而是继续返回了1作为下一个Promise的参数,所以在第三个then中我们获取到了一个1作为成功态,然后又对其进行+1处理返回给了下一个thenpromise的成功态,这时候最后一个then的第一个函数onFulfilled就能获取到一个value打印出来就是2,没有错误信息返回所以最后的catch没有输出。

我们也可以对上面的题改一种写法,就是另一种答案了:

Promise.resolve(1)
.then( (x) => x + 1 )
.then( (x) => {throw new Error('My Error')})
.catch( (err) => console.log(err))
.then( (x) => {
  console.log(x)
  return x + 1
})
.then((x) => console.log(x))
.catch( (x) => console.log(error))

// Error: My Error
    at Promise.resolve.then.then 
// undefined
// NaN

我们在第一个catch中对错误信息进行了处理,但是我们没有给下面的then返回一个成功态的结果,所以默认是undefined,这样就会导致后面的结果完全不一样。

大家可以把这些面试题进行多次变形,改写来去理解promise的执行顺序,以及参数传递,这样就能绕过更多的坑。

以上内容如果错误,欢迎指正,共同进步~

以上是关于透过面试题来说说Promise的主要内容,如果未能解决你的问题,请参考以下文章

说说高频面试题 promise

前端面试题之手写promise

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

前端面试每日 3+1 —— 第696天

一文了解Promise使用与实现