Promise全解析
Posted 饮尽杯中月
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Promise全解析相关的知识,希望对你有一定的参考价值。
1 为什么需要promise
需求
通过ajax请求id, 再根据id请求用户名, 再根据用户名获取email
回调地狱
在回调函数中嵌套回调
Promise解决了回调地狱
2 Promise的基本使用
Promise是一个构造函数, 通过new关键字实例化对象
语法
new Promise((resolve, reject)=>)
- Promise接受一个函数作为参数
- 在参数函数中接受两个参数
- resolve: 成功函数
- reject: 失败函数
promise实例
promise实例有两个属性
- state: 状态
- result: 结果
1) promise的状态
第一种状态: pending(准备, 待解决, 进行中)
第二种状态: fulfilled(已完成, 成功)
第三种状态: rejected(已拒绝, 失败)
2) promise状态的改变
通过调用resolve()和reject()改变当前promise对象的状态
示例
const p = new Promise((resolve, reject) =>
// resolve(): 调用函数, 使当前promise对象的状态改成fulfilled
resolve()
)
console.dir(p) // fulfilled
示例
const p = new Promise((resolve, reject) =>
// resolve(): 调用函数, 使当前promise对象的状态改成fulfilled
// reject(): 调用函数, 使当前promise对象的状态改成rejected
// resolve()
reject()
)
console.dir(p)
- resolve(): 调用函数, 使当前promise对象的状态改成fulfilled
- reject(): 调用函数, 使当前promise对象的状态改成rejected
promise状态的改变是一次性的
3) promise的结果
示例
const p = new Promise((resolve, reject)=>
// 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
resolve('成功的结果')
//reject('失败的结果')
)
console.dir(p)
3 Promise的方法
1) then方法
示例
const p = new Promise((resolve, reject)=>
// 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
resolve('成功的结果')
//reject('失败的结果')
)
// then方法函数
// 参数
// 1. 是一个函数
// 2. 还是一个函数
// 返回值: 是一个promise对象
p.then(()=>
// 当promise的状态是fulfilled时, 执行
console.log('成功时调用')
, () =>
// 当promise的状态是rejected时, 执行
console.log('失败时调用')
)
console.dir(p)
示例
const p = new Promise((resolve, reject)=>
// 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
//resolve('123')
reject('失败的结果')
)
// then方法函数
// 参数
// 1. 是一个函数
// 2. 还是一个函数
// 返回值: 是一个promise对象
p.then((value)=>
// 当promise的状态是fulfilled时, 执行
console.log('成功时调用', value)
, (err) =>
// 当promise的状态是rejected时, 执行
console.log('失败时调用', err)
)
console.dir(p)
- 在then方法的参数函数中, 通过形参使用promise对象的结果
then方法返回一个新的promise实例, 状态是pending
const p = new Promise((resolve, reject)=>
// 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
resolve('123')
//reject('失败的结果')
)
// then方法函数
// 参数
// 1. 是一个函数
// 2. 还是一个函数
// 返回值: 是一个promise对象
const t = p.then((value)=>
// 当promise的状态是fulfilled时, 执行
console.log('成功时调用', value)
, (reason) =>
// 当promise的状态是rejected时, 执行
console.log('失败时调用', reason)
)
console.dir(t)
promise的状态不改变, 不会执行then里的方法
// 如果promise的状态不改变, then里的方法不会执行
new Promise((resolve, reject) =>
).then((value) =>
console.log('成功')
, (reason) =>
console.log('失败')
)
在then方法中, 通过return将返回的promise实例改为fulfilled状态
// 如果promise的状态不改变, then里的方法不会执行
const p = new Promise((resolve, reject) =>
resolve()
)
const t = p.then((value) =>
console.log('成功')
// 使用return可以将t实例的状态改成fulfilled
return 123
, (reason) =>
console.log('失败')
)
t.then((value) =>
console.log('成功2', value)
, (reason) =>
console.log('失败')
)
如果在then方法中, 出现代码错误, 会将返回的promise实例改为rejected状态
// 如果promise的状态不改变, then里的方法不会执行
const p = new Promise((resolve, reject) =>
resolve()
)
const t = p.then((value) =>
console.log('成功')
// 使用return可以将t实例的状态改成fulfilled
//return 123
// 如果这里的代码出错, 会将t实例的状态改成rejected
console.log(a)
, (reason) =>
console.log('失败')
)
t.then((value) =>
console.log('成功2', value)
, (reason) =>
console.log('失败', reason)
)
2) catch方法
示例
const p = new Promise((resolve, reject) =>
// reject()
// console.log(a)
throw new Error('出错了')
)
// 思考: catch中的参数函数在什么时候被执行?
// 1. 当promise的状态改为rejected时, 被执行
// 2. 当promise执行体中出现代码错误时, 被执行
p.catch((reason) =>
console.log('失败', reason)
)
console.log(p)
4 用promise解决回调地狱
以上是关于Promise全解析的主要内容,如果未能解决你的问题,请参考以下文章
与 Promise.all() 中的解析相比,为啥在 while 循环中单独解析 Promise 数组时解析更慢? [复制]