JS中的Promise?看这一篇就够用了

Promise

Promise 是异步编程的一种解决方案

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理

原理

  1. 对象的状态不受外界影响

  2. 有三种状态: pending (进行中)、fulfilled (已成功)和rejected (已失败)

  3. 一旦状态改变,就不会再变,任何时候都可以得到这个结果

  4. Promise对象的状态改变,只有两种可能:从pending变 为fulfilled和从pending变为rejected.

  5. 如果异步操作成功了(读文件成功了),从pending(进行中)变为fulfilled (已成功),从pending变为fulfilled

  6. 如果异步操作失败了(读文件失败了),从pending (进行中)变为rejected (已失败) , 从pending变为rejected

  7. 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态 特点

让异步操作有顺序本质是:
在异步操作成功后的回调函数里返回另外的promise,调用他的then方法.

Promise对象是一个构造函数,用来生成Promise实例。
步骤

let newPromise = new Promise((resolve,reject)=>{
	// code
	// 成功掉用
	resolve();
	// 失败调用
	reject();
})
newPrimise.then(()=>{
	// 这里是成功时调用的方法
},()=>{
	// 这里是失败时调用的方法
})

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

  1. resolve

将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去

2 reject

reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

then方法
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

异步操作成功后调用resolve()方法,他内部调用了then()里面的第一个参数函数

异步操作失败后调用reject()方法,他内部调用了then()里面的第二个参数函数.

函数名.then(参数1,参数2)

参数1 : 回调函数是Promise对象的状态变为resolved时调用

参数2 : (可选)第二个回调函数是Promise对象的状态变为rejected时调用

Promise方法
Promise.prototype.then() 

Promise 实例具有then方法,也就是说,then方法是定义在原型对象
为 Promise 实例添加状态改变时的回调函数

Promise.prototype.catch() 

用于指定发生错误时的回调函数。

