es6面试题--Promise相关

本文通过多个实例详细解析了JavaScript中Promise的工作原理及使用方法,包括then、catch等方法的行为,以及如何自定义实现简单的Promise。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、

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。

  解题思路:then方法是异步执行的。

2、

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

输出结果:success

  解题思路:Promise状态一旦改变,无法在发生变更。

3、

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

输出结果:1

  解题思路:Promise的then方法的参数期望是函数,传入非函数则会发生值穿透。

4、

setTimeout(()=>{
  console.log('setTimeout')
})
let p1 = new Promise((resolve)=>{
  console.log('Promise1')
  resolve('Promise2')
})
p1.then((res)=>{
  console.log(res)
})
console.log(1)

输出结果:

    Promise1
    1
    Promise2
    setTimeout

  解题思路:这个牵扯到js的执行队列问题,整个script代码,放在了macrotask queue中,执行到setTimeout时会新建一个macrotask queue。但是,promise.then放到了另一个任务队列microtask queue中。script的执行引擎会取1个macrotask queue中的task,执行之。然后把所有microtask queue顺序执行完,再取setTimeout所在的macrotask queue按顺序开始执行。(具体参考https://www.zhihu.com/question/36972010

5、

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

输出结果:1  2

  解题思路:Promise首先resolve(1),接着就会执行then函数,因此会输出1,然后在函数中返回2。因为是resolve函数,因此后面的catch函数不会执行,而是直接执行第二个then函数,因此会输出2。

6、

const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('开始');
resolve('success');
}, 5000);
});
 
const start = Date.now();
promise.then((res) => {
console.log(res, Date.now() - start);
});
 
promise.then((res) => {
console.log(res, Date.now() - start);
});

输出结果:

    开始

    success 5002

    success 5002

  解题思路:promise 的.then或者.catch可以被调用多次,但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变,并且有了一个值,那么后续每次调用.then 或者.catch都会直接拿到该值。

7、

let p1 = new Promise((resolve,reject)=>{
  let num = 6
  if(num<5){
    console.log('resolve1')
    resolve(num)
  }else{
    console.log('reject1')
    reject(num)
  }
})
p1.then((res)=>{
  console.log('resolve2')
  console.log(res)
},(rej)=>{
  console.log('reject2')
  let p2 = new Promise((resolve,reject)=>{
    if(rej*2>10){
      console.log('resolve3')
      resolve(rej*2)
    }else{
      console.log('reject3')
      reject(rej*2)
    }
  })
  return p2
}).then((res)=>{
  console.log('resolve4')
  console.log(res)
},(rej)=>{
  console.log('reject4')
  console.log(rej)
})

输出结果:

    reject1
    reject2
    resolve3
    resolve4
    12

  解题思路:我们上面说了Promise的先进之处在于可以在then方法中继续写Promise对象并返回。

8、实现一个简单的promise

function Promise(fn){
  var status = 'pending'
  function successNotify(){
      status = 'fulfilled'//状态变为fulfilled
      toDoThen.apply(undefined, arguments)//执行回调
  }
  function failNotify(){
      status = 'rejected'//状态变为rejected
      toDoThen.apply(undefined, arguments)//执行回调
  }
  function toDoThen(){
      setTimeout(()=>{ // 保证回调是异步执行的
          if(status === 'fulfilled'){
              for(let i =0; i< successArray.length;i ++)    {
                  successArray[i].apply(undefined, arguments)//执行then里面的回掉函数
              }
          }else if(status === 'rejected'){
              for(let i =0; i< failArray.length;i ++)    {
                  failArray[i].apply(undefined, arguments)//执行then里面的回掉函数
              }
          }
      })
  }
  var successArray = []
  var failArray = []
  fn.call(undefined, successNotify, failNotify)
  return {
      then: function(successFn, failFn){
          successArray.push(successFn)
          failArray.push(failFn)
          return undefined // 此处应该返回一个Promise
      }
  }
}

