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()没有先后顺序,那个先请求回来那个先显示

目录
相关文章
|
4月前
|
JavaScript 前端开发
如何处理 Vue 中的异步操作和 Promise?
如何处理 Vue 中的异步操作和 Promise?
116 1
|
23天前
|
前端开发
手写实现ES6的Promise.all()和Promise.race()函数
这篇文章介绍了如何手写实现ES6的`Promise.all()`和`Promise.race()`函数,提供了实现这两个Promise聚合函数的详细代码示例,并展示了如何使用它们。
手写实现ES6的Promise.all()和Promise.race()函数
|
2月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
65 1
|
1月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
27 0
|
2月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
38 1
|
2月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
163 0
|
3月前
|
JavaScript 前端开发
在vue中循环中调用接口-promise.all();按顺序执行异步处理
在vue中循环中调用接口-promise.all();按顺序执行异步处理
|
4月前
|
JavaScript 前端开发
[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca
[Vue warn]: Error in v-on handler (Promise/async): “NavigationDuplicated: Navigating to current loca
141 0
|
4月前
|
前端开发 JavaScript
在 Vue 中,Promise 和 async/await 有什么不同?
在 Vue 中,Promise 和 async/await 有什么不同?
72 0
|
4月前
|
前端开发 JavaScript
处理异步请求的 async/await 和 promise
处理异步请求的 async/await 和 promise