使用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. 一个可一键生成短视频的AI大模型,亲测可用

    大家好,我是 Java陈序员. 自从 OpenAI 发布 Sora 文本生成视频模型后,文本生成视频的 AI 技术引起了无数圈内圈外人士的关注和实验. 今天,给大家介绍一个大模型,可一键生成短视频. ...

  2. 再聊解除HiddenApi限制

    炒冷饭,再聊聊大家都知晓的隐藏接口的限制解除. 说明 由于我们容器产品的特性,需要将应用完整的运行起来,所以必须涉及一些隐藏接口的反射调用,而突破反射限制则成为我们实现的基础.现将我们的解决方案分享给 ...

  3. 羽夏看Linux内核——简述

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...

  4. ITSM2023年十大功能趋势[采和]

    总体描述:更加人性化,引入自动化相关的设计和技术,更加实用好用.1. 100%服务目录服务目录必须完全贴合用户方的运维实际开展的 服务清单,而不是想当然的抄书或者臆想!都2023年了,还有完全不着调的 ...

  5. InternLM2 Demo实操-书生浦语大模型实战营第二期第2节作业&大语言模型3

    大语言模型-3.InternLM2 Demo实操 书生浦语大模型实战营第二期第二节作业 本文包括第二期实战营的第2课作业的相关内容.本来是想在学习笔记中给InetrnLM官方教程做做补充的,没想到官方 ...

  6. FTP主动模式和被动模式(2)

    防火墙对FTP的影响 ASPF 多通道协议 应用层程序有些使用的是单通道协议,有些使用的是多通道协议. 单通道协议 例如http协议,整个协议交互过程中,服务端和客户端只建立一个连接,并且服务端固定使 ...

  7. ansible(6)--ansible的copy和fetch模块

    1. copy模块 功能:从 ansible 服务端主控端复制文件到远程主机: copy模块的主要参数如下: 参数 说明 src 复制的源文件路径,若源文件为目录,默认进行递归复制,如果路劲以&quo ...

  8. 鸿蒙HarmonyOS实战-ArkUI事件(组合手势)

    一.组合手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式.手势操作可以包括点击.滑动.双击.捏合等动作,用于实现不同的功能和操作. HarmonyOS中常见的手势操作及其 ...

  9. IDEA文件夹注释插件TreeInfotip使用

    目录 前景提要 环境整合 构建工具(参考工具部署方式) 下载插件 使用 前景提要 很多开源代码或者公司代码,因为层级比较多,所以查阅困难,发现一个TreeInfotip插件可以对这样的文件做注释 环境 ...

  10. 前端如何对cookie加密

    在前端对 Cookie 进行加密时,你可以使用加密算法对 Cookie 的值进行加密,然后再将加密后的值存储到 Cookie 中.常用的加密算法包括对称加密算法(如 AES)和非对称加密算法(如 RS ...