网站首页 > 博客文章 正文
在前期博文《Vue进阶(二十一):vue开发之es6知识储备》中粗略讲解了异步请求的处理机制Promise,此篇博文带大家更进一步的了解一下Promise。Promise意在让异步请求逻辑代码变得干净和直观,让异步请求逻辑代码变得井然有序。
Promise在设计上具有原子性,即只有三种状态:等待(Pending)、成功(Fulfilled)、失败(Rejected)。在调用支持Promise的异步方法时,逻辑变得非常简单,在大规模的软件工程开发中具有良好的健壮性。
(1)基本语法
创建Promise对象:
要想给一个函数赋予Promise能力,就要先创建一个Promise对象,并将其作为函数值返回。Promise对象要求传入一个函数,并带有resolve和reject参数。这是两个用于结束Promise等待的函数,对应的状态分别是成功和失败。
function asyncMethod(...args){
return new Promise((resolve,reject)=>{
//...
})
}
将新创建的Promise对象作为异步方法的返回值,所有的状态就可以使用它所提供的方法进行控制了。
异步操作
创建了 Promise对象后,就可以进行异步操作,并通过resolve (value)和reject (reason)方法来控制Promise的原子状态。
resolve(value)方法控制的是当前Promise对象是否进入成功状态,一旦执行该方法并传入有且只有一个返回值,Promise便会从等待状态(Pending)进入成功状态(Fulfilled)。之后,Promise也不会再接收任何状态的改变。
reject (reason)方法控制的是当前Promise对象是否进入失败阶段,与resolve方法相冋,一旦进入失败阶段就无法再改变。
new Promise((resolve,reject)=>{
api.call('fetch-data',(err,data)=>{
if(err) return reject(err)
resolve(data)
})
})
其中,在Promise的首层函数作用域中一旦出现throw语句,Promise对象便会直接进入失败状态,并以throw语句的抛出值作为错误值进行错误处理。
(new Promise(function() {
throw new Error ('test')
)))
.catch(err =>console.error(err))
但是,return语句并不会使Promise对象进入成功状态,而会使Promise停留在等待状态。所以在Promise对象的执行器(executor)内需要谨慎使用return语句来控制代码流程。
处理Promise的状态
与resolve(value)和reject(reason)方法对应的是,Promise对象有两个用于处理Promise对象状态变化的方法。
这两个方法都会返回一个Promise对象,Promise对象的组合便会成为一个Promise对象链,呈流水线的模式作业。
asyncMethod()
.then((...args)=>args /*...*/)
.catch(err=>console.error(err))
Promise链式处理默认被实现,即.then(onFulfilled)或.catch(onRejected)会处理在onFulfilled和onRejected中所返回或抛出的值。
- 如果onFulfilled或onRejected中所返回的值是一个Promise对象,则该Promise对象会被加入到Promise的处理链中。
- 如果onFulfilled或onRejected中返回的值并不是一个Promise对象,则会返回一个己经进入成功状态的Promise对象。
- 如果onFulfilled或onRejected中因为throw语句而抛出一个错误err,则会返回一个已经进入失败状态的Promise对象。
之所以说Promise对象链呈流水线的模式进行作业,是因为在Promise对象对自身的onFulfilled和onRejected响应器的处理中,会对其中返回的Promise对象进行处理。
其内部会将这个新的Promise对象加入到Promise对象链中,并将其暴露出来,使其继续接受新的Promise对象的加入。
只有当Promise对象链中的上一个Promise对象进入成功或失畋阶段,下一个Promise对象才会被激活,这就形成了流水线的作业模式。
Promise对象链还有一个十分实用的特性:Promise对象的状态具有传递性。
如果Promise对象链中的某一环出现错误,Premise对象链便会从出错的环节开始,不断向下传递,直到出现任何一环的Promise对象对错误进行响应为止。
高级使用方法
Promise.all(iterable)
该方法可以传入一个可迭代对象(如数组),并返回一个Promise对象,该Promise对象会在当可迭代对象中的所冇Promise对象都进入完成状态(包括成功和失畋)后被激活。
- 如果可迭代对象中的所有Promise对象都进入了成功状态,那么该方法返回的Promise对象也会进入成功状态,并以一个可迭代对象来承载其中的所有返回值。
- 如果可迭代对象中的所有Promise对象存在一个进入了失败状态,那么该方法返回的Promise对象也会进入失败状态,并以那个进入失败状态的错误信息作为自己的错误信息。
Promise.all(promises)
.then(values=>{
//...
})
.catch(err=>console.error(err))
Promise.race(iterable)
Promise.race (iterable)方法同样也接受一个包含若干个Promise对象的可迭代对象,但不同的是这个方法会监听所有的Promise对象,并等待其中的第一个进入完成状态的Promise对象,一旦有第一个Promise对象进入了完成状态,该方法返回的Promise对象便会根据这第一个完成的Promise对象的状态而改变。
Promise.race(promises)
.then(values=>{
//...
})
.catch(err=>console.error(err))
猜你喜欢
- 2024-09-26 Vue3全新的前端构建工具vite学习(前端vue项目开发流程及架构)
- 2024-09-26 Vue核心知识:8.5如何在vuex中使用异步修改?推荐行为触发action
- 2024-09-26 Vue.nextTick 的工作机制(vue中nexttick原理)
- 2024-09-26 ES6(四)用Promise封装一下IndexedDB
- 2024-09-26 Vue项目处理错误上报如此简单(vue项目中遇到的问题,你是怎么解决)
- 2024-09-26 Vue开发:通过异步的方式加载vue组件
- 2024-09-26 Vue.js项目模板搭建(vue.js环境搭建)
- 2024-09-26 vue.js深入篇(一、响应式原理)(vue响应式源码解析)
- 2024-09-26 Vue中的nextTick方法是用来做什么的?
- 2024-09-26 Vue - 简单实现一个命令式弹窗组件
你 发表评论:
欢迎- 最近发表
-
- 给3D Slicer添加Python第三方插件库
- Python自动化——pytest常用插件详解
- Pycharm下安装MicroPython Tools插件(ESP32开发板)
- IntelliJ IDEA 2025.1.3 发布(idea 2020)
- IDEA+Continue插件+DeepSeek:开发者效率飙升的「三体组合」!
- Cursor:提升Python开发效率的必备IDE及插件安装指南
- 日本旅行时想借厕所、买香烟怎么办?便利商店里能解决大问题!
- 11天!日本史上最长黄金周来了!旅游万金句总结!
- 北川景子&DAIGO缘定1.11 召开记者会宣布结婚
- PIKO‘PPAP’ 洗脑歌登上美国告示牌
- 标签列表
-
- ifneq (61)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)