需求:将数组中的值作为参数,循环调用新增接口实现批量导入功能。因为接口调用有时间间隔限制,避免误操作,所以需要设置接口请求的间隔时间。
原代码如下:
const recursive = (arr, index) => { arr[index]().then((res) => { if (index + 1 < arr.length) { setTimeout(() => recursive(arr, index + 1), 1000); } else { query(); } }); }; const finish = (res) => { let arr = []; for (let param of res) { param.taskId = sessionStorage.taskId; let p = () => { return new Promise((resolve, reject) => { MiitTaskOrderApi.add(param) .then((response) => { const data = response.data; if (data.code === 200) { resolve(); } else { message.error(data.message); } }) .catch((error) => { message.warning(error.message); }); }); }; arr.push(p); } recursive(arr, 0); };
优化后的代码如下:
const pause = (millis) => new Promise((resolve) => setTimeout(resolve, millis)); const finish = async (res) => { for (let [index, param] of res.entries()) { param.taskId = sessionStorage.taskId; MiitTaskOrderApi.add(param) .then((response) => { const data = response.data; if (data.code === 200) { if (index == res.length - 1) { query(); message.success("导入成功"); } } else { message.error(data.message); } }) .catch((error) => { message.warning(error.message); }); await pause(1000); } };
优化点如下:
1.通过定义和使用pause函数,配合async/await,实现请求间的间隔。
2.通过使用数组的entries()函数,获得数组循环的index值,判断是否为最后一次循环,从而执行查询操作。
标签:index,arr,const,res,JS,发送,代码优化,message,data From: https://www.cnblogs.com/luoyihao/p/16820703.html