使用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] 如何配置抓包工具以解密HTTPS流量才能看到明文的域名地址

    要配置抓包工具以解密HTTPS流量,您需要执行以下步骤: 1. 安装抓包工具:首先,确保您已经安装了支持HTTPS解密的抓包工具,例如Wireshark. 2. 获取SSL证书:抓包工具需要使用目标网 ...

  2. dotnet core 3.1 将 UWP 控件嵌入到 WPF 应用 收到 UIA 消息主线程卡住

    本文记录一个问题,此问题是在 .NET Core 3.1 的 WPF 应用里面,嵌入 UWP 控件之后,在收到 UIA 的消息时,可能让主线程卡住.暂时此问题还不知道具体的复现步骤,此问题预计和 WP ...

  3. WPF 漂亮的现代化控件 新 ModernWPF 界面库

    这是一个在 GitHub 上完全开源的库,有十分漂亮的界面,整个都是 Win10 风,界面部分和默认 UWP 相近 这个库支持了 .NET Framework 4.5 和以上的版本,以及 .NET C ...

  4. RT-Thread内存管理

    一.内存管理的特点 分配内存的时间必须是确定的.一般内存管理算法是根据需要存储的数据的长度在内存中去寻找一个与这段数据相适应的空闲内存块,然后将数据存储在里面.而寻找这样一个空闲内存块所耗费的时间是不 ...

  5. 源码安装expect

    1. yum安装expect 如果有外网,可以yum安装,如下: yum install expect 2.源码安装expect 下载tcl源码包 cd /tmp &&wget htt ...

  6. 微服务从代码到k8s部署应有尽有系列全集

    微服务从代码到k8s部署应有尽有系列全集 https://mp.weixin.qq.com/s/8U2h85YJHy3H3hzlBakPPw 实战项目地址:https://github.com/Mik ...

  7. 关于文心一言不能打开F12开发者工具

    直接被JS写死的debugger关键字下了断点.行吧,不让调试就不让调试吧,关闭开发者工具之后,直接跳到了空白页. 开发者工具Ctrl+F8可以禁用断点调试 点击查看代码 <!DOCTYPE h ...

  8. 几行命令用minikube快速搭建可测试的kubernetes单节点环境

    几行命令用minikube快速搭建可测试的kubernetes单节点环境 需要docker环境,https://www.cnblogs.com/xiaofei12/p/17544579.html,网速 ...

  9. Splashtop获5000万美元新投资 成为远程桌面行业独角兽

    加利福尼亚州圣何塞,2021 年 1 月 27 日 - 下一代远程访问和远程支持领域的新兴领导者 Splashtop Inc. 完成了新一轮的 5000 万美元融资,其估值已超过了 10 亿美元的独角 ...

  10. C#.Net筑基-模式匹配汇总

    01.模式匹配概述 从C#7开始支持的 模式匹配 语法(糖,挺甜),可非常灵活的对数据进行条件匹配和提取,经过多个版本的完善,已经非常强大了. C# 支持多种模式,包括声明.类型.常量.关系.属性.列 ...