当前位置: 首页 > news >正文

理解ES6中的Promise

ECMAScript6新增的引用类型promise,是异步编程的一种解决方案,可以通过new操作符来实例化,相对于传统的解决方案(回调地狱)更加强大。所谓promise,简单说就是一个容器,里面保存着某个未来才会结束的事件的结果,从语法上说,promise是一个对象,从他 可以获取异步操作的消息,promise提供了统一的API,各种异步操作都可以用同样的方法进行处理,
1 自己身上有all reject resolve这几个方法
2 原型上有then catch 等方法
3 一旦建立,就无法取消,也不支持进度通知

1、什么是回调地狱?
由于回调函数是异步的,每一层的回调函数都需要依赖上一层的回调执行完,所以形成了层次嵌套的关系,最终形成了回调地狱

doSomething(function(result) {doSecondThing(result, function(newResult) {doThirdThing(newResult, function(finalResult) {console.log(finalResult)}, failureCallback)}, failureCallback)
}, failureCallback)

通过promise改写上面的代码

doSomething().then(function(result) {return doSecondThing(result)
})
.then(function(newResult) {return doThirdThing(newResult)
})
.then(function(finalResult) {console.log(finalResult)
})
.catch(failureCallback)

链式操作降低了编码难度,代码的可读性明显增强。

2、promise的理解:
2.1 实例对象中的一个属性 PromiseState:
有三种状态

  • pending(待定)
  • fulfilled(兑现,有时候也称为解决resolved)
  • rejected(拒绝)

2.2 实例对象中的另一个属性 PromiseResult:
保存着对象 成功或失败的结果
resolve
reject

// resolve 解决 函数类型的数据
// reject 拒绝 函数类型的数据
const p1 = new Promise ((resolve, reject) => {console.log(1) // 执行器函数会在promise内部立即同步执行setTimeout(() => {let a = 30if (a <= 30) {resolve() // 将promise对象的状态设置为 成功} else {reject() // 将promise对象的状态设置为 失败}})
})
// 调用then方法
p1.then(() => {// 状态成功的回调alert('恭喜您中奖')
}, () => {// 状态失败的回调alert('谢谢惠顾')
})
console.log(2)

2.3 promise的基本流程
1、new Promise() pending状态;
2、执行异步操作,如果成功了执行resolve(),promise对象的状态为resolved,如果失败了执行jeject(),promise对象的状态为rejected;
3、then()方法被执行,第一个参数为成功的回调函数,第二个参数为失败的回调函数,并且返回一个新的promise。

2.4 Promise的函数方法