解题思路:Promise中的resolve和reject用于改变Promise的状态和传参,then中的参数必须是作为回调执行的函数。因此,当Promise改变状态之后会调用回调函数,根据状态的不同选择需要执行的回调函数。

 

转自:https://www.cnblogs.com/lunlunshiwo/archive/2018/04/16/8852984.html

转载于:https://www.cnblogs.com/xuepei/p/8855913.html

### 回答1: Promise是一种异步编程的解决方案,它可以让我们更方便地处理异步操作。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当Promise处于pending状态时,我们可以使用then方法来注册回调函数,当Promise状态变为fulfilled或rejected时,对应的回调函数就会被调用。Promise的原理是基于事件循环机制,它通过微任务和宏任务的方式来实现异步操作。当Promise状态变为fulfilled或rejected时,会将对应的回调函数放入微任务队列中,等待当前任务执行完毕后立即执行;而当我们使用setTimeout等异步API时,会将对应的回调函数放入宏任务队列中,等待事件循环机制执行。这样就可以保证异步操作的顺序性和可靠性。 ### 回答2: ES6中的Promise是一种异步编程的解决方案。它可以解决回调函数嵌套过深、代码可读性差、错误处理困难、无法取消等问题,使异步操作更为简洁、可读和易于维护。Promise对象有三种状态:Pending(等待)、Resolved(已完成)和Rejected(已拒绝)。当Promise状态由Pending变为Resolved或Rejected时,Promise对象会执行相应的操作。 Promise内部有两个重要的执行环节:Promise的实例化和Promise的处理。 在Promise实例化的过程中,需要传入一个函数作为参数。这个函数有两个参数,分别是resolverejectresolve参数用于处理Promise成功时的情况,reject参数用于处理Promise失败时的情况。当Promise内部执行完resolvereject函数后,Promise会立即转换为Resolved或Rejected状态。 在Promise的处理过程中,主要是通过对Promise实例进行链式调用来处理异步操作。由于Promise对象有then方法,所以可以通过链式调用来解决异步操作。 例如: ```js new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 2000); // 2 秒后返回1 }).then(function(result) { console.log(result); // 输出1 return result * 2; }).then(function(result) { console.log(result); // 输出2 return result * 2; }).then(function(result) { console.log(result); // 输出4 return result * 2; }); ``` 以上面的代码为例,Promise对象首先会等待2秒钟,然后返回1。接下来,通过链式调用then方法,依次输出其结果2、4、8。 总体来说,Promise解决了异步操作中回调函数嵌套和错误处理的问题,使得异步操作更为直观和易于维护。同时,Promise也是语言内置的,相比于外部库,更为高效和稳定。 ### 回答3: PromiseES6中的一项新特性,它有助于解决JS中的异步编程问题。Promise可以看作是一个容器,可以保存某个未来才会结束的事件(通常是一个异步操作)的结果。Promise对象提供了一些接口用于获取异步操作的结果,同时还提供了链式调用的语法,可以将多个异步操作按照一定的顺序进行组合,方便程序员进行复杂的异步编程。 Promise有三个状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。当一个Promise实例产生结果后,它就会从Pending状态转化为Fulfilled或Rejected状态,不再有其他状态转换。Promise可以通过then方法注册回调函数,分别对应Fulfilled和Rejected状态,回调函数的参数均为Promise的结果。 Promise的作用是在异步操作中解决回调地狱的问题,将异步代码用链式调用的语法进行串联,简化了异步操作的处理。另外,由于Promise是基于链式调用的设计,使得多个异步操作之间可以被串联起来,每个操作的回调函数都通过链式调用的方式进行设置,可以十分直观地描述多个异步操作的关系和完成的顺序。 总结:PromiseES6中用于解决异步编程问题的新特性,它可以将异步操作进行链式调用,解决回调地狱的问题,同时利用状态转换的特性,可以更加方便地对异步操作的结果进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值