- 了解Promise
mounted(){
// 1. 基本用法 执行完testPromise 后执行 testPromise1 整个执行完 用了 9 秒
this.testPromise().then((res) => {
console.log(res)
this.testPromise1().then((res1) => {
console.log(res1)
}).catch((err1) => {
console.log(err1)
})
}).catch((err) => {
console.log(err)
})
//输出
// 三秒执行结果
// 三秒后的输出结果
// 六秒执行结果
// 六秒后的输出结果
// 2. 都知道promise构造函数是可以在函数的后面 无线 .then 但是.then 怎么拿到上一个.then的返回值呢？
// 错误用法 此用法输出顺序为 三秒执行结果 三秒后的输出结果 六秒执行结果 六秒后的输出结果 undefined
// 执行完成 需要 9秒
this.testPromise().then((res) => {
console.log(res)
// 错误用法 then 里面接受不到 testPromise1 的 resolve值
return this.testPromise1().then((res1) => {
console.log(res1)
}).catch((err1) => {
console.log(err1)
})
}).then((res) => {
console.log(res) //undefined
})
// 正确用法 打印顺序为 三秒执行结果 三秒后的输出结果 六秒执行结果 六秒后的输出结果
// 执行完成 需要 9秒
this.testPromise().then((res) => {
console.log(res)
return this.testPromise1()
}).then((res) => {
console.log(res)
})
// 3. Promise.all 的用法
// all 中的两个promise异步 是同时开始执行的 then中的返回值是等待最后一个执行完才会输出结果
// 执行顺序为 三秒执行结果 六秒执行结果 ["三秒后的输出结果", "六秒后的输出结果"]
// 执行完成 需要 6秒
Promise.all([this.testPromise(),this.testPromise1()]).then((res) => {
//这里输出的 res 是testPromise()，testPromise1() resolve 返回值的 集合
console.log(res)
})
// 4. Promise.race的用法
//race 中的两个promise异步 是同时开始执行的，then中的返回值是最先完成异步的返回值
//这个方法的使用场景：可用于超时操作，设置一个请求超时的时间，如果先返回超时的函数，说明超时
// 执行 顺序 三秒执行结果 三秒后的输出结果 六秒执行结果
// 执行完成 需要 6秒
Promise.race([this.testPromise(),this.testPromise1()]).then((res) => {
//res 是最先执行完异步所返回的值
console.log(res)
})
},
methods: {
testPromise(){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('三秒执行结果')
resolve('三秒后的输出结果')
}, 3000)
})
},
testPromise1(){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('六秒执行结果')
resolve('六秒后的输出结果')
}, 6000)
})
}
}
- 循环多个 Promise 异步函数
// 输出结果为 [ 0, 1, 2 ] 执行了 3 秒
// 此方法用在 一个循环体中，拿到每个异步请求返回的值 ， 并等待循环中的 所有异步函数执行完，再进行下一步操作！
// 如 node.js 中 拿到购物车表的数据，只有商品的id ，没有商品的具体信息， 需要去遍历购物车的表， 再用每一个商品id 去遍历商品表，去拿商品具体信息！
mounted(){
let array = []
for(let i=0; i<3; i++){
array.push(this.testForPromise(i))
}
Promise.all(array).then((res) => {
console.log(res) // [ 0, 1, 2 ]
})
},
methods:{
testForPromise(num){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(num)
}, 3000)
})
}
}
