网站首页 > 博客文章 正文
1.Promise
ES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎么处理。
// 语法new Promise(/下面定义的函数是executor/function(resolve, reject) {...})
[点击并拖拽以移动]1.1 executor
executor是一个带有resolve和reject参数的函数
executor函数在 Promise构造函数执行时立即执行,被传递resolve和reject函数(executor函数在Promise构造函数返回新建的对象前被调用)
executor内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise对象的状态改为fulfilled即完成,或者发生错误时将promise对象的状态改为rejected即失败。
如果在executor函数中抛出一个错误,那么该promise状态为rejected,executor函数的返回值被忽略。
executor中,resolve或reject函数只能执行其中的一个
promise的状态:
pending:初始状态,不是成功或失败
fulfilled:意味着操作成功完成
rejected:意味着操作失败
Promise.then(onFulfilled, onRejected)
参数是2个函数,根据Promise的装态来调用不同的函数,fulfilled走OnFulfilled函数,rejected走onRejected函数。then的返回值是一个新的promise对象,执行任意一个函数,对这个promise对象来说就是其返回值。调用任意一个函数后,其返回值可以被后续的then方法继续捕捉。
catch(onRejected)
为当前Promise对象添加一个拒绝回调,返回一个新的Promise对象。
我们来看一个简单的例子:
var myPromise = new Promise(function (resolve, reject){//resolve('hello')console.log('~~~~~~~~~~')reject('hello world!')})
console.log(myPromise)
var pro1 = myPromise.then((value) => console.log(1, myPromise, value),(reason) => console.log(2, myPromise, reason) // 不管哪个回调函数被执行,新的promise对象的状态都会变为fulfilled)
// 可以继续被捕捉var pro2 = pro1.then((value) => console.log(3, myPromise, value),(reason) => console.log(4, myPromise, reason))
pro2.then(value => {console.log(5, pro2, value)return Promise.reject('pro2 rejected') // 将新的promise对象的状态改为rejected},reason => console.log(6, pro2, reason)).catch(reason => {console.log(7, reason)return Promise.resolve(reason + '*') // 将新的promise对象的状态改为resolved}).then(value => console.log(8, value),reason => console.log(9, reason)
)
/*Promise { 'hello world!' }
2 Promise { 'hello world!' } 'hello world!'
3 Promise { 'hello world!' } undefined
5 Promise { undefined } undefined
7 'pro2 rejected'
8 'pro2 rejected*'
*/
对Promise的几点总结:Promise:resolve, reject两个函数无返回值then方法返回一个新的Promise对象,新对象的打印结果为then方法执行的函数的返回值;catch方法也是返回一个新的Promise对象。then的回调函数:fulfilled成功的状态 ==> 会调用onfulfilled回调函数,其参数为valuerejected失败的状态 ==> 会调用onrejected回调函数,其参数为reason不管哪一个回调函数执行后,新的promise对象的状态就变为fulfilled
catch只有一个回调函数==> reason如果不能catch到,以当前对象(pro1)的结果作为新对象(pro2)的结果;如果catch到,新的promise对象的状态就变为fulfilled
再来看一个例子:
function runAsync(){return new Promise(function(resolve, reject){setTimeout(function(){console.log('do something')resolve('ok')}, 3000) // 3000毫秒也就是3秒})}
runAsync().then(value => {console.log(value)return Promise.reject(value + '*****') // 将新的promise对象的状态改为rejected}).catch(reason => {console.log(reason)return Promise.resolve(reason + '~~~~~~~~~~~') // 将新的promise对象的状态改为resolved}).then(value => {console.log(value)console.log('Promise END')})
console.log('========FIN========')
/*========FIN========do somethingokok*****ok*****~~~~~~~~~~~Promise END*/
- 上一篇: 宇宙厂:如何找到未使用 JS/CSS 并移除?
- 下一篇: js问题:怎样极致快速的搞懂promise
猜你喜欢
- 2024-10-11 JavaScript,ES6,Promise对象,异步编程的一种解决方案,代码
- 2024-10-11 使用 Matter.js 创建物理模拟:牛顿摆
- 2024-10-11 一首歌带你搞懂Promise(歌曲promise)
- 2024-10-11 如何用Vue3和p5.js绘制一个交互式波浪图
- 2024-10-11 IT技术栈:Javascript中Promise的pending、fulfilled和rejected
- 2024-10-11 Node.js中的Promise:回调的替代方案
- 2024-10-11 我终于真正理解 Promise 了!(promise 的理解)
- 2024-10-11 探究JS中Promise函数then的奥秘(js中promise什么意思)
- 2024-10-11 关于js中的promise,与其说是一种语法还不如说是一种思想!
- 2024-10-11 前端-JavaScript异步编程中的Promise
你 发表评论:
欢迎- 最近发表
-
- 给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)
本文暂时没有评论,来添加一个吧(●'◡'●)