Vue的异步操作Promise
- Promise的基本使用:当我们需要执行异步操作时,传统的异步操作代码看起来十分的混乱,多次回调,给人一种灾难般的感受,我们称这种情况为回调地狱,为了解决这一问题,Vue为我们提供了异步操作的一种形式,Promise
示例代码:每隔三秒打印不同的内容
<script>
// 使用setTimeout
setTimeout(() => {
console.log("Hello world");
}, 5000)
// 使用promise
// promise(参数:函数(参数:resolve,reject))
// 本身又是函数
new Promise((resolve, reject) => {
resolve()
}).then(() => {
setTimeout(() => {
console.log("Hello world")
console.log("Hello world")
console.log("Hello world")
console.log("Hello world")
console.log("Hello world")
console.log("Hello world")
}, 3000)
return new Promise((resolve, reject) => {
resolve()
}).then(() => {
setTimeout(() => {
console.log("Hello zyt")
console.log("Hello zyt")
console.log("Hello zyt")
console.log("Hello zyt")
console.log("Hello zyt")
console.log("Hello zyt")
}, 6000)
return new Promise((resolve, reject) => {
resolve()
}).then(() => {
setTimeout(() => {
console.log("Hello ltn")
console.log("Hello ltn")
console.log("Hello ltn")
console.log("Hello ltn")
console.log("Hello ltn")
console.log("Hello ltn")
}, 9000)
})
})
})
// 当使用到异步操作时,一般会用到Promise进行封装
// Promise对网络请求的代码进行了分类
new Promise((resolve, reject) => {
// 在这里执行网络请求
setTimeout(() => {
// 执行resolve将请求到的数据data传递到then中执行
// 处理成功,跳转到then
resolve("张大宝")
// 处理失败,跳转到catch
reject("刘小宝")
}, 3000)
}).then((data) => {
// 在这里对网络请求的数据进行操作
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
}).catch((erro) => {
console.log(erro);
})
</script>
运行结果:
- Promise的另外处理形式:resolve当请求执行成功时调用,执行then函数,reject当请求调用失败时调用,可执行错误处理
示例代码:
<script>
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve("Hello world")
reject("error message")
}, 5000)
}).then((data) => {
console.log(data);
}, (error) => {
console.log(error);
})
</script>
运行结果:
3. Promise的链式调用:当我们需要执行异步请求时,请求的次数有多次,则在使用Promise时,可以提高代码的可读性,在代码风格上看起来,仿佛时一条长长的链子,因此称为Promise的链式调用;
示例代码:请求获取到一个数据a,以此调用将a后面拼接上他后面的字母,如ab,并且传给下一次请求接着调用:
<script>
// 获取数据a,自己处理完再接着传递给下一个函数拼上b,在拼上c
new Promise((resolve) => {
setTimeout(() => {
resolve('a')
}, 2000)
}).then((res) => {
// 自己处理自己的数据
console.log('自己处理数据', res);
// 对第一次结果进行处理,并且赋值给下一次处理then
return new Promise((resolve) => {
resolve(res + 'b')
})
}).then((res) => {
console.log('自己处理数据', res);
// 对第二次结果进行处理
return new Promise((resolve) => {
resolve(res + 'c')
})
}).then((res) => {
console.log('自己处理数据', res);
return new Promise((resolve) => {
resolve(res + 'd')
})
}).then((res) => {
console.log('自己处理数据', res);
return new Promise((resolve) => {
resolve(res + 'e')
})
}).then((res) => {
console.log('自己处理数据', res);
})
setTimeout(() => {
console.log('-------------------------');
}, 2000)
</script>
运行结果:
上述代码看起来还是有点复杂,我们想着,是否能够对上述代码进行简写:
Promise的简写:这里去掉了每一次新的请求都需要新new一个Promise,直接return Promise对象并且调用它的resolve方法即可:,运行结果
//Promise的简写
new Promise((resolve) => {
setTimeout(() => {
resolve('a')
}, 4000)
}).then((res) => {
// 自己处理自己的数据
console.log('自己处理数据', res);
// 对第一次结果进行处理,并且赋值给下一次处理then
return Promise.resolve(res + 'b')
}).then((res) => {
console.log('自己处理数据', res);
// 对第二次结果进行处理
return Promise.resolve(res + 'c')
}).then((res) => {
console.log('自己处理数据', res);
return Promise.resolve(res + 'd')
}).then((res) => {
console.log('自己处理数据', res);
return Promise.resolve(res + 'e')
}).then((res) => {
console.log('自己处理数据', res);
})
setTimeout(() => {
console.log('-------------------------');
}, 4000)
运行结果:
Promise更简洁的写法:直接return一个结果,不需要调用Promise
// Promise更简洁写法
new Promise((resolve) => {
setTimeout(() => {
resolve('a')
}, 6000)
}).then((res) => {
// 自己处理自己的数据
console.log('自己处理数据', res);
// 对第一次结果进行处理,并且赋值给下一次处理then
return res + 'b'
}).then((res) => {
console.log('自己处理数据', res);
// 对第二次结果进行处理
return res + 'c'
}).then((res) => {
console.log('自己处理数据', res);
return res + 'd'
}).then((res) => {
console.log('自己处理数据', res);
return res + 'e'
}).then((res) => {
console.log('自己处理数据', res);
})
setTimeout(() => {
console.log('================================');
}, 6000)
运行结果:
- Promise处理失败结果:
示例代码:
// Promise处理失败
new Promise((resolve) => {
setTimeout(() => {
resolve('a')
}, 6000)
}).then((res) => {
// 自己处理自己的数据
console.log('自己处理数据', res);
// 对第一次结果进行处理,并且赋值给下一次处理then
// return Promise.reject('error message')
throw 'error message'
}).then((res) => {
console.log('自己处理数据', res);
// 对第二次结果进行处理
return res + 'c'
}).then((res) => {
console.log('自己处理数据', res);
return res + 'd'
}).then((res) => {
console.log('自己处理数据', res);
return res + 'e'
}).then((res) => {
console.log('自己处理数据', res);
}).catch((err) => {
console.log(err);
})
运行结果:
5. Promise的all方法:当所有异步操作执行完成后,将执行的结果保存到一个数组内:
示例代码:
<script>
// Promise.all([
// new Promise((resolve, reject) => {
// $ajax({
// url: 'url1',
// success: function (data) {
// resolve(data)
// }
// })
// }),
// new Promise((resolve, reject) => {
// $ajax({
// url: 'url2',
// success: function (data) {
// resolve(data)
// }
// })
// }),
// ]).then((results) => {
// console.log(results[0]); //保存url1的结果
// console.log(results[1]);//保存url2的结果
// })
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'zyt',
age: 21,
heigth: 1.8
})
}, 2000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: 'ltn',
age: 22,
heigth: 1.6
})
}, 1000)
}),
]).then((results) => {
console.log(results);
})
</script>
运行结果: