Promise面试题整理

更新日期: 2020-01-26阅读: 2.1k标签: 面试题

Promise 面试题来源网络

面试题一

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

运行结果:

1
2
4
3

解释:Promise 构造函数是同步执行的,promise.then 中的函数是异步执行的。

面试题二

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})

console.log('promise1', promise1)
console.log('promise2', promise2)

setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

运行结果:

promise1 Promise { <pending> }
promise2 Promise { <pending> }
(node:50928) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: error!!!
(node:50928) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
promise1 Promise { 'success' }
promise2 Promise {
  <rejected> Error: error!!!
    at promise.then (...)
    at <anonymous> }

解释:promise 有 3 种状态:pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected,状态一旦改变则不能再变。
上面 promise2 并不是 promise1,而是返回的一个新的 Promise 实例。(在Node.js和浏览器console的结果,有些差异)

面试题三

const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

运行结果:

then: success1

解释:构造函数中的 resolve 或 reject 只有第一次执行有效,多次调用没有任何作用,呼应代码二结论:promise 状态一旦改变则不能再变。

面试题四

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

运行结果:

1
2

解释:promise 可以链式调用。提起链式调用我们通常会想到通过 return this 实现,不过 Promise 并不是这样实现的。
promise 每次调用 .then 或者 .catch 都会返回一个新的 promise,从而实现了链式调用。

面试题五

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})

运行结果:

once
success 1001
success 1001

解释:promise 的 .then 或者 .catch 可以被调用多次,但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变,并且有了一个值,那么后续每次调用 .then 或者 .catch 都会直接拿到该值。(有些人的浏览器运行结果可能不是1001,那由于电脑性能造成的微小差异)

面试题六

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

运行结果:

then: Error: error!!!
    at Promise.resolve.then (...)
    at ...

解释:.then 或者 .catch 中 return 一个 error 对象并不会抛出错误,所以不会被后续的 .catch 捕获,需要改成其中一种:

return Promise.reject(new Error('error!!!'))
throw new Error('error!!!')

因为返回任意一个非 promise 的值都会被包裹成 promise 对象,即 return new Error('error!!!') 等价于 return Promise.resolve(new Error('error!!!'))。

面试题七

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

运行结果:

TypeError: Chaining cycle detected for promise #<Promise>
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

解释:.then 或 .catch 返回的值不能是 promise 本身,否则会造成死循环。类似于:

process.nextTick(function tick () {
  console.log('tick')
  process.nextTick(tick)
})

面试题八

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

运行结果:

1

解释:.then 或者 .catch 的参数期望是函数,传入非函数则会发生值穿透。

面试题九

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

运行结果:

fail2: Error: error
    at success (...)
    at ...

解释:.then 可以接收两个参数,第一个是处理成功的函数,第二个是处理错误的函数。.catch 是 .then 第二个参数的简便写法,但是它们用法上有一点需要注意:.then 的第二个处理错误的函数捕获不了第一个处理成功的函数抛出的错误,而后续的 .catch 可以捕获之前的错误。当然以下代码也可以:

Promise.resolve()
  .then(function success1 (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .then(function success2 (res) {
  }, function fail2 (e) {
    console.error('fail2: ', e)
  })

面试题十

process.nextTick(() => {
  console.log('nextTick')
})
Promise.resolve()
  .then(() => {
    console.log('then')
  })
setImmediate(() => {
  console.log('setImmediate')
})
console.log('end')

运行结果:

end
nextTick
then
setImmediate

解释:process.nextTick 和 promise.then 都属于 microtask,而 setImmediate 属于 macrotask,在事件循环的 check 阶段执行。
事件循环的每个阶段(macrotask)之间都会执行 microtask,事件循环的开始会先执行一次 microtask。

面试题十一

var p = new Promise(function(resolve, reject){
  resolve(1);
});
p.then(function(value){               //第一个then
  console.log(value);
  return value*2;
}).then(function(value){              //第二个then
  console.log(value);
}).then(function(value){              //第三个then
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){              //第四个then
  console.log(value);
  return Promise.reject('reject');
}).then(function(value){              //第五个then
  console.log('resolve: '+ value);
}, function(err){
  console.log('reject: ' + err);
})

运行结果:

1
2
undefined
"resolve"
"reject: reject"

Promise对象的then方法返回一个新的Promise对象,因此可以通过链式调用then方法。
then方法接收两个函数作为参数,第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败时的回调。
两个函数只会有一个被调用,函数的返回值将被用作创建then返回的Promise对象。
这两个参数的返回值可以是以下三种情况中的一种:

  • return 一个同步的值 ,或者 undefined(当没有返回一个有效值时,默认返回undefined),then方法将返回一个resolved状态的Promise对象,Promise对象的值就是这个返回值。
  • return 另一个 Promise,then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
  • throw 一个同步异常,then方法将返回一个rejected状态的Promise, 值是该异常。

根据以上分析,代码中第一个then会返回一个值为2(1*2),状态为resolved的Promise对象,于是第二个then输出的值是2。
第二个then中没有返回值,因此将返回默认的undefined,于是在第三个then中输出undefined。
第三个then和第四个then中分别返回一个状态是resolved的Promise和一个状态是rejected的Promise,依次由第四个then中成功的回调函数和第五个then中失败的回调函数处理。

面试题十二

var p1 = new Promise( function(resolve,reject){  
  foo.bar();  
  resolve( 1 );        
});  
  
p1.then(  
  function(value){  
    console.log('p1 then value: ' + value);  
  },  
  function(err){  
    console.log('p1 then err: ' + err);  
  }  
).then(  
  function(value){  
    console.log('p1 then then value: '+value);  
  },  
  function(err){  
    console.log('p1 then then err: ' + err);  
  }  
);  
  
var p2 = new Promise(function(resolve,reject){  
  resolve( 2 );      
});  
  
p2.then(  
  function(value){  
    console.log('p2 then value: ' + value);  
    foo.bar();  
  },   
  function(err){  
    console.log('p2 then err: ' + err);  
  }  
).then(  
  function(value){  
    console.log('p2 then then value: ' + value);  
  },  
  function(err){  
    console.log('p2 then then err: ' + err);  
    return 1;  
  }  
).then(  
  function(value){  
    console.log('p2 then then then value: ' + value);  
  },  
  function(err){  
    console.log('p2 then then then err: ' + err);  
  }  
);  

运行结果:

p1 then err: ReferenceError: foo is not defined  
p2 then value: 2  
p1 then then value: undefined  
p2 then then err: ReferenceError: foo is not defined  
p2 then then then value: 1  

Promise中的异常由then参数中第二个回调函数(Promise执行失败的回调)处理,异常信息将作为Promise的值。
异常一旦得到处理,then返回的后续Promise对象将恢复正常,并会被Promise执行成功的回调函数处理。
另外,需要注意p1、p2 多级then的回调函数是交替执行的 ,这正是由Promise then回调的异步性决定的。

面试题十三

var p1 = Promise.resolve( 1 );  
var p2 = Promise.resolve( p1 );  
var p3 = new Promise(function(resolve, reject){  
  resolve(1);  
});  
var p4 = new Promise(function(resolve, reject){  
  resolve(p1);  
});  
  
console.log(p1 === p2);   
console.log(p1 === p3);  
console.log(p1 === p4);  
console.log(p3 === p4);  
  
p4.then(function(value){  
  console.log('p4=' + value);  
});  
  
p2.then(function(value){  
  console.log('p2=' + value);  
})  
  
p1.then(function(value){  
  console.log('p1=' + value);  
})  

运行结果:

true  
false  
false  
false  
p2=1  
p1=1  
p4=1  

Promise.resolve(...)可以接收一个值或者是一个Promise对象作为参数。
当参数是普通值时,它返回一个resolved状态的Promise对象,对象的值就是这个参数;当参数是一个Promise对象时,它直接返回这个Promise参数。
因此,p1 === p2。但通过new的方式创建的Promise对象都是一个新的对象,因此后面的三个比较结果都是false。
另外,为什么p4的then最先调用,但在控制台上是最后输出结果的呢?
因为p4的resolve中接收的参数是一个Promise对象p1,resolve会对p1”拆箱“,获取p1的状态和值,但这个过程是异步的,可参考下一节。

面试题十四

var p1 = new Promise(function(resolve, reject){  
  resolve(Promise.resolve('resolve'));  
});  
  
var p2 = new Promise(function(resolve, reject){  
  resolve(Promise.reject('reject'));  
});  
  
var p3 = new Promise(function(resolve, reject){  
  reject(Promise.resolve('resolve'));  
});  
  
p1.then(  
  function fulfilled(value){  
    console.log('fulfilled: ' + value);  
  },   
  function rejected(err){  
    console.log('rejected: ' + err);  
  }  
);  
  
p2.then(  
  function fulfilled(value){  
    console.log('fulfilled: ' + value);  
  },   
  function rejected(err){  
    console.log('rejected: ' + err);  
  }  
);  
  
p3.then(  
  function fulfilled(value){  
    console.log('fulfilled: ' + value);  
  },   
  function rejected(err){  
    console.log('rejected: ' + err);  
  }  
);  

运行结果:

p3 rejected: \[object Promise\]  
p1 fulfilled: resolve  
p2 rejected: reject  

Promise回调函数中的第一个参数resolve,会对Promise执行"拆箱"动作。
即当resolve的参数是一个Promise对象时,resolve会"拆箱"获取这个Promise对象的状态和值,但这个过程是异步的。
p1"拆箱"后,获取到Promise对象的状态是resolved,因此fulfilled回调被执行;p2"拆箱"后,获取到Promise对象的状态是rejected,因此rejected回调被执行。
但Promise回调函数中的第二个参数reject不具备”拆箱“的能力,reject的参数会直接传递给then方法中的rejected回调。
因此,即使p3 reject接收了一个resolved状态的Promise,then方法中被调用的依然是rejected,并且参数就是reject接收到的Promise对象。

链接: https://www.fly63.com/article/detial/7795

史上最全的Javascript面试题总结(内附答案)

近年来,从事JavaScript的程序员越来越多,JavaScript的曝光率也越来越高,如果你想转行试试JavaScript,不妨收下这份面试题及答案,没准用得上。当然,如果针对这些问题,你有更棒的答案,欢迎移步至评论区。

高级前端面试题汇总

面试的公司分别是:阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总

web前端常见的面试题,基础知识点

web前端常见的面试题:包括:HTML 常见题目、CSS类的题目、JavaScript类的题目、面试官爱问的问题。原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的?你遇到过比较难的技术问题是?你是如何解决的?

前端面试题汇总(主要为Vue)

毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。

js常见面试题

javascript的typeof返回哪些数据类型;例举3种强制类型转换和2种隐式类型转换?split() join() 的区别; 数组方法pop() push() unshift() shift();IE和标准下有哪些兼容性的写法

Js字符串类面试题

解析 URL Params 为对象;模板引擎实现;转化为驼峰命名;查找字符串中出现最多的字符和个数;字符串查找请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中

35道必须要清楚的 React面试题

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。函数组件和类组件当然是有区别的

23 个 Vue.js 初级面试题

使用渐进式框架的代价很小,从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。

AJAX原理及常见面试题

AJAX 即 Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源)

12道vue高频原理面试题,你能答出几道?

本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B 数),从而弥补自己的不足,更好的掌握 Vue

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!