// 如果传入的参数为非promise类型的对象,则返回的结果为成功的promise对象
let p1 = Promise.resolve(123)
console.log(p1)
// 如果传入的参数为promise类型的对象,则参数的结果决定了resolve的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {reject('Error)
}))
p2.catch(err => {console.log(err)
})
console.log(p2)
// 返回的结果永远都是失败的
let p1 = Promise.reject(456)
let p2 = Promise.reject(new Promise((resolve, reject) => {resolve('OK)
}))
console.log(p1, p2)
let p1 = new Promise((resolve, reject) => {resolve('OK)
})
let p2 = Promise.resolve(123)
let p3 = Promise.reject(456)
// 传入的promises数组的结果都为resolved,则返回的新的promise结果为成功
const res1  = Promise.all([p1,p2])
console.log(res1)
// 传入的promises数组的结果有一个为rejected,则返回的新的promise结果为失败
const res2  = Promise.all([p1,p3])
console.log(res2)
// Promise.race()方法,接受一个promises数组参数,返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态
let p1 = new Promise((resolve, reject) => {resolve('OK)
})
let p2 = Promise.resolve(123)
let p3 = Promise.reject(456)
const res = Promise.race([p1,p2,p3])
console.log(res)

2.5 改变promise对象状态的方式

const p = new Promise ((resolve, reject) => {setTimeout(() => {let a = NANif (a <= 30) {// 第一种方式,resolve函数resolve()} else if(a > 30) {// 第二种方式,reject函数reject()} else {// 第三种方式,throwthrow new Error('报错了')}}10)
})
console.log(p)

2.6 当一个promise指定多个成功/失败回调参数,都会调用

const p = new Promise ((resolve, reject) => {let a = NANif (a <= 30) {resolve(a)} else  {reject()} 
})
// 指定回调1
p.then(res => {console.log(res)
})
// 指定回调2
p.then(res => {alert(res )
})

2.7 promise对象then方法返回结果特点
promise.then()返回的新的promise的结果状态由then指定的回调函数执行结果决定。

const p = new Promise ((resolve, reject) => {resolve('OK')
})
// 执行then方法
const result = p.then(res => {console.log(res)// 第一张情况,抛出错误throw new Error('报错了') // 返回rejected状态// 第二张情况,返回一个非promise类型的对象return 123  // 返回resolved状态// 第三张情况,返回一个promise类型的对象return new Promise ((resolve, reject) => {reject()  // 返回结果根据此状态决定})
}, error => {console.log(error )
})

2.8 promise如何串联多个任务
原理是then方法的返回结果也是一个promise对象

const p = new Promise ((resolve, reject) => {setTimeout(() => {resolve('OK')}10)
})
p.then(res => {return new Promise ((resolve, reject) => {resolve('success')})
}).then(res => {console.log(res) // 'success'
})then(res => {console.log(res) // undefined
})

2.9 promise异常穿透
当使用promise的then链式调用,可以在最后指定失败的回调,前面任何操作发生异常,都会传达到最后失败的回调中处理。

const p = new Promise ((resolve, reject) => {setTimeout(() => {resolve('OK')}10)
})
p.then(res => {console.log(123)throw '报错了'
}).then(res => {console.log(456) 
}).then(res => {console.log(789) 
}).catch(err => {console.log(err) // '报错了'
})

2.10 如何中断promise链
只有返回一个pending状态的promise对象,才能中断

const p = new Promise ((resolve, reject) => {setTimeout(() => {resolve('OK')}10)
})
p.then(res => {console.log(123)return new Promise(() => {}) // 中断promise链 不执行后面的方法
}).then(res => {console.log(456) 
}).catch(err => {console.log(err)
})

相关文章:

  • Linux服务器运维常用命令大全
  • 不同conda 不同cuda版本方法
  • /etc/profile.d/conda.sh: No such file or directory : numeric argument required
  • Python基础教学:航天工程领域的精确计算和金融领域的精确计算,分别采用的小数保留位数的方法有哪些?有什么区别?-由Deepseek产生
  • Oracle03-PL/SQL Developer
  • Vue学习001-创建 Vue 应用
  • 循环神经网络及其变体
  • Python+QT远程控制助手-ver2
  • Dify 插件工具:远程连接配置指南
  • NY271NY274美光科技固态NY278NY284
  • 车载通信架构 --- IP ECU 在连接被拒绝后的重连机制
  • C++第一阶段——语言基础与核心特性
  • 项目 : 基于正倒排的boost搜索引擎
  • AI for Science:智能科技如何重塑科学研究
  • 基于机器学习的逐巷充填开采岩层运动地表沉降预测
  • 408第一季 - 数据结构 - B树与B+树
  • Spring Boot Web 应用开发
  • 6,TCP客户端
  • 【技术实战】工业级设备健康管理系统搭建全栈指南:从数据采集到预测性维护
  • LeetCode 2300.咒语和药水的成功对数
  • 设计企业公司网站/新闻源软文发布平台
  • 2017网站建设报价单/2021热门网络营销案例
  • 什么网站做简历免费下载/上海今天刚刚发生的新闻
  • 焦作网站建设兼职/抖音搜索seo
  • 网站建设需要几十万/深圳全网营销平台排名
  • 自己怎么注册一个网站/seo排名优化推广