准备:

const axios = require('axios'); // axios请求 
const res = [];
const arr = ["a", "b", "c", "d", "e"]; a(i) {
return new Promise((resolve, reject) => {
console.log("异步请求开始:", i);
axios.post(url, {params})
.then(({ data }) => {
if (data.code == 200) {
console.log("异步请求响应结束:", i);
resolve();
}
});
});
} b(item) {
console.log("进入res:", item);
res.push(item);
}

情况1: forEach的内部等待异步请求

arr.forEach(async (item, i) =>{
console.log("循环",i,item);
await a(i)
b(item)
})
 console.log('res:',res);

结果:

情况2: forEach外部等待forEach内部的异步请求执行完成

let asyncFun = [];
arr.forEach((item, i) =>{
console.log("循环",i,item);
asyncFun.push(a(i))
b(item)
})
Promise.all(asyncFun).then(() => {
console.log("res:",res);
});

结果:

情况3: 既需要map内部同步执行,又需要map外部同步执行

注意这里用的是map()Promise需要一个返回值,    
map()方法会得到一个新的数组并返回;(适用于要改变数据值的时候)   
forEach()方法不会返回执行结果,而是undefined;(适用于并不打算改变数据的时候,而只是想用数据做一些事情:比如存入数据库或打印出来) Promise.all(
arr.map((item, i) => {
return new Promise(async (resolve, reject) => {
console.log("循环", i, item);
await a(i);
b(item);
resolve();
});
})
).then(() => {
console.log("res:", res);
});

结果:

js循环调用axios异步请求,实现同步的更多相关文章

  1. 前端总结·基础篇·JS(四)异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  2. vue 中使用 async/await 将 axios 异步请求同步化处理

    1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...

  3. 利用async和await异步操作解决node.js里面fs模块异步读写,同步结果的问题

    async await 解决异步问题,这两个关键字是es7提出的,所以测试,node和浏览器版本提高一些 async await 操作基于promise实现的 async await这两个关键字是一起 ...

  4. $.getJSON异步请求和同步请求

    先说一下我遇到的问题吧,我之前的一个函数想调用上一个函数的返回值,但是它的返回值一直为空,后来翻了一些资料才明白是异步请求在作怪,不多说,看例子,这是我之前有返回值函数的代码: function ge ...

  5. NuxtJS如何利用axios异步请求

    第一种:使用nuxt 提供的 Axios插件 @nuxtjs/axios 1.安装:npm install @nuxtjs/axios -d 2.配置 nuxt.config.js exports d ...

  6. 微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...

  7. JS原生对象实现异步请求以及JQ的ajax请求四种方式

    一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...

  8. for循环中嵌套异步请求问题

    for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:

  9. 解决easyui jQuery JS的for循环调用ajax异步问题

    由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行,解决此方法有两种 1.设置ajax参数async为false,即与js同步,默认是true(异步). 这里首先引 ...

随机推荐

  1. APICloud首款全功能集成开发工具重磅发布,彰显云端一体理念

    近日,APICloud重磅推出首款云端一体的全功能集成开发工具--APICloud Studio 2.为了更深入了解这款开发工具的特性及优势,APICloud CTO 邹达针对几个核心问题做出了解答. ...

  2. 2022DASCTF X SU 三月春季挑战赛 Calc

    查看代码 #coding=utf-8 from flask import Flask,render_template,url_for,render_template_string,redirect,r ...

  3. JSDOM基础

    JavaScript 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM 模型被构造为对象的树: HTML DOM 树 JavaScript 能够改变页 ...

  4. window10解决需要管理员删除文件的权限问题

    1.快捷键:"win+R",输入:gpedit.msc  回车 2.依次点击:计算机配置-windows配置-安全设置-本地策略-安全选项 3.将两个管理员批准模式和管理员状态三者 ...

  5. jboss学习4-jboss7开发配置指南

    1      Jboss7下载与安装1.1     官方下载路径:http://www.jboss.org/jbossas/downloads,目前最新稳定版本为7.1.1 final,分别有zip和 ...

  6. Django高级之-缓存

    一 缓存介绍 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会消 ...

  7. Java-GUI编程之事件处理

    事件处理 前面介绍了如何放置各种组件,从而得到了丰富多彩的图形界面,但这些界面还不能响应用户的任何操作.比如单击前面所有窗口右上角的"X"按钮,但窗口依然不会关闭.因为在 AWT ...

  8. Struts2-day2总结

    一.结果页面配置 1.全局结果页面 2.局部结果页面 ****注:如果同时配置了全局页面和局部页面配置,那么最终将以局部为准 result标签当中的type属性 默认值:dispatcher做转发 r ...

  9. spring-xml实现aop-通知的种类

    如果本代码有疑问,请访问spring-aop快速入门或者spring-aop动态代理技术(底层分析) 1.导入aop的相关坐标 <dependency> <groupId>or ...

  10. paramterType和resultType的区别

    resultType是sql语句查询结果集的封装类型,也就是说把sql查询的结果封装在bean里返回回去,是存数据用的. paramType是从传过来的Bean中取数据放进例如insert语句的val ...