Promise
1. Promise 的基本使用
- 什么情况会使用 Promise
一般情况下是有
异步操作
时,使用 Promise 对这个异步操作进行封装 - { resolve, reject } => then/catch
- 三种状态: pending(等待状态)、fulfill(满足状态[一般处于该状态下])、reject(拒绝状态)
主要针对回调函数(链式编程)
- 链式情况(极端情况) <= 回调函数中回调函数情况
new Promise((resolve, reject) => {
// 第一次网络请求
setTimeout(() => {
// 成功的时候调用resolve
resolve()
// 失败的时候调用reject
reject("error message")
}, 1000)
})
.then(() => {
// 第一次处理的代码
console.log("Hello World")
return new Promise((resolve, reject) => {
// 第二次网络请求
setTimeout(() => {
resolve()
}, 2000)
})
})
.then(() => {
// 第二次处理的代码
console.log("Hello Vue")
return new Promise((resolve, reject) => {
// 第三次网络请求
setTimeout(() => {
resolve()
}, 3000)
})
})
.then(() => {
// 第三次处理的代码
console.log("Hello CLI")
})
- 非链式情况(正常情况)
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功的时候调用resolve
resolve("this is a promise function")
// 失败的时候调用reject
reject("error message")
}, 1000)
})
.then(data => {
// 成功的时候进入then
console.log(data)
})
.catch(err => {
// 失败的时候进入catch
console.log(err)
})
2. Promise 的链式调用
小案例
依次在后面加入 111,,222
/* 省略Promise.resolve */
new Promise(resolve => {
setTimeout(() => {
resolve("aaa")
}, 1000)
})
.then(res => {
console.log(res, "第一层处理代码")
return res + "111"
})
.then(res => {
console.log(res, "第二层处理代码")
return res + "222"
})
.then(res => {
console.log(res, "第三层处理代码")
// throw 等同于 Promise.reject <== 拒绝的情况
throw "error message"
})
.catch(err => {
// 终止代码 不再执行下去
console.log(err)
})
3. Promise 的 all 方法
- Promise.all() 方法将结果输出为一个数组
Promise.all([
// 请求1
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ name: "Tom", age: 18 })
}, 1000)
}),
// 请求2
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ name: "Bob", age: 19 })
}, 1000)
}),
]).then(results => {
console.log(results)
})