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


Posted in Javascript onNovember 09, 2020

今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错,后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上,需要我们手动去添加

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

== 只需要在你封装的axios文件里加入 ==

instance.all = axios.all

就完美解决了!

补充知识:vue项目中使用axios.all处理并发请求报_util2.default.axios.all is not a function异常

报错:

_util2.default.axios.all is not a function

代码:

init () {
      util.axios.all([this.getCourseInit(), this.getConfirmInit()])
        .then(util.axios.spread((indexRes, confirmRes) => {
          // 两个请求现在都执行完成
          this.classData = indexRes.data.today_course.map(item => {
            item.time = timeUtil.formatDate2Str(item.start_time, 'HH:mm') + '~' + timeUtil.formatDate2Str(item.end_time, 'HH:mm');
            return item;
          });
          this.count.count_course_today = indexRes.data.count.count_course_today;
          this.count.count_student_not = indexRes.data.count.count_student_not;
          this.count.count_student_all = indexRes.data.count.count_student_all;
          this.count.count_teacher_all = indexRes.data.count.count_teacher_all;
 
          this.isLoading = false;
        }));
    },
    getCourseInit () {
      return util.axios.get('/index');
    },
    getConfirmInit () {
      return util.axios.get('/course-confirm');
    },

原因:

axios实例没有all这个方法,all是axios的静态方法

解决办法:

以下方法不是最好的,还没找到更好的解决办法,目前先这样解决。

// 引入axios 
import axios from 'axios';
 
init () {
      axios.all([this.getCourseInit(), this.getConfirmInit()])
        .then(axios.spread((indexRes, confirmRes) => {
          // 两个请求现在都执行完成
          this.classData = indexRes.data.today_course.map(item => {
            item.time = timeUtil.formatDate2Str(item.start_time, 'HH:mm') + '~' + timeUtil.formatDate2Str(item.end_time, 'HH:mm');
            return item;
          });
          this.count.count_course_today = indexRes.data.count.count_course_today;
          this.count.count_student_not = indexRes.data.count.count_student_not;
          this.count.count_student_all = indexRes.data.count.count_student_all;
          this.count.count_teacher_all = indexRes.data.count.count_teacher_all;
 
          this.isLoading = false;
        }));
    },
    getCourseInit () {
      return util.axios.get('/index');
    },
    getConfirmInit () {
      return util.axios.get('/course-confirm');
    },

以上这篇解决vue 使用axios.all()方法发起多个请求控制台报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 #Javascript
Vue路由权限控制解析
Nov 09 #Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 #Javascript
vue 中的动态传参和query传参操作
Nov 09 #Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 #Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 #Javascript
原生JavaScript实现五子棋游戏
Nov 09 #Javascript
You might like
桌面中心(四)数据显示
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
python getopt详解及简单实例
2016/12/30 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
专科应届生求职信
2013/11/24 职场文书
采购内勤岗位职责
2013/12/10 职场文书
高考寄语大全
2014/04/08 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
团队拓展训练感想
2015/08/07 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS