vue实现循环发起多个异步请求——Promise.all()与Promise

直接先上个例子

<template><div><h1>page1h1><p>{{ msg }}p><el-button type="primary" plain @click="downloadList()">主要按钮el-button>div>
template>
<script>
export default {data() {return {msg: "我是page1组件",pagnation:{total:1000,}}},methods: {downloadList(num) {let array = []// 计算可以循环多少次let n = 1if (this.pagnation.total < 100) {n = 1} else {n = Math.ceil(this.pagnation.total / 100)}for (let i = 0; i < n; i++) {array = array.concat(this.ForPromise(i))}Promise.all(array).then((res) => {console.log(res) // [ 0, 1, 2 ]})},ForPromise(num) {return new Promise((resolve, reject) => {resolve('成功了'+num);//请求操作// this.axios.get('http://test.fastadmin.cn/index.php/api/index/test',{}).then(res => {}).catch(err => {});})},sleep(ms) { //sleep延迟方法2var unixtime_ms = new Date().getTime();while (new Date().getTime() < unixtime_ms + ms) { }},}
}
script>

结果

说明

.all 在任意一个传入的 失败时返回失败。例如，如果你传入的 中，有四个

在一定的时间之后调用成功函数，有一个立即调用失败函数，那么 .all 将立即变为失败。

.race()的使用

var p1 = new Promise(function(resolve, reject) {setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {setTimeout(resolve, 100, "two");
});Promise.race([p1, p2]).then(function(value) {console.log(value); // "two"// 两个都完成，但 p2 更快
});

3..all()与.race()请求时的区别

.all() 适合于后面的异步请求接口依赖前面的接口请求的数据时使用。

.race()没有先后顺序，那个先请求回来那个先显示