VUE Promise详解

一、前言

Promise意在让异步请求逻辑代码变得干净、直观、井然有序。

Promise在设计上具有原子性,即只有三种状态:等待(Pending)、成功(Fulfilled)、失败(Rejected)。在调用支持Promise的异步方法时,逻辑变得非常简单,在大规模的软件工程开发中具有良好的健壮性。

二、基本语法

要想给一个函数赋予Promise能力,就要先创建一个Promise对象,并将其作为函数值返回。Promise对象要求传入一个函数,并带有resolvereject参数。这是两个用于结束Promise等待的函数,对应的状态分别是成功和失败。

将新创建的Promise对象作为异步方法的返回值,所有的状态就可以使用它所提供的方法进行控制了。 

三、异步操作

创建 Promise对象后,就可以进行异步操作,并通过resolve (value) reject (reason)方法来控制Promise的原子状态。

  • resolve(value)方法控制的是当前Promise对象是否进入成功状态,一旦执行该方法并传入有且只有一个返回值,Promise便会从等待状态Pending)进入成功状态Fulfilled)Promise也不会再接收任何状态的变。
  • reject (reason)方法控制的是当前Promise对象是否进入失败阶段,与resolve方法相冋,一旦进入失败阶段就无法再改变。

其中,在Promise的首层函数作用域中一旦出现throw语句,Promise对象便会直接进入失败状态,并以throw语句的抛出值作为错误值进行错误处理。

 

 但是,return语句并不会使Promise对象进入成功状态,而会使Promise停留在等待状态。所以在Promise对象的执行器executor)内需要谨慎使用return语句来控制代码流程

四、处理 Promise 状态

resolve(value)reject(reason)方法对应,Promise对象有两个用于处理Promise对象状态变化的方法。

这两个方法都会返回一个Promise对象,Promise对象的组合便会成为一个Promise对象链,呈流水线的模式作业。

 Promise链式处理默认被实现,即.then(onFulfilled).catch(onRejected)会处理在onFulfilledonRejected中所返回或抛出的值。

  • 如果onFulfilledonRejected中所返回的值是一个Promise对象,则该Promise对象会被加入到Promise的处理链中。
  • 如果onFulfilledonRejected中返回的值并不是一个Promise对象,则会返回一个己经进入成功状态的Promise对象。
  • 如果onFulfilledonRejected中因为throw语句而抛出一个错误err,则会返回一个已经进入失败状态的Promise对象。

之所以说Promise对象链呈流水线的模式进行作业,是因为在Promise对象对自身的onFulfilledonRejected响应器的处理中,会对其中返回的Promise对象进行处理。

其内部会将这个新的Promise对象加入到Promise对象链中,并将其暴露出来,使其继续接受新的Promise对象的加入。只有当Promise对象链中的上一个Promise对象进入成功或失败阶段,下一个Promise对象才会被激活,这就形成了流水线的作业模式。

Promise对象链还有一个十分实用的特性–Promise对象状态具有传递性。

如果Promise对象链中的某一环出现错误,Promise对象链便会从出错的环节开始,不断向下传递,直到出现任何一环的Promise对象对错误进行响应为止。

五、高阶方法

5.1 Promise.all(iterable)

该方法可以传入一个可迭代对象(如数组),并返回一个Promise对象,该Promise对象会在当可迭代对象中的所有Promise对象都进入完成状态(包括成功和失畋)后被激活。

  • 如果可迭代对象中的所有Promise对象都进入了成功状态,那么该方法返回的Promise对象也会进入成功状态,并以一个可迭代对象来承载其中的所有返回值。
  • 如果可迭代对象中的所有Promise对象存在一个进入了失败状态,那么该方法返回的Promise对象也会进入失败状态,并以那个进入失败状态的错误信息作为自己的错误信息。

 5.2 Promise.race(iterable)

Promise .race (iterable)方法同样也接受一个包含若干个Promise对象的可迭代对象,但不同的是这个方法会监听所有的Promise对象,并等待其中的第一个进入完成状态的Promise对象,一旦有第一个Promise对象进入了完成状态,该方法返回的Promise对象便会根据这第一个完成的Promise对象的状态而改变。

 注意⚠️,其他方法仍然会继续执行。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js 中的 Promise 对象可以使用 `.then()` 方法来处理异步操作的结果。当 Promise 对象的状态变为成功时(即 `resolve` 方法被调用),`.then()` 方法会执行其回调函数;当状态变为失败时(即 `reject` 方法被调用),则会执行 `.catch()` 方法指定的回调函数。 `.then()` 方法可以接受两个参数,第一个是成功时的回调函数,第二个是失败时的回调函数(可选)。如果没有指定第二个回调函数,则在发生错误时会自动转到 `.catch()` 方法指定的回调函数。 例如,下面的代码演示了如何在 Vue.js 中使用 `.then()` 方法: ```javascript axios.get('/api/user/1') .then(function (response) { // 处理成功的响应 console.log(response.data); }) .catch(function (error) { // 处理失败的响应 console.log(error); }); ``` 在这个例子中,我们使用 Axios 库向后端发送请求。如果请求成功,`.then()` 方法会将响应的数据传递给回调函数,并将其打印到控制台中;如果请求失败,则会将错误信息传递给 `.catch()` 方法指定的回调函数。 需要注意的是,`.then()` 方法返回的是一个新的 Promise 对象,因此可以使用链式调用来处理多个异步操作: ```javascript axios.get('/api/user/1') .then(function (response) { // 处理第一个请求的响应 console.log(response.data); // 发送第二个请求 return axios.get('/api/user/2'); }) .then(function (response) { // 处理第二个请求的响应 console.log(response.data); }) .catch(function (error) { // 处理失败的响应 console.log(error); }); ``` 在这个例子中,我们在第一个请求成功后,使用 `.then()` 方法发送了第二个请求。如果第二个请求也成功,则会将响应的数据传递给第二个回调函数。如果任何一个请求失败,则会跳转到 `.catch()` 方法指定的回调函数。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值