vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

我就废话不多说了，大家还是直接看代码吧~

Axios.all([request1, request2, request3])
   .then(
    Axios.spread((area, acct, perms) => {
   console.log('全部加载完成')

    })
   )
   .catch(err => {
    console.log(err.response)
   });

需要在当前路由引入axios

import Axios from "axios";

补充知识：vue，axios处理同一个接口多次访问的执行顺序问题

碰到个问题记录一下，就是axios同时多次请求同一个接口（参数不同）导致数据混乱的问题，就是先点击A，马上再点击B，结果A请求数据的速度比B的慢，导致，展示数据的时候B的结果先出来，又马上闪成A请求的数据了。这里有一种解决办法，在点击新的接口请求时，关闭之前正在pending的接口请求。

在已经封装好的axios方法里面，加上红框中代码，然后再在你需要的vue文件方法里面加上如下代码

这样你每点击一个事件触发新的请求时，之前仍在pending的请求就会被强制关闭了

以上这篇vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

  • vue 解决在微信内置浏览器中调用支付宝支付的情况

    我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转页面 第一步: payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == "

  • 解决vue 使用axios.all()方法发起多个请求控制台报错的问题

    今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance.all = axios.all 就完美解决了! 补充知识:vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常 报错: _util2.default.axios.

  • 解决vue init webpack 下载依赖卡住不动的问题

    有时候下载依赖的时候网速不行,这时候我们选择手动下载依赖 有时候下载依赖的时候网速不行,这时候我们选择手动下载依赖:选择 No,I will handle that myself 生成完项目之后,再cd进入项目文件夹,然后再npm install 安装即可. 但是如果真的安装"个把"小时也没成功那就用:cnpm install 吧 如果安装过程中等待太久,我们难免会不耐烦,所以会中途关闭项目.那么我们接下操作 npm run dev 肯定是报错的 正确做法:cd进入项目文件夹,然后再n

  • Vue路由权限控制解析

    Vue路由权限控制解析

    前言 本人在公司主要负责中后台系统的开发,其中路由和权限校验算是非常重要且最为基本的一环.实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对这个知识点的一些总结. 项目总体目录结构 进入今天主题之前,我们先来梳理下整个项目,src目录下的. api: 接口请求 assets: 静态资源 components: 通用组件 directive: 自定义指令

  • 在VUE中使用lodash的debounce和throttle操作

    说明: debounce和throttle在脚手架的使用,此处以防抖函数debounce为例避免按钮被重复点击 引入: import lodash from 'lodash' 使用: 直接使用debounce方法 // 审核 audit: lodash.debounce(function() { this.$refs['model'].saveTotalResult(1).then(() => { const reportId = this.activeReport.id; report.aud

  • 详解nginx配置vue h5 history去除#号

    vue的默认配置是使用hash模式,这样我们访问的时候都带有了一个#号,再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式,优势就出现了需要去除#号,于是vue端就需要配置该模式,并且使用懒加载,vue端的配置如下: 首先先声明一下,这是使用vue+nginx实现前后端分离的项目,并且使用vue axios实现代理功能(允许跨域并且服务端已经开启跨域), 然后就是打包的配置: !!!注意,这里配置的assetsPublicPath一定要配置成  "/"  而不是  "

  • vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

    我就废话不多说了,大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct, perms) => { console.log('全部加载完成') }) ) .catch(err => { console.log(err.response) }); 需要在当前路由引入axios import Axios from "axios"; 补充知识:vue,axios处理

  • vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios  我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi

  • Vue+axios封装请求实现前后端分离

    本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码,供大家参考,具体内容如下 前言 我们需要进行前后端分离开发,那么前后端的跨域问题就是无可避免的问题,前后端的请求也是无可避免的,Vue之中有一个请求组件是axios,我们可以对axios进行封装作为我们请求的工具组件 # 一.封装axios vue.config.js 配置文件 module.exports = { configureWebpack: { resolve: { alias: { api: '@/api', a

  • vue axios同步请求解决方案

    vue axios同步请求解决方案

    在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

  • vue axios请求拦截实例代码

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 下面代码给大家介绍vue axios 请求拦截,具体代码如下所示: import axios from 'axios';//引入axios依赖 imp

  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    下面通过一段代码给大家介绍Vue axios全局拦截 get请求.post请求.配置请求,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"&g

随机推荐