说说你对promise的了解

最新推荐文章于 2025-10-09 16:56:37 发布
原创 最新推荐文章于 2025-10-09 16:56:37 发布 · 124 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

本文详细解读Promise/A+规范，阐述Promise的状态转换、构造函数用法和then方法，以及如何处理异步操作的fulfilled和rejected。

  • 依照 Promise/A+ 的定义，Promise 有四种状态：

    • pending: 初始状态, 非 fulfilled 或 rejected.

    • fulfilled: 成功的操作.

    • rejected: 失败的操作.

    • settled: Promise已被fulfilled或rejected，且不是pending

  • 另外， fulfilled与 rejected一起合称 settled

  • Promise 对象用来进行延迟(deferred) 和异步(asynchronous) 计算

Promise 的构造函数

  • 构造一个 Promise，最基本的用法如下：
var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });
  • Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为thenable）。它的使用方法如下：
promise.then(onFulfilled, onRejected)
  • 接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在rejected的时候被调用，接收参数就是 future，onFulfilled 对应resolve, onRejected对应 reject
做为一个老前端，说说对Promise的了解
weixin_40682342的博客
06-08 59
Promise 是 JavaScript 中用于表示异步操作最终完成或失败的对象。它代表一个尚未完成但预计将来会完成的操作。始终处理错误：每个 Promise 链都应该以.catch()或 try/catch 结束保持链式扁平：避免嵌套 Promise，保持代码可读性合理使用 async/await：简化异步代码，但注意不要滥用利用静态方法等处理复杂场景考虑取消机制：长时间运行的异步操作应提供取消选项性能优化：批量处理异步操作，避免不必要的 Promise 包装。
ES6中的Promise、async、await，超详细讲解！
共同学习，共同成长
08-06 3000
Promise是es6引入的异步编程新解决方案，Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法，语法上promise就是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果，本篇文章主要介绍了ES6中的Promise对象与async和await方法
谈谈我对Promise的理解
weixin_42856661的博客
08-10 1190
1.Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决 方案（回调函数和事件）更合理和更强大。 2、Promise对象的状态不受外界影响，有3个状态： 1）pending 初始状态 2）fulfilled 成功状态 3）rejected 失败状态 3、Promise的状态一旦改变，就不会再变。 4、Promise,一旦新建，它就...
聊一聊Promise
最新发布
m0_74916313的博客
10-09 1285
Promise 是一个对象，它代表了一个未来才会知道结果的事件（通常是一个异步操作）。它相当于一个容器，保存着一个异步操作的最终完成（成功）或失败的状态和结果值。简单来说，所有的异步场景，都可以看做是一个异步任务，每个异步任务，在 JS 中应该表现为一个对象，该对象称之为Promise对象，也叫做任务对象每个任务对象，都应该有两个阶段、三个状态两个阶段：unsettled（未敲定阶段）、settled（已敲定阶段）
谈谈对于Promise简单的理解
weixin_60146725的博客
01-07 1869
在这里简单的说一下我对promise浅显的理解： promise是ES6提出的 称之为 “回调地狱的超级英雄” 什么是回调地狱呢？ 这就是一个很典型的回调地狱 这样的代码 逻辑性比较强 而且易读性不高 牵一发而动全身 如果有一次执行错误下面的回调就不会再继续执行..... 举例子说明一下： 在平常工作时调接口数据 (当然这只是我举的一些例子 仅此而已 各位后端大佬们才不会写这么折磨人的接口的........) 我们在调接口拿数据时下一个接口的调用需要依赖上一次接口返回的信息 就好比...
谈谈你对promise的理解
zhangyiyang111的博客
03-13 1197
谈谈你对promise的理解 ​ 这种做法在逻辑比较复杂的回调嵌套中会相当复杂；也叫做回调地狱； ​ promise用来将这种繁杂的做法简化，让程序更具备可读性，可维护性； ​ promise内部有三种状态，pedding，fulfilled，rejected； ​ pedding表示程序正在执行但未得到结果，即异步操作没有执行完毕，fulfilled表示程序执行完毕，且执行成功， ​ rejected表示执行完毕但失败；这里的成功和失败都是逻辑意义上的；并非是要报错。 ​ 其实，promise和回调函数一
谈谈对Promise的理解
hddlsj的博客
02-20 5325
promise
请说说你对PromiseA+规范的了解
王铁柱666的博客
10-12 480
PromiseA+规范是关于JavaScript Promise实现的一种标准规范，旨在统一不同Promise库之间的行为，确保其在使用上的一致性和可互操作性。PromiseA+规范定义了Promise的三种状态：pending（等待）、fulfilled（已实现）和rejected（已拒绝）。这些状态代表了异步操作的执行状态。PromiseA+规范定义了Promise对象的then方法，用于注册Promise的成功和失败回调函数。一、Promise的状态。四、链式调用与错误处理。
【Promise】Promise的理解与使用 （一）
aaaa_aaab的博客
08-14 925
​ Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。Pending 正在做。。。Resolved 完成这个承诺Rejected 这个承诺没有完成，失败了​ Promise 用来预定一个不一定能完成的任务，要么成功，要么失败。
AngularJS 中的Promise — $q服务详解
11-22
先说说什么是Promise，什么是$q吧。Promise是一种异步处理模式，有很多的实现方式，比如著名的Kris Kwal’s Q还有JQuery的Deffered。 什么是Promise 以前了解过Ajax的都能体会到回调的痛苦，同步的代码很容易调试，...
Promise 了解多少？
m0_74223728的博客
10-22 833
Promise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它由社区最早提出和实现， ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。Promise对象有以下两个特点。Promise对象代表一个异步操作，。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是 “ 承诺 ” ，表示其他手段无法改变。Promise对象的状态改变，。
Promise
Wen_Tao98的博客
11-25 594
Promise 什么是promise 解决地狱回调 可以链式调用 有三种状态。 promise有哪些API. 应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request() 名词约定 promise（首字母小写）对象指的是“Promise实例对象” Promise首字母大写且单数形式，表示“Promise构造函数” Promises首字母大写且复数形式，用于指代“Promises规范” 什么是Promise？ Promise，
说说你对 Promise 的了解？
qq_61913550的博客
11-14 269
2.fulfilled 已兑现/已完成 表示操作完成 ---请求成功的操作----->调用resolve函数。3.rejected 已拒绝/已失败 表示操作失败 ---请求失败的操作----->调用reject函数。reject函数-->可以由catch方法第一个函数提供/then方法第二个函数提供。2.catch方法 当promise实例变为rejected就会执行catch方法。1.pendding 待定 进行中 表示操作正在进行 ----不做任何操作。特点：可以链接调用，避免了层层嵌套的回调函数。
谈谈你对promise的理解?
zhaojiaxing123的博客
04-17 707
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。1.promise其实就是一个对象或者说是构造函数2.promise的出现（es6） 就是解决异步编程和回调地狱等问题，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案（简化代码等等）
谈谈你对 Promise 的理解
qq_29850249的博客
11-08 394
定义 Promise 是一种解决一步编程的方案，比其他传统方案（比如回调函数和事件）更合理和强大。它是位解决一步处理回调地狱问题而产生的。 三种状态 Promise 的三种状态有 pending (初始状态)、 fulfilled (成功状态)、 rejected (失败状态) 两个特点 Promise 对象的状态不受外界影响 状态不可逆 三个缺点 无法取消，新建后立即执行，无法中途取消 如果不设置回调函数， Promise 内部抛出的错误不会反映到外部 如果处于 Pending 状态时，无法得知目标
Promise学习笔记
晴宇
04-03 1563
#目录 [TOC] 一、Promise的理解与使用 1、概念: ​ Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。 Pending 正在做。。。 Resolved 完成这个承诺 Rejected 这个承诺没有完成，失败了 ​ Promi
对Promise的了解
weixin_60597494的博客
03-14 531
promise是什么： Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 对象有以下两个特点: 对象的状态不受外界影响，Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rej.
谈谈自己所理解的promise
假面猫的博客
05-10 851
哎，自己的学习能力还是弱了些。 所以去年的时候，在腾讯课堂上买过一个关于promise的课程。当时了解了用法，但是平时并没有去使用promise来进行异步流程控制。 首先来说说什么是promise？ promise就是ES6推出的解决异步流程的一个方案。用来避免Callback Hell。 比如说，我们最为常见的异步场景就是ajax。还记得xhr对象里面open（）的第三个参数么？ 没错，...
说说nextTick使用和原理
06-10
<think>嗯，用户想要了解VuenextTick的使用方法和实现原理。结合提供的引用资料和我的知识库，需要系统地梳理这个主题。用户引用了三段资料，重点涵盖了使用场景和原理。引用[1]强调nextTick确保在DOM更新后执行操作，引用[2]说明它解决无法即时获取最新DOM的问题，引用[3]则提供了具体代码示例和性能优化视角。核心需求清晰：既要会用，又要懂底层机制。使用层面可以从基础用法展开，同步和异步两种调用方式都很重要。引用[3]的代码示例特别直观，应该保留在回复中。用户可能实际遇到过DOM获取不及时的问题，可以补充类似"点击计数后获取按钮文本"的场景，加深理解。原理层面需要分层解析：首先解释Vue异步更新机制的必要性（避免重复渲染，引用[1][3]都提到性能优化），然后切入nextTick的实现方案。源码中的优先级调度是个关键点，包括Promise优先、降级到setImmediate/setTimeout的策略。要强调eventloop中的执行位置，这直接决定了为什么能获取到更新后的DOM。需要特别注意用户可能存在的误区：比如误以为nextTick会"加速"DOM更新（实际只是延迟回调），或者混淆Vue2/Vue3的实现差异（Vue3不再需要MutationObserver）。回复中要隐含纠正这些潜在错误认知。最后准备的问题要引导深入学习：使用场景差异题能检验概念掌握，原理对比题考察机制理解，应用场景题则关联实际开发。特别加入"性能影响"这个问题，因为引用[3]明确提及优化意图，用户可能关心实践中的副作用。</think> 以下是对 Vue 中 `nextTick` 的使用方法及实现原理的详细解析，结合源码机制说明： --- ### **一、核心作用** `nextTick` 用于在 **Vue 完成 DOM 更新后** 延迟执行回调函数，解决数据变更后无法立即获取更新后 DOM 的问题。 **示例场景**： ```javascript import { ref, nextTick } from 'vue'; const count = ref(0); async function increment() { count.value++; console.log(document.getElementById('counter').textContent); // 输出旧值 0 await nextTick(); // 等待 DOM 更新 console.log(document.getElementById('counter').textContent); // 输出新值 1 } ``` > 点击按钮后，若不使用 `nextTick`，打印的 DOM 文本仍为旧值。 --- ### **二、使用方法** #### 1. **同步写法**（回调函数） ```javascript nextTick(() => { // DOM 已更新 console.log("DOM更新完成"); }); ``` #### 2. **异步写法**（Promise/Await） ```javascript await nextTick(); // 后续代码在DOM更新后执行 ``` --- ### **三、实现原理（Vue3源码分析）** #### 1. **异步更新机制** - Vue 通过 **批处理更新** 优化性能：响应式数据变更时，不会立即更新 DOM，而是将更新任务推进队列。 - 当所有同步代码执行完毕（即 **一次事件循环结束**），才会执行队列中的 DOM 更新任务[^1]。 #### 2. **`nextTick` 源码关键逻辑** ```typescript // 源码简化版（vue-next core/scheduler.ts） const resolvedPromise = Promise.resolve(); // 创建微任务Promise export function nextTick(fn?: () => void): Promise<void> { const p = currentFlushPromise || resolvedPromise; return fn ? p.then(fn) : p; } ``` **执行流程**： 1. 当调用 `nextTick()` 时： - 若有回调函数 `fn`，将其绑定到 `currentFlushPromise`（当前更新队列的 Promise）的 `then()` 链上。 - 若无参数，直接返回该 Promise。 2. **`currentFlushPromise` 的生成**： - Vue 会在数据变更后启动异步更新任务，将此任务推进微任务队列（优先使用 `Promise.resolve()`）。 - 执行时机：当前同步代码结束后，微任务阶段执行 DOM 更新，**完成后**自动触发 `nextTick` 回调。 #### 3. **执行顺序演示** ```javascript count.value++; // 数据变更，触发异步更新任务（微任务） nextTick(() => { console.log("nextTick回调"); // 步骤3 }); console.log("同步代码结束"); // 步骤1 ``` **结果顺序**： 1. 同步代码结束 2. DOM 更新（微任务） 3. nextTick回调（微任务回调） > `nextTick` 的回调一定在 **DOM 更新微任务之后** 执行，故能获取最新 DOM[^2][^3]。 --- ### **四、设计动机** 1. **性能优化** 合并多次数据变更为单次 DOM 更新，避免重复渲染（如连续修改多次数据仅触发一次视图更新）[^3]。 2. **保证逻辑正确性** 确保在依赖 DOM 的操作（如获取元素尺寸）执行前，视图已完成渲染。 --- ### 相关问题 1. **`nextTick` 与 `setTimeout(fn, 0)` 有何区别？** 前者使用微任务（优先级更高），后者是宏任务（可能被浏览器渲染延迟）[^2]。 2. **为什么 Vue 选择微任务实现异步更新？** 微任务在浏览器渲染前执行，能最大限度保证更新及时性。 3. **在哪些场景必须使用 `nextTick`？** 依赖更新后 DOM 的操作（如滚动定位、动态计算元素尺寸）。 4. **Vue2 和 Vue3 的 `nextTick` 实现差异？** Vue2 优先用微任务，降级方案为宏任务；Vue3 直接基于 `Promise` 实现，不再支持 IE。 5. **频繁调用 `nextTick` 是否影响性能？** 回调函数会被合并到同一个微任务中执行，不会造成多次重渲染。 > 源码参考：Vue3 `scheduler.ts` 中的 `queueJob` 和 `queuePostFlushCb` 函数[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值