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

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

直接先上个例子


<template>
    <div>
        <h1>page1</h1>
        <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 = 1
            if (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延迟方法2
            var unixtime_ms = new Date().getTime();
            while (new Date().getTime() < unixtime_ms + ms) { }
        },

    }
}
</script>

结果



说明


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

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


Promise.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.Promise.all()与Promise.race()请求时的区别

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

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

目录
相关文章
|
1月前
|
前端开发
Promise.allSettled()和Promise.all()在处理错误时的差异是什么?
Promise.allSettled()和Promise.all()在处理错误时的差异是什么?
126 74
|
1月前
|
前端开发 数据库
Promise.allSettled() 和 Promise.all() 有什么区别?
Promise.allSettled() 和 Promise.all() 有什么区别?
110 74
|
3月前
|
前端开发
Promise.allSettled()方法和Promise.race()方法有什么区别?
`Promise.allSettled()` 提供了一种更全面、更详细的方式来处理多个 `Promise`,而 `Promise.race()` 则更强调速度和竞争。我们需要根据具体的需求来选择使用哪种方法。
|
3月前
|
前端开发
`Promise.allSettled()`方法与`Promise.all()`方法有何不同?
`Promise.allSettled()` 提供了一种更灵活和全面的方式来处理多个 `Promise`,使得我们能够更好地应对各种异步操作的情况,尤其是需要详细了解每个 `Promise` 结果的场景。
|
3月前
|
前端开发
使用 Promise.all 处理多个 Promise 同时失败的情况
【10月更文挑战第26天】通过以上几种方法,我们可以根据具体的需求和环境选择合适的方式来处理多个 `Promise` 同时失败的情况,从而更好地进行错误处理和程序的稳定性保障。
260 2
|
6月前
|
前端开发
手写实现ES6的Promise.all()和Promise.race()函数
这篇文章介绍了如何手写实现ES6的`Promise.all()`和`Promise.race()`函数,提供了实现这两个Promise聚合函数的详细代码示例,并展示了如何使用它们。
手写实现ES6的Promise.all()和Promise.race()函数
|
7月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
214 1
|
6月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
142 0
|
7月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
122 1
|
7月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
1048 0