promise名字.then((参数)=>{ //body }).catch((参数)=>{});

链式写法
在同时用多个then方法时,只需要在最后一个then方法后借一个catch方法

这样就不用每个then方法都写调用失败那个函数了;

Promise.prototype.finally()

用于指定不管 Promise 对象最后状态如何,都会执行的操作

Promise.all()
let 名字 = Promise.all([实例1,实例2,实例3,...])
名字.then((参数)=>{ //body }) // 
// 每一个promise实例都要成功才会成功,相当于是并且.

用于将多个 Promise 实例,包装成一个新的 Promise 实例

Promise.race()
let 名字 = Promise.race([实例1,实例2,实例3,...])
名字.then((参数)=>{ //body })
//有一个promise实例成功就会成功,相当于是或者.

将多个 Promise 实例,包装成一个新的 Promise 实例

Promise.allSettled()

接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束

Promise.any()

接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态
不会因为某个 Promise 变成rejected状态而结束。

<think>好的,用户现在问的是“JS中的Promise是什么”,我需要先回顾之前的对话。用户之前问了关于iterator.next的使用,特别是生成器函数和迭代器的控制流程。现在转向Promise,可能需要了解异步处理的另一种机制。 首先,用户可能已经了解生成器和迭代器在处理异步操作中的应用,比如通过yield和next来管理流程。现在他们想知道Promise,这是更常见的异步解决方案,可能想比较两者,或者补充知识。 用户身份可能是刚接触JavaScript的开发者,或者有一定基础但想深入理解异步处理的不同方法。他们可能在实际项目中遇到了回调地狱,想用Promise来优化代码结构,或者学习现代JS特性如async/await的基础。 需要解释Promise的基本概念,核心特点,状态变化,以及如何使用then、catch、finally。可能还要提到链式调用、错误处理,以及与回调函数的对比优势。同时,结合之前的生成器示例,或许可以简要提及async/await和生成器的关系,但重点应在Promise本身。 要确保回答结构清晰,分点说明,有示例代码帮助理解。可能需要覆盖创建Promise、使用then处理成功和失败,catch捕获错误,链式调用的流程,以及常用的静态方法如Promise.all。最后总结适用场景,强调Promise在异步编程中的重要性,以及如何与async/await结合使用。 检查是否有常见的误区需要澄清,比如Promise的执行时机(微任务队列),状态不可逆等。确保示例准确,比如链式调用中值的传递,错误冒泡处理等。可能用户之前接触过回调地狱,所以需要突出Promise如何解决可读性和维护性问题。 最后,保持回答简洁易懂,避免过于技术化的术语,但也要准确。可能需要对比生成器和Promise在处理异步时的不同,但根据用户当前问题,重点还是Promise本身。确保覆盖用户潜在的需求,比如如何将回调转换为Promise,或者处理多个异步任务。</think>### JavaScript 中的 Promise 是什么? **Promise** 是 JavaScript 中处理异步操作的核心对象,用于表示一个异步操作的最终完成(或失败)及其结果值。它解决了传统回调函数(Callback Hell)的嵌套问题,提供了更清晰、可链式调用的异步代码管理方式。 --- ### 核心概念 1. **状态**:Promise 有三种不可逆状态: - **Pending(等待中)**:初始状态,尚未完成或拒绝。 - **Fulfilled(已完成)**:异步操作成功完成,返回结果值。 - **Rejected(已拒绝)**:异步操作失败,返回错误原因。 2. **链式调用**:通过 `.then()` 和 `.catch()` 方法链式处理异步结果,避免回调嵌套。 --- ### 基本用法 #### 1. 创建 Promise ```javascript const promise = new Promise((resolve, reject) => { // 异步操作(如网络请求、定时器等) setTimeout(() => { const success = true; if (success) { resolve("操作成功!"); // 状态变为 Fulfilled } else { reject("操作失败!"); // 状态变为 Rejected } }, 1000); }); ``` #### 2. 处理结果 ```javascript promise .then((result) => { console.log(result); // "操作成功!"(当 resolve 被调用时) }) .catch((error) => { console.error(error); // "操作失败!"(当 reject 被调用时) }); ``` --- ### 关键特性 1. **链式调用**: ```javascript doAsyncTask() .then((result) => processResult(result)) .then((processed) => saveData(processed)) .catch((error) => handleError(error)); ``` - 每个 `.then()` 返回一个新 Promise,可继续链式调用。 - 若链中某一步抛出错误,会直接跳转到最近的 `.catch()`。 2. **错误冒泡**: ```javascript promise .then(step1) .then(step2) .catch((error) => { // 捕获链中任意步骤的错误 }); ``` 3. **静态方法**: - **`Promise.all([promises])`**:所有 Promise 成功时返回结果数组,任一失败立即拒绝。 - **`Promise.race([promises])`**:返回第一个完成(成功或失败)的 Promise 结果。 - **`Promise.resolve(value)`**:直接返回一个已完成的 Promise。 - **`Promise.reject(error)`**:直接返回一个已拒绝的 Promise。 --- ### 示例:网络请求封装 ```javascript function fetchData(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response); } else { reject(new Error("请求失败")); } }; xhr.onerror = () => reject(new Error("网络错误")); xhr.send(); }); } // 使用 fetchData("https://api.example.com/data") .then((data) => console.log(data)) .catch((error) => console.error(error)); ``` --- ### 与 async/await 结合 Promise 是 `async/await` 语法的基础,后者是 Promise 的语法糖: ```javascript async function loadData() { try { const data = await fetchData("https://api.example.com/data"); console.log(data); } catch (error) { console.error(error); } } ``` --- ### 总结 - **Promise 是什么**:异步操作的容器,支持链式调用和集中错误处理。 - **解决的问题**:回调地狱、异步代码可读性差、错误难以追踪。 - **适用场景**:网络请求、文件读写、定时任务等异步操作。 - **现代替代方案**:`async/await`(底层仍基于 Promise)。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值