JS 怎么让整体的for同步执行而for中的异步函数异步执行
发布网友
发布时间：2022-04-07 08:58
共5个回答
懂视网
时间：2022-04-07 13:20
解决for循环中异步请求顺序不一致的问题
工作中遇到一个问题
for循环，再把循环出来的ID再进行二次请求
这就导致一个问题
请求结果返回顺序不一致
原因：异步请求会把回调事件放入微任务事件队列，宏任务执行完毕再执行微任务，具体参考事件队列机制
【相关课程推荐：JavaScript视频教程】
解决方法：
通过map方法进行循环请求
将异步请求方法封装起来，返回一个promise
这样将会返回一个具有多个promise的数组
通过promise.all()方法把promise包装成一个新的promise实例
// 通过Promise把所有的异步请求放进事件队列中
getInfo(item ,index) {
const ms = 1000 * Math.ceil(Math.random() * 3)
return new Promise((resolve,reject) => {
setTimeout(() => {
axios.get(id).then((result) => {
resolve(result)
})
}, ms)
})
}
// 返回多个promise
let promise = arr.map((item,index) = > {
arr.forEach((item, index) => {
return getInfo(item, index)
})
})
// 对返回的promise数组进行操作
Peomise.all(promise).then((allData) => {
arr.forEach((item, index) => {
// ......
})
})本文来自 js教程 栏目，欢迎学习！
热心网友
时间：2022-04-07 10:28
看了你的问题，才百度学习的Promise，不知道是不是你要的效果。
function async1(){return new Promise(function(resolve, reject) {
setTimeout(function() {//setTimeout模拟异步
console.log('async1 is done');
resolve('async1 value');
}, 6000);
});
}
function async2(){
return new Promise(function(resolve, reject) {
setTimeout(function() {//setTimeout模拟异步
console.log('async2 is done');
resolve('async2 value');
}, 3000);
});
}
function async3(){//async3不需要then，所以没写return new Promise
setTimeout(function() {
console.log('async3 is done');
}, 1000);
}
let p;
for(let i=0;i<4;i++){
p=async1().then(async2);
}
p.then(async3);
热心网友
时间：2022-04-07 11:46
setTimeout(_ => {
console.log('async1: ' + new Date().toTimeString());
callback();
}, 2000);
}
function async2(){
return new Promise(resolve => {
setTimeout(_ => {
console.log('async2: ' + new Date().toTimeString());
resolve();
}, 2000);
})
}
function async3(){
return Promise.resolve().then( _ => console.log('async3: ' + new Date().toTimeString()));
}
//将async1封装为promise方式
function async1_promise(callback){
return new Promise((resolve, reject) => {
try{
async1((...args) => {
typeof callback === 'function' && callback.apply(null, args);
resolve();
});
}catch(e){
reject(e);
}
});
}
function test1(){
//先执行4次async1, 执行完上1个再执行下一个
//然后执行4次async2, 执行完上1个再执行下一个
//再执行1次async3
async1_promise()
.then(_ => async1_promise())
.then(_ => async1_promise())
.then(_ => async1_promise())
.then(_ => async2())
.then(_ => async2())
.then(_ => async2())
.then(_ => async2())
.then(_ => async3());
}
function test2(){
//和test1相同, 只是写法简化, 如果要执行很多次可以这么写
var step = Promise.resolve();
for(let i = 0; i++ < 4; step = step.then(_ => async1_promise()));
for(let i = 0; i++ < 4; step = step.then(_ => async2()));
step.then(_ => async3());
}
function test3(){
//先执行4次async1, 无需等待上1个执行完就执行下一个
//然后执行4次async2, 无需等待上1个执行完就执行下一个
//再执行1次async3
Promise.all(Array.from(new Array(4), _ => async1_promise()))
.then(_ => Promise.all(Array.from(new Array(4), _ => async2())))
.then(_ => async3());
}
如果要测试,注意不要同时运行, 需要单独运行test1, test2, test3, 在浏览器控制台查看效果.
热心网友
时间：2022-04-07 13:20
for (let i = 0, k = 0; i < 4; i++){
async1(success(){
async2().then(()=>{
if ( ++k == 4 ) abc();
});
});
}
}
x(async3);
热心网友
时间：2022-04-07 15:12
for(var a=0;a<5;a++){
action1();
}
}
function action1(){
console.log('haha');
}
整个for循环是同步执行的，但是action1()是异步执行的追问很感谢你的回答，但是恐怕你没get到点。以你写的代码为例，我需要在确保5次action1执行完毕之后执行代码，但是用Promise和await好像并不能达到要求。我需要的是类似如下代码：
action()
nextAction() //确保在action内部的5次action1()运行之后，才运行该函数
按照你现在提供的代码仍然会先运行nextAction()只要action1是个时间较久的异步函数
