js循环调用axios异步请求,实现同步
准备:
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)
})
结果:

情况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异步请求,实现同步的更多相关文章
- 前端总结·基础篇·JS(四)异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- vue 中使用 async/await 将 axios 异步请求同步化处理
1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...
- 利用async和await异步操作解决node.js里面fs模块异步读写,同步结果的问题
async await 解决异步问题,这两个关键字是es7提出的,所以测试,node和浏览器版本提高一些 async await 操作基于promise实现的 async await这两个关键字是一起 ...
- $.getJSON异步请求和同步请求
先说一下我遇到的问题吧,我之前的一个函数想调用上一个函数的返回值,但是它的返回值一直为空,后来翻了一些资料才明白是异步请求在作怪,不多说,看例子,这是我之前有返回值函数的代码: function ge ...
- NuxtJS如何利用axios异步请求
第一种:使用nuxt 提供的 Axios插件 @nuxtjs/axios 1.安装:npm install @nuxtjs/axios -d 2.配置 nuxt.config.js exports d ...
- 微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...
- JS原生对象实现异步请求以及JQ的ajax请求四种方式
一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...
- for循环中嵌套异步请求问题
for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:
- 解决easyui jQuery JS的for循环调用ajax异步问题
由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行,解决此方法有两种 1.设置ajax参数async为false,即与js同步,默认是true(异步). 这里首先引 ...
随机推荐
- 前端工作面试HTML相关问题
前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...
- 用vue开发一个猫眼电影web app
前言:之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有 ...
- VasSonic Android源码解析
VasSonic是腾讯推出的为了提高H5页面首屏加载速度而推出的高性能Hybrid框架,目前广泛应用在QQ商城等Hybrid界面中,以提高用户体验. https://github.com/Tencen ...
- 从0搭建vue后台管理项目到颈椎病康复指南(一)
网上搜索了很久Vue项目搭建指南,并没有找到写的比较符合心意的,所以打算自己撸一个指南,集合众家之所长(不善于排版,有点逼死强迫症,如果觉得写的有问题,可以留言斧正,觉得写的太差的,可以留言哪里差, ...
- react 实用项目分享-mock server
使用react16+router4+mobx+koa2+mongodb做的mock平台 moapi-cli 本地工具版,一行命令 ,方便个人使用 安装 npm i moapi-cli -g 使用 mo ...
- TensorFlow使用GPU训练时CPU占用率100%而GPU占用率很低
在训练keras时,发现不使用GPU进行计算,而是采用CPU进行计算,导致计算速度很慢. 用如下代码可检测tensorflow的能使用设备情况: from tensorflow.python.clie ...
- java中时间的规范是按美国,SimpleDateFormat怎么处理
题目3.2: 如果时间的规范是按美国,怎么处理? import java.text.ParseException;import java.text.SimpleDateFormat;import ja ...
- for 循环打印直角三角形、正三角形、棱形
学习目标: 熟练掌握 for 循环的使用 例题: 1.需求:打印直角三角形 代码如下: // 左直角 for(int i = 0; i < 5; i++) { for(int j = 0; j ...
- css过渡效果和盒子缩放大小的结合
给盒子一个鼠标经过时放大里面的图片效果在css中使用过渡效果transition结合 <html lang="en"> <head> <meta ch ...
- 高精度加法(C++实现)
高精度加法 简介 用于计算含有超过一般变量存放不下的非负整数 高精度加法这个过程是模拟的小学竖式加法计算 步骤 以下有顺序之分 数组清零 输入 获取长度 逆置 字符型数字转成对应的整型数字 计算并输出 ...