一.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（已完成、成功）
第三种状态：reject（已拒绝、失败）
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) //rejected
- 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('成功的结果')
// reject('失败的结果')
})
// then 方法
// 其接受两个参数
// 1.是一个函数
// 2.还是一个函数
//返回值：是一个promise对象
p.then((value) => {
// 当promise的状态是fulfilled时，执行
console.log('成功时调用', value)
}, (season) => {
// 当promise的状态是rejected时，执行
console.log('失败时调用', season)
})
console.dir(p) // 成功的结果
- 在 then 方法的参数函数中，通过形参使用 promise 对象的结果
- then 的返回值是一个 promise 对象
示例
const p = new Promise((resolve, reject) => {
resolve('成功的结果')
})
// then 方法
//返回值：是一个promise对象
const t = p.then((value) => {
console.log('成功时调用', value)
}, (season) => {
console.log('失败时调用', season)
})
console.dir(t)
// 经过调试，新产生的 t 的状态应该为 pending
//经调用 then 的第一个参数函数后，状态改变为fulfille,可以继续调用 t.then
由于 then 返回值是一个 promise 对象，所以可以继续调用 then方法，形成链式操作
- new Promise((resolve, reject) => {}).then().then()
如果 p 内的执行体不调用参数函数，那么 then 调用哪个函数？
- then 不执行参数参数，返回新的promise对象，其状态为pending
如何改变新promise对象的状态
- 第一个函数参数内使用
return，promise对象的状态变为 fulfilled - 第一个函数内出现代码错误，promise对象的状态变为 rejected
2）catch 方法：捕获错误
示例
const p = new Promise((resolve, reject) => {
reject('失败的结果')
})
// 什么情况下，catch 中的参数函数会执行
// 1、当promise的状态为rejected时，会执行
// 2、当promise执行体中的代码出现错误时
p.catch(() => {
console.log('失败')
})
4 promise常见的写法
示例
new Promise((resolve, reject) => {
resolve()
}).then((value) => {
// 成功时执行
console.log('成功')
}).catch((season) => {
//失败时
console.log('失败')
})
\
