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

目录
相关文章
|
2月前
|
JavaScript 前端开发
如何处理 Vue 中的异步操作和 Promise?
如何处理 Vue 中的异步操作和 Promise?
96 1
|
6天前
|
JavaScript 前端开发
在vue中循环中调用接口-promise.all();按顺序执行异步处理
在vue中循环中调用接口-promise.all();按顺序执行异步处理
|
2月前
|
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
60 0
|
2月前
|
前端开发 JavaScript
在 Vue 中,Promise 和 async/await 有什么不同?
在 Vue 中,Promise 和 async/await 有什么不同?
34 0
|
2月前
|
前端开发 JavaScript
处理异步请求的 async/await 和 promise
处理异步请求的 async/await 和 promise
|
2月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
|
2月前
|
前端开发 JavaScript
使用promise解决异步请求的用法
使用promise解决异步请求的用法
48 0
|
2月前
|
前端开发 小程序
微信小程序异步请求数据promise方法
微信小程序异步请求数据promise方法
|
8月前
|
JavaScript 前端开发 API
vue项目中配置简单的代理与promise,并简单封装请求接口
vue项目中配置简单的代理与promise,并简单封装请求接口
35 0
|
11月前
|
JavaScript 前端开发
Vue项目部署到服务器时上传报错“Uncaught (in promise) TypeError: s.upload.addEventListener is not a function”
使用vue-admin-element框架进行在本地文件上传以及富文本框中的文件上传是没有问题的,但是在上传部署vue项目到服务器上时,就会报如下图中一个错误。
808 0