Promise详解及面试例题

于 2024-08-16 12:01:24 发布
阅读量868 收藏 7
点赞数 23
分类专栏： 面试合集 文章标签： 面试 网络 服务器 javascript 前端 笔记 跳槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78675670/article/details/141255052
版权

1、Promise的基本概念

1.1、基本概念：

  1. Promise是JavaScript中的一种用于处理异步操作的对象。
  2. 可以把它想象成一个“承诺”——程序承诺会在未来的某个时间点完成某件事（比如从服务器获取数据），但是，并不立即返回结果。

1.2、Promise的状态：

Promise 有三种状态：

  1. Pending（进行中）: 承诺还没有完成，也没有失败，它正在等待某件事情发生。
  2. Fulfilled（已完成）: 承诺成功地完成了，并且返回了一个结果。
  3. Rejected（已失败） : 承诺未能完成，发生了某种错误或问题。

1.3、生活场景示例：

假设小明让小红帮忙买咖啡，小红答应了，这时，这个“答应”的过程就是一个Promise，它可能有三种状态：

  • Pending：小红还在咖啡店排队，咖啡还没买到手。
  • Fulfilled：小红已经买到咖啡，并且把咖啡给了小明。
  • Rejected：小红因为某种原因没法买到咖啡，告诉小明：“抱歉，没买到”。

2、Promise的链式调用规则

Promise的链式调用是指：

  1. 在一个Promise的.then() 方法中返回一个新的Promise，然后可以继续在这个新的Promise上调用.then() 方法。
  2. 这种方式可以：让我们可以把多个异步操作串联起来，依次处理，避免回调地狱。
  1. .then()返回的是一个新的Promise：
    • 每次调用.then() 方法后，你都会得到一个新的Promise。
    • 这使得你可以在下一个.then()里继续处理上一个.then()的结果。
  2. .then() 的回调函数可以返回值：
    • 如果回调函数返回的是一个普通的值（而不是 Promise），这个值会被包装成一个已经完成的 Promise，并传递给下一个 .then()。
  3. 回调函数返回的是Promise：
    • 如果回调函数返回的是一个Promise，那么下一个.then()将会等待这个Promise完成，然后继续处理结果。
  4. 错误传递:
    • 如果任何一个.then()中发生错误（包括抛出异常或返回一个被拒绝的 Promise），这个错误会被传递到后面最近的.catch()中处理。

3、Promise的静态方法

  1. Promise.resolve(value):
    • 用来快速创建一个已经完成的Promise，并将给定的value作为结果。
    • 适用于：将一个普通的值或非Promise的结果转换为Promise
  2. Promise.reject(reason):
    • 用来快速创建一个被拒绝的Promise，并将给定的 reason 作为错误原因。
    • 适用于：将一个错误或失败的结果转换为 Promise
  3. Promise.all(iterable):
    • 接受一个可迭代对象（通常是一个数组）作为参数，其中每个元素都是一个 Promise。
    • 只有当所有的 Promise 都完成时，返回的 Promise 才会被完成，结果是一个包含所有结果的数组
    • 如果有任何一个Promise被拒绝，Promise.all会立即返回一个被拒绝的Promise
  4. Promise.race(iterable):
    • 接受一个可迭代对象，其中每个元素也是一个 Promise。
    • 返回的 Promise 会在第一个 Promise 完成或拒绝时，采用这个 Promise 的结果或错误。
    • 适用于：你只关心最先完成的异步操作的场景
  5. Promise.allSettled(iterable):
    • 接受一个可迭代对象，每个元素是一个 Promise。
    • 返回的 Promise 会等待所有的 Promise 都结束（无论是完成还是拒绝），并返回一个数组，数组中的每一项都是一个对象，表示每个 Promise 的状态和结果。
    • 适用于：你希望等待所有 Promise 结束后，处理每个 Promise 的结果
  6. Promise.any(iterable):
    • 接受一个可迭代对象，每个元素是一个 Promise。
    • 返回的 Promise 会在第一个成功（fulfilled）的 Promise 完成时被完成。如果所有的 Promise 都被拒绝，返回的 Promise 会被拒绝，错误信息是所有错误的一个数组。
    • 适用于：你只关心最先成功的异步操作的场景

4、async和await

  • async和await是JavaScript中用于处理异步操作的关键字。
  • 它们让你能够像写同步代码那样编写异步代码，使得代码更加清晰和易读。

4.1、async 函数

  • async是用来定义一个异步函数的关键字。
  • 一个函数一旦被定义为 async，它就会自动返回一个 Promise，而不论你在函数中实际返回的是什么。

4.2、await 关键字

  • await只能在async函数内部使用。
  • 它用于等待一个Promise完成，并获得Promise解决的值
  • 简单理解：
    • 使用await，就像在告诉JS：“等一下，等这个Promise完成了，再继续执行后面的代码。”

4.3、async 和 await 的好处：

  • 更易读：它让你可以像写同步代码一样写异步代码，不需要再用.then()链式调用，代码逻辑更直观
  • 错误处理：你可以使用try...catch语句来处理异步操作中的错误，这样比处理Promise的.catch()更加清晰。

5、事件循环中，Promise进入的是哪些事件队列

以下：包含一些常规的事件队列总结

  1. setTimeout的回调：宏任务（macro task)
  2. setInterval的回调：宏任务（macro task)
  3. promise的then函数回调：微任务（micro task)
  4. requestAnimationFrame的回调：介于宏任务和微任务之间，但通常被归类为宏任务（macro task)
  5. 事件处理函数：宏任务（macro task)

6、面试例题

根据下列代码，判断代码输出的结果是什么：

// 下面代码的输出结果是什么 => 先后打印：1、2、4、3
    const promise = new Promise((resolve, reject) => {
      console.log(1);
      resolve();
      console.log(2);
    });

    promise.then(() => {
// 这里不先打印`3`是因为：promise里的then回调会进入"微任务队列"，它必须等待全局(同步)代码执行完成后，再执行微队列里的代码
      console.log(3); 
    });

    console.log(4);

// 下面代码的输出结果是什么 => 1、5、2、3、4
      const promise =new Promise((resolve,reject)=>{
  // 1）同步代码先执行 => 打印1
        console.log(1);
  // 2）延时器进入宏队列，等待处理
  // 5）处理宏队列任务
        setTimeout(()=>{
    // 5-1、打印输出2
          console.log(2);
    // 5-2、将Promise对象状态改为成功状态 => 回调函数进入微队列，但，需要等到当前宏队列任务完成后才能执行微队列任务
          resolve();
    // 5-3、打印输出3
          console.log(3);
        }); 
      });
  // 3）因为promise对象此时还是pending状态，没有满足成功状态，此时这里代码也是不执行的，也不会放入微队列
      promise.then(()=>{
  // 6）处理微队列任务 => 打印输出4
        console.log(4);
      });
  // 4）执行同步代码 => 打印5
      console.log(5);

// 下面代码的输出结果是什么
     const promise1 = new Promise((resolve, reject)=>{
       setTimeout(()=>{
         resolve()
       },1000)
     })
     const promise2 = promisel.catch(()=>{
       return 2;
     })
// 因为：它们还在等待`resolve`或`reject`状态
  // 1）打印：promise1 Promise{<pending>} 
  // 2）打印：promise2 Promise{<pending>}
     console.log('promise1', promise1)
     console.log('promise2', promise2)
     
     setTimeout(()=>{
// 因为：`promise1`被`resolve`后，状态变为`fulfilled`，且`resolve()`没有传递值，所以`fulfilled`的值是`undefined`。
  // 3）打印：promise1 Promise{<undefined>}
  // 4）打印：promise2 Promise{<undefined>}
       console.log('promise1', promise1)
       console.log('promise2',promise2)
     },2000)

// 下面代码的输出结果是什么 => 0、2、1
    async function m(){
  // 1）立即执行，打印 0
      console.log(0)
  // 2）遇到await，m函数则暂停执行，将返回的1包装成一个已解决的Promise，这时控制权返回到主线程，继续执行同步代码
      const n = await 1;
  // 4）等待获取l的结果后再执行
      console.log(n);
    }
    m();
  // 3）同步代码立即执行，打印2
    console.log(2);

// 下面代码的输出结果是什么 => 0、3、1、2
     async function m(){
  // 1）立即执行，打印0
       console.log(0)
  // 2）await表达式会立即执行（即 Promise.resolve(1)），但，会让出执行线程
       const n = await 1;
  // 5）在微任务队列中执行，await完成后打印 1
       console.log(n);
     }
     
     (async ()=>{
  // 4) 调用 m()，进入 m 函数，暂停在 await 处
       await m();
  // 6) 在 m() 执行完后，打印 2
       console.log(2);
     })();
  // 3) 同步代码立即执行，打印 3   
     console.log(3);
6230_
关注
专栏目录
关于promise面试题
Kane_qqq的博客
05-05 4522
1. promise的几个API promise.resolve(1) promise.reject(1) promise.all([promise1,promise2,promise3]) promise.race([promise1,promise2,promise3]) 2. promise的三个状态 pending，表示进行中 fulfilled也是resolved，表示成功 rejected，表示失败 3.promise的状态变化 只能从pending->resolved或者
Promise的理解（面试题）
m0_49456900的博客
03-22 5482
Promise的基本用法、promise三种状态？总结Promise.resolve()方法参数的几种情况、Promise.all()和promise.race()、promise.any()的区别？Then方法中return的作用？
前端面试重点--promise
最新发布
2401_85123379的博客
06-20 624
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档//添加 resolve 方法//返回promise对象resolve(v);})}else{//状态设置为成功});//添加 reject 方法});//添加 all 方法//返回结果为promise对象//声明变量//遍历i++){////得知对象的状态是成功//每个promise对象 都成功count++;
Promise面试题合集(问题+答案)
【实力派，无需多言！】
01-12 3667
好的，让我们来总结一下.then()和.race()吧，😄的作用是接收一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调。.race()的作用也是接收一组异步任务，然后并行执行异步任务，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。结果中数组的顺序和接收到的数组顺序一致。all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；
Promise
weixin_44932552的博客
07-24 423
一、定义： 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态. 2）一旦状态改变，就不会再变，任何时候都可以得到这
一道关于Promise应用的面试题
weixin_33859504的博客
05-15 316
题目：红灯三秒亮一次，绿灯一秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promse实现） 三个亮灯函数已经存在： function red(){ console.log('red'); } function green(){ console.log('green'); } function yellow(){ c...
Promise面试题
weixin_33915554的博客
01-14 620
Promise面试题 题目一 const promise = new Promise((resolve, reject) =&gt; { console.log(1); resolve(); console.log(2); }) promise.then(() =&gt; { console.log(3); }) console.log(4); 复制代码解析 首先P...
promise面试题
weixin_43964148的博客
05-01 1081
第一问：了解 Promise 吗？ 了解Promise，Promise是一种异步编程的解决方案，有三种状态，pending（进行中）、resolved（已完成）、rejected（已失败）。当Promise的状态由pending转变为resolved或reject时，会执行相应的方法 Promised的特点是只有异步操作的结果，可以决定当前是哪一种状态，任务其他操作都无法改变这个状态，也...
【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序
二三的博客
09-23 7248
上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！
promise详解
03-09
关键词：Promise，resolve，reject，Prepending，Resolve，Reject，then，catch，all，race
Javascript Promise用法详解
10-18
JavaScript Promise 是一种处理异步操作的技术，它在ES6中被引入，旨在解决回调地狱问题，提供了一种更强大、规范化的异步编程解决方案。Promise 是一个代表了可能还未完成或已经完成的异步操作的对象，它有三种状态...
promise详解，手动实现以及上万字笔记.rar
08-16
本资源包含了一份手动实现Promise的源码（Promise.js）和一份详细的Promise详解笔记（文档.md）。以下是Promise的基础知识及深入解析： 1. **Promise状态**： - `pending`：初始状态，既没有完成也没有被拒绝。 -...
promise 以及经典面试题
qq_43944285的博客
05-10 4747
在这里插入代码片
js中的promise详解
热门推荐
zyf971020的博客
09-23 6万+
js中的promise详解
【面试题】Promise只会概念远远不够，还需这17道题目巩固！_前端面试题 promise(1)
2401_84438488的博客
05-01 447
, 0)// 4 1 3 2// 宏任务嵌套微任务// 微任务})}, 0)}, 0)// 4 1 2 3// 微任务链接微任务return 2;})})// 1 3 2// 微任务嵌套微任务})return 3})})// 1 4 2 3}, 1000);});!!”);});
Promise的常见面试题
小草莓的博客
07-04 2150
一、对Promise的理解以及Promise的基本用法 二、Promise的其他常见方法 三、Promise的常见面试题 ① 多个.catch ② 多个.catch（不懂） ③ 链接.then和.catch（不懂） ④ 链接.catch（不懂） ⑤ 多个.catch（不懂） ⑥.then之间的流程 ⑦.then之间的流程 ⑧.then之间的流程 ⑨.then和.catch之间的流程（不懂） ⑩ 基础输出题 11、用Promise实现红绿灯不断交替亮
有关promise的面试题
lannieZ的博客
10-22 514
问题一：promise有什么作用？ 答：promise是用来创建异步流程的，也可以解决回调地狱的问题，也让异步操作更加容易 问题二：你知道回调地狱是什么问题吗？ 答：回调函数层层嵌套构成回调地狱 问题三：promise是怎么来创建异步流程的？ 答：new Promise，给Promise构造函数传一个函数，这个函数内部就可以创建异步的任务 问题四：promise是怎么来解决回调地狱这个问题的？ 答...
Promise在前端面试中的重要性与使用详解
在前端开发的大厂面试中，关于Promise的理解是常被考察的话题。Promise是ES6引入的一种强大的异步编程解决方案，旨在解决传统回调函数带来的回调地狱问题。Promise的设计目标是提供一种更为清晰、可读且易于管理异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值