使用async, await处理异步请求。用Promise, setTimeout函数模拟后台接口

<!DOCTYPE html>
<html>
<script type="text/javascript">
var arr=[];
var batchSize = 10;
for(i=0;i<30;i++){ arr.push(i);}
function b(startIdx, endIdx){
return new Promise((resolve, reject)=> {
setTimeout(()=>{
let arrexc = arr.slice(startIdx, endIdx);
for(j = 0; j< arrexc.length; j++){
console.log("exec", arrexc[j]);
}
console.log("called a service:" + new Date().getTime());
resolve("ok"); }, 1000);
});
//return "called a service no promise";
} async function a(){ let startIdx = 0;
let endIdx = startIdx + batchSize; while(arr.length > endIdx) {
let res = await b(startIdx, endIdx);
//let res = b();
console.log(res);
startIdx = endIdx;
endIdx = endIdx + batchSize;
}
} </script>
<button onclick="a()">click</button>
</html>

运行结果

相关知识:

Rxjs forkJoin方法:

forkJoin([
this.aService.getData(),
this.bService.getData()
]).subscribe(resArr => {
// 此时的返回结果将被按顺序放在一个数组中
aData = resArr[0];
bData = resArr[1];
}

Promise.all()方法

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
}); Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// Expected output: Array [3, 42, "foo"]

JS模拟循环批量请求后台接口的更多相关文章

  1. Node.js模拟发起http请求从异步转同步的5种方法

    使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...

  2. mock.js模拟ajax数据请求

    在我们开发过程中存在着前端页面ui完成了,但是没有接口进行联调数据的情况,现在介绍一下用mock.js来完成数据的请求.这样在后期我们的后台接口完成后只需要更改请求的接口名字即可!前提是你的模拟字段名 ...

  3. 利用在线HTTP接口测试工具ApiPost,模拟移动端请求API接口

    我们做开发一般都是在PC端,然而我们很多时候需要模拟移动端进行接口请求. 比如,当一个API需要根据用户不同的终端来返回不同的数据时,就需要一个工具来模拟不同的终端了. 利用接口测试工具ApiPost ...

  4. jQuery请求后台接口

    function test() { console.log("请求准备发送"); $.ajax({ type : "POST", url : "/ap ...

  5. 【11】ajax请求后台接口数据与返回值处理js写法

    $.ajax({ url: "/test.php",//后台提供的接口 type: "post",   //请求方式是post data:{"type ...

  6. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  7. vue-resource post请求后台接口报400(跨域问题解决方法)

    1.打开config/index.js,在proxyTable中添写如下代码 proxyTable: { '/api': { //使用"/api"来代替"http://f ...

  8. vue_axios请求后台接口cookie无法传值

    2018年3月7日: 当我们使用http向后台发送请求的时候,需要通过cookie把一些密匙传递给后台做判断授权登陆,当然前提是后台会先把cookie保持到本地. 使用vue开发的时候,会出现这个问题 ...

  9. ES6+Vue+webpack项目,在ie11中请求后台接口后数据更新,但是页面没有刷新?

    因为ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Da ...

  10. java前端跨域请求后台接口

    response.setHeader("Access-Control-Allow-Origin", "*"); /* 星号表示所有的域都可以接受, */ res ...

随机推荐

  1. [GPT] 数据分析工具可以使用机器学习技术来预测未来趋势和提供数据可视化?

      数据分析工具使用机器学习技术来预测未来趋势和提供数据可视化是靠谱的. 机器学习算法可以通过对历史数据的学习来发现数据中的模式和趋势,并利用这些模式和趋势来预测未来的趋势.这种方法已经被广泛应用于许 ...

  2. [FAQ] dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.64.dylib

    通过 ls -al /usr/local/opt 可以看到 icu4c 链接的不是 libicui18n.64.dylib. 一般是 node 版本问题会出现该提示,通过观察版本大小,决定是升级还是使 ...

  3. aspnetcore两种上传图片(文件)的方式

    aspnetcore上传图片也就是上传文件有两种方式,一种是通过form-data,一种是binary. 先介绍第一种form-data: 该方式需要显示指定一个IFormFile类型,该组件会动态通 ...

  4. Git/SourceTree版本管理

    目录 视频课程: 工作区: 文件状态: 回退版本: 合并分支 合并提交 冲突 删除分支 忽略文件 汉英对照表 多端同步 添加远程仓库 推送代码到远程仓库 拉取代码 视频课程: https://www. ...

  5. Linux grep根据关键字匹配前后几行

    在Linux环境下,查看文件内容时,很多时候需要查看指定关键字的前后几行,如查看日志文件时,如果日志文件太大,想直接在Linux 终端中查看,可以grep 'partten' filename 进行过 ...

  6. SpringBoot 利用Timer 在指定时间2小时后执行任务

    /** * @Description * @Author songwp * @Date 2022/8/5 12:51 * @Version 1.0.0 **/ @Component public cl ...

  7. cesium教程9-加载倾斜摄影并解决高度问题

    无人机航拍的倾斜摄影,用照片和视频处理生成三维模型,一般照片都带有坐标信息,所以一般都能定位的比较准确,但是经常会出现高度偏差,这个时候就需要特殊处理了. 今天航拍建模的效果如下: 这个建模没有裁剪, ...

  8. 4G EPS 中的小区选择

    目录 文章目录 目录 前文列表 小区选择 RSRP(参考信号接收功率) RSRQ(参考信号接收质量) RSSI(接收信号强度指示) SINR(信号与干扰加噪声比) 前文列表 <4G EPS 中的 ...

  9. mongodb的replication与shard分片结合使用详解

    部署脚本 #!/bin/bash #复制集配置 IP='10.0.0.12' #主机ip NA='rs3' #复制集名称 if [ "$1" = "reset" ...

  10. 一文读懂Apollo客户端配置加载流程

    SpringBoot集成Apollo源码分析 本文基于 apollo-client 2.1.0 版本源码进行分析 Apollo 是携程开源的配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修 ...