学习promise的使用

1、promise 的介绍:

一种用于解决异步编程的方案,可以解决多层回调函数嵌套造成的回调地狱问题。

2、promise的三种状态:

pending(进行中)、fulfilled(已成功)、rejected(已失败)

3、promise的特点

①promise接收一个函数作为参数,该函数的参数是resolve和reject两个函数,当异步操作成功时【pending到fufilled】,会调用resolve()函数把结果作为参数传出;当异步操作失败时【pending到rejected】,会调用reject()函数把错误进行返回。

②promise实例生成后,可使用then进行捕捉状态,若then中返回一个promise 对象则可作为下一个then的参数

4、promise的优缺点

缺点:

① promise 一旦新建就会立即执行,无法中途进行取消
②当处于pending状态时,无法知道目前处于阶段(是刚开始或即将结束)
③若不设置回调函数,promise内部抛出的错误不会反映到外部

优点:

①更好地解决了异步嵌套的问题(回调地狱)
②更好地进行错误的捕捉(异常处理)

5、promise 的使用

①pending 状态

const status = new Promise((resolve, reject) => {});
console.warn("status===", status); // pending状态

②fulfilled状态

const status = new Promise((resolve, reject) => {
    resolve(1);
});
console.warn("status===", status); // fulfilled状态
status
   .then((value) => {
     console.warn("value===", value); // 1
   })
   .catch((value1) => {
     console.warn("error===", value1);
   });

③rejected状态

const status = new Promise((resolve, reject) => {
    reject(1);
});
console.warn("status===", status); // rejected状态
status
   .then((value) => {
     console.warn("value===", value);
   })
   .catch((value1) => {
     console.warn("error===", value1); // 1
   });
### JavaScriptPromise的用法 #### 基础概念 Promise 是一种用于处理异步操作的对象,它代表了一个可能已经完成或者尚未完成的操作及其结果。一个 Promise 对象可以处于三种状态之一:Pending(等待)、Fulfilled(已成功)或 Rejected(已失败)。当 Promise 的状态变为 Fulfilled 或者 Rejected 时,相应的回调函数会被调用[^4]。 #### 创建Promise对象 可以通过 `new Promise` 构造器来创建一个新的 Promise 实例。构造器接收一个执行函数作为参数,这个函数有两个参数:`resolve` 和 `reject`。这两个函数分别用来改变 Promise 的状态为 Fulfilled 或者 Rejected。 ```javascript let promise = new Promise((resolve, reject) => { let condition = true; if (condition) { resolve("操作成功"); } else { reject("操作失败"); } }); ``` 此代码片段展示了一个简单的 Promise 创建过程,其中条件满足时调用了 `resolve` 方法,表示操作成功;如果条件不满足,则调用 `reject` 表示操作失败[^2]。 #### 处理Promise的结果 一旦 Promise 被解决或拒绝,就可以使用 `.then()` 方法来获取其结果。`.then()` 接收两个可选的回调函数作为参数,第一个是当 Promise 成功时被调用,第二个是在 Promise 被拒绝时被调用。 ```javascript promise.then( result => console.log(result), // 当 Promise 解决时运行 error => console.error(error) // 当 Promise 拒绝时运行 ); ``` 更常见的做法是分开使用 `.then()` 来处理成功的逻辑,并使用 `.catch()` 来捕获任何发生的错误: ```javascript promise .then(result => { console.log(result); // 输出 "操作成功" return "下一步"; }) .then(nextStep => { console.log(nextStep); // 输出 "下一步" }) .catch(error => { console.error(error); // 如果前面有错误则输出错误消息 }); ``` 这段代码展示了如何链式调用多个 `.then()` 方法以实现连续的任务流,并通过 `.catch()` 捕捉整个链条中的任意错误[^3]。 #### 手写简单版本的Promise 为了加深对 Promise 工作原理的理解,下面是一个非常简化的自定义 Promise 类型模拟: ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; const resolve = value => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; } }; const reject = reason => { if (this.state === 'pending') { this.state = 'rejected'; this.value = reason; } }; try { executor(resolve, reject); } catch (e) { reject(e); } } then(onFulfill, onReject) { if (this.state === 'fulfilled' && typeof onFulfill === 'function') { onFulfill(this.value); } if (this.state === 'rejected' && typeof onReject === 'function') { onReject(this.value); } } } ``` 这是一个高度简化的 Promise 版本,仅实现了核心的功能以便于学习和理解[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值