要用到ES6的 Pormise
函数和async/await
函数;
首先了解一下什么是 Pormise
函数和async/await
函数
-
Pormise
函数简单的说就是用来处理异步操作的,可以让我们写异步调用的时候写起来更加优雅,更加美观便于阅读。 可以参考Promise 详情讲解 -
async/await
函数 是声明异步函数 可参考async/await详解
什么时候用到呢?
- 回调地狱(调接口的时候连续套四五层,这是很恐怖的事情);
- 上一层逻辑没执行完不让走下一层逻辑
// 成功执行就用resolve返回一个结果,
// 如果执行失败则用reject返回结果*/
var Pro = new Promise(function (resolve, reject) {
// 一段耗时间的代码,这里用定时器代替(一般用在请求接口)
setTimeout(function () {
// resolve 代表成功了,可以执行下面的代码了
resolve('请继续执行 over');
}, 1000)
})
Pro.then(function (res) {
// 这里收到成功的回调了就可以写下面的代码了
console.log(res);
})
进阶
function Pro(val) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(console.log(val))
}, 1000)
})
}
/* 我们再来看看如何使用这个函数,
下面有两种调用方式*/
//第一种调用方式
Pro('第一步')
.then(Pro('第二步'))
.then(Pro('第三步'))
.then(Pro('第四步'))
//第二种调用方式
let res1 = Pro('第一步')
let res2 = res1.then(Pro('第二步'))
let res3 = res2.then(Pro('第三步'))
let res4 = res3.then(Pro('第四步'))
让for循环规规矩矩的走完
for 循环 i 已经走到10了,但是 第一次循环逻辑还没走完,这样需要一次性等待多次循环的时间且无法中途取消。如何让for循环规规矩矩的走完?(Promise 和 async 配合使用)
function Pro(i) {
return new Promise(function (resolve, reject) {
// 一段耗时间的代码,这里用定时器代替
setTimeout(function () {
// resolve 代表成功了,可以执行下面的代码了
resolve(`正在执行第${
i}遍`);
}, 1000)
})
}
async function getData() {
for (let i = 0; i < 20; i++) {
let res = await Pro(i);
console.log(res);
}
}
getData()