解决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.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()方法发起多个请求控制台报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue 防止短时间内连续点击后多次触发请求的操作

    如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用disabled限制点击,感觉体验不是太好,所有给大家分享下面的方法 <el-button @click="throttle()">测试</el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } } } methods:{ throttle(){ //获取当前时间的时间戳 let now = new Dat

  • 在vue项目中promise解决回调地狱和并发请求的问题

    场景需求: 需要同时请求5个接口 都请求成功后执行下一步操作 解决方法: 定义一个变量i=5,请求成功一个接口,让i–,直到i=0时执行下一个操作,否则不执行 axios.all 并发请求,.then(axios.spread(function(callback1, callback2)){}) promise.all 并发请求,.then(function([callback1, callback2]){}) 1.回调地狱: 函数作为参数层层嵌套 代替的为.then的链式操作 2.promis

  • 解决Vue中的生命周期beforeDestory不触发的问题

    分享一句很有用的经验: 给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed 结束! 补充知识:vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u) 场景 . SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是 act

  • Vue根据条件添加click事件的方式

    需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q

  • 解决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 子组件修改父组件传来的props值报错问题

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result&

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • 解决vue项目axios每次请求session不一致的问题

    1.vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp

  • 解决vue中axios设置超时(超过5分钟)没反应的问题

    (chrome环境)在做项目的时候,由于做大数据可视化界面,后台接口查询数据往往会比较久(上百万的数据量),导致vue项目axios请求超时timeout设置就比较大.开始设置超时未3分钟时没有问题(这里我设置超时弹窗了),可设置超时未6分钟时,却在五分钟左右弹出请求超时,但明明设置tiemout=6x60x1000. 于是通过资料查询,了解到Chrome浏览器,默认请求超时为五分钟,所以导致上诉现象产生,可如何在vue中修改浏览器超时? 直接上代码: 我们可以在config文件中index.j

  • 解决Vue watch里调用方法的坑

    这里是说watch调用methods里方法的时候,页面经常会报找不到方法 这个时候一定要在watch里去输出一下this, 看看this包裹的壳是不是多了好多层,所以找不到方法,虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题. 例如 正常情况下用this.functionname()就可以调用了. 但是在一些情况下(现在本人还没找到原因)在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层,所以使用方法的时候就会变成 this

  • 解决vue watch数据的方法被调用了两次的问题

    背景: 路由结构/video/1.mp4,即/video是父路由,/1.mp4是/video的动态子路由,在/video父路由中会通过url的params获取视频信息,即通过/1.mp4获取对应的视频完整信息,然后通过props传到动态子路由中,然后子路由通过接受到的视频对象,进行展示 问题: 当路由切换时,即当我点击其他视频时,导致动态子路由变化时,我监听了/video父路由的变化并重新根据url的params获取视频对象,并自动通过props传入子路由中,我在子路由中通过watch 视频对象

  • node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法

    发现错误 最近在用Nodejs发送https请求时候,出现\"Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE\"的错误,错误如下: events.js:72 throw er; // Unhandled \'error\' event ^ Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE at SecurePair. (tls.js:1381:32) at SecurePair.emit (events.js:92:17) at

  • 完美解决python遍历删除字典里值为空的元素报错问题

    exam = { 'math': '95', 'eng': '96', 'chn': '90', 'phy': '', 'chem': '' } 使用下列遍历的方法删除: 1. for e in exam: 2. if exam[e] == '': 3. del exam[e] 结果出现下列错误,怎么解决: Traceback (most recent call last): File "Untitled.py", line 3, in <module> for e in

  • 解决React hook 'useState' cannot be called in a class component报错

    目录 总览 函数组件 类组件中使用setState() 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误.为了解决该错误,请将类组件转换为函数组件.因为钩子不能在类组件中使用. 这里有个例子用来展示错误是如何发生的. // App.js import {useState, useEffect} from 'react'; class Example

随机推荐