解决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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
npm 下载指定版本的组件方法
May 17 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
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python画图学习入门教程
2016/07/01 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
思想品德自我鉴定
2013/10/12 职场文书
法律专业应届本科毕业生求职信
2013/10/25 职场文书
优秀团队获奖感言
2014/02/19 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
会计专业求职信
2014/08/10 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP