Promise详解及面试例题

最新推荐文章于 2025-02-26 22:02:12 发布
最新推荐文章于 2025-02-26 22:02:12 发布
阅读量1.1k 收藏 8
点赞数 24
分类专栏： 面试合集 文章标签： 面试 网络 服务器 javascript 前端 笔记 跳槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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中用于处理异步操作的关键字。
  • 它们让你能够像写同步代码那样编写异步代码
最低0.47元/天 解锁文章
Promise的理解（面试题）
m0_49456900的博客
03-22 5604
Promise的基本用法、promise三种状态？总结Promise.resolve()方法参数的几种情况、Promise.all()和promise.race()、promise.any()的区别？Then方法中return的作用？
关于promise面试题
Kane_qqq的博客
05-05 4618
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应用的面试题
weixin_33859504的博客
05-15 360
题目：红灯三秒亮一次，绿灯一秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promse实现） 三个亮灯函数已经存在： function red(){ console.log('red'); } function green(){ console.log('green'); } function yellow(){ c...
谈谈你对promise的理解？
m0_72762367的博客
02-26 307
 跟面试官表达八股文建议三部曲：         1.说明白promise的概念         2.对promise的个人理解（比如说链式调用让代码更清晰，错误冒泡和catch方法统一处理错误）         3.重点（让面试官知道你是有在开发中真实使用的，而不是靠背的）：工作开发过程中用到的一些小故事（比如需要多接口并行请求所以用到promise.all等等，看看自己以前项目用到过什么关于promise的实用场景列举说一下）
Promise面试题
weixin_33915554的博客
01-14 670
Promise面试题 题目一 const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2); }) promise.then(() => { console.log(3); }) console.log(4); 复制代码解析 首先P...
谈谈我对Promise的理解(一)
weixin_33941350的博客
01-16 870
谈谈我对Promise的理解(一) 一、Promise是什么？ Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。 ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。 二、Promise是为解决什么问题而产生的？ promise是为解决...
Promise 详解（原理篇）
11-21
Promise.all和Promise.race是处理多个Promise对象的高级API，Promise.all方法等待所有给定的Promise对象完成，而Promise.race方法则等待第一个完成的Promise对象。 一个典型的Promise使用场景是处理AJAX请求。在...
promise详解
03-09
关键词：Promise，resolve，reject，Prepending，Resolve，Reject，then，catch，all，race
从0开始Vue3数据交互之promise详解
记录开发和安全学习过程中的点点滴滴
08-14 4929
前端中的异步编程技术，类似Java中的多线程+线程结果回调！Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
vue+axios+promise实际开发用法详解
10-17
Promise 是一种异步编程的解决方案，有三种状态：pending（等待态）、fulfilled（完成态）和rejected（失败态）。在Vue.js中使用Promise可以有效处理异步操作，从而提高页面渲染效率。 实际开发中，Axios结合...
Promise面试题合集(问题+答案)
实力派，无需多言！
01-12 5013
好的，让我们来总结一下.then()和.race()吧，😄的作用是接收一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调。.race()的作用也是接收一组异步任务，然后并行执行异步任务，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。结果中数组的顺序和接收到的数组顺序一致。all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；
promise面试题
江理彭于晏的博客
11-11 908
关于Promise 的问题一览 什么是 promise 传统的回调式异步操作有什么缺点？（Promise是如何解决异步操作） Promise中的异步模式有哪些？有什么区别？ 如果想 Promise.all（）和Promise.race（）传递空数组，运行结果会有什么不同？ 如何确保一个变量是可信任的 Promise（Promise.resolve方法传入不同值的处理有哪些） Promise是如何捕获异常的？与传统的 try / catch 相比有什么优势？ 1.什么是promise 下面的回答很像在背概
Promise的常见面试题
小草莓的博客
07-04 3719
一、对Promise的理解以及Promise的基本用法 二、Promise的其他常见方法 三、Promise的常见面试题 ① 多个.catch ② 多个.catch（不懂） ③ 链接.then和.catch（不懂） ④ 链接.catch（不懂） ⑤ 多个.catch（不懂） ⑥.then之间的流程 ⑦.then之间的流程 ⑧.then之间的流程 ⑨.then和.catch之间的流程（不懂） ⑩ 基础输出题 11、用Promise实现红绿灯不断交替亮
【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序
二三的博客
09-23 7730
上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！
对于promise的常见面试题总结分析
浮生离梦的博客
07-05 7614
1、了解 Promise 吗？ 1) 了解Promise，Promise是一种异步编程的解决方案，有三种状态，pending（进行中）、resolved（已完成）、rejected（已失败）。当Promise的状态由pending转变为resolved或reject时，会执行相应的方法 2) Promised的特点是只有异步操作的结果，可以决定当前是哪一种状态，任务其他操作都无法改变这个状态，也是...
有关promise的面试题
lannieZ的博客
10-22 556
问题一：promise有什么作用？ 答：promise是用来创建异步流程的，也可以解决回调地狱的问题，也让异步操作更加容易 问题二：你知道回调地狱是什么问题吗？ 答：回调函数层层嵌套构成回调地狱 问题三：promise是怎么来创建异步流程的？ 答：new Promise，给Promise构造函数传一个函数，这个函数内部就可以创建异步的任务 问题四：promise是怎么来解决回调地狱这个问题的？ 答...
async和await
狡辉两门的博客
04-30 263
消除回调 有了Promise，异步任务就有了一种统一的处理方式 有了统一的处理方式，ES官方就可以对其进一步优化 ES7推出了两个关键字async和await，用于更加优雅的表达Promise async async关键字用于修饰函数，被它修饰的函数，一定返回Promise async function method1(){ return 1; // 该函数的返回值是Promise完成后的数据 } method1(); // Promise { 1 } async function method2.
Promise理解及常见面试题目合集
weixin_43797908的博客
08-02 1461
promise背景 promise之前首先要知道因为JS是单线程的，而JS中一些常见的比如网络请求等都需要异步操作来完成，ES6之前使用回调函数解决这个问题，但是回调函数阅读不方便还会造成回调地狱，ES6中新增了解决这个问题的方法也就是Promise，这也是promise出现的背景，进一步的ES7中使用async await更进一步的解决这个问题，也是JS中异步操作的终极解决方案 1. promise的三个状态 pending，表示进行中 fulfilled也是resolved，表示成功 reje
给出js中Promise详解及用法
最新发布
04-01
### JavaScript 中 Promise 的详细解释与使用方法 #### 一、Promise 基本概念 Promise 是一种用于管理异步操作的解决方案，它提供了更清晰和可控的方式处理异步流程。简单来说，Promise 是一个容器，用来保存异步操作的结果[^3]。 Promise 对象具有三种状态： - **Pending（初始状态）**: 表示异步操作尚未完成。 - **Fulfilled（已完成状态）**: 表示异步操作成功完成。 - **Rejected（已拒绝状态）**: 表示异步操作失败并抛出了错误[^4]。 一旦 Promise 状态从 Pending 转变为 Fulfilled 或 Rejected，则其状态不可再更改。 --- #### 二、Promise 构造函数及其基本用法 Promise 使用 `new` 关键字实例化，并传入一个执行器函数作为参数。该执行器函数会立即自动调用，接受两个参数：`resolve` 和 `reject` 函数。这两个函数分别用于表示异步操作的成功或失败。 以下是创建 Promise 并使用 `.then()` 方法的例子： ```javascript const myPromise = new Promise((resolve, reject) => { const isSuccess = true; if (isSuccess) { resolve('操作成功'); // 成功时调用 resolve } else { reject('操作失败'); // 失败时调用 reject } }); myPromise.then( (value) => { console.log(value); }, // 当 Promise 履行时触发此回调 (error) => { console.error(error); } // 当 Promise 拒绝时触发此回调 ); ``` 上述代码展示了如何通过 `resolve` 和 `reject` 来控制 Promise 的状态变化。 --- #### 三、链式调用与返回值 `.then()` 方法可以返回新的 Promise 实例，从而支持链式调用。每次调用 `.then()` 都能基于前一步的操作结果继续执行逻辑[^2]。 下面是一个简单的例子展示链式调用的功能： ```javascript function addOne(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(num + 1); }, 1000); }); } addOne(5).then(result => { console.log(`第一次加一: ${result}`); // 输出 6 return result * 2; // 返回新值给下一个 then() }).then(newResult => { console.log(`乘以两倍: ${newResult}`); // 输出 12 }); ``` 在这个例子中，第一个 `.then()` 接收上一步的结果 (`6`) 并将其传递到下一步进行进一步计算。 --- #### 四、Promise.all() 方法 当需要等待多个 Promise 同时完成后才执行后续逻辑时，可使用 `Promise.all()` 方法。这个方法接收一个包含多个 Promise 的数组作为参数，并返回一个新的 Promise 实例[^1]。 如果所有的输入 Promise 都被履行，那么 `Promise.all()` 将返回这些 Promise 结果组成的数组；如果有任何一个 Promise 被拒绝，则整个过程会被中断并直接进入拒绝状态。 以下是一段演示代码： ```javascript const promise1 = Promise.resolve(1); const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 100)); const promise3 = 3; Promise.all([promise1, promise2, promise3]).then(values => { console.log(values); // 输出 [1, 2, 3] }); ``` 这里需要注意的是，只有所有子 Promise 完成后才会触发最终的 `.then()` 回调。 --- #### 五、常见错误处理方式 为了捕获可能发生的异常情况，在实际开发过程中通常会在最后附加一个 `.catch()` 方法来统一处理错误信息。 例如： ```javascript new Promise((resolve, reject) => { throw new Error('测试错误'); }) .catch(err => { console.error('捕捉到错误:', err.message); // 输出 测试错误 }); ``` 这种方式能够有效简化多层嵌套 try-catch 的复杂度，使程序更加简洁易读。 --- ### 总结 Promise 提供了一个优雅的方式来解决传统回调地狱问题，使得异步代码更容易理解和维护。无论是单独使用还是与其他工具组合应用，掌握好它的核心原理对于现代前端工程师而言都是至关重要的技能之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值