Question

从 axios拦截器进行调用时，vue-progressbar不会触发启动和完成功能，并且还会停止axios来访问服务器。

每当我删除应用程序时。$ Progress.start（），axios拦截器就可以正常工作（即它从服务器返回数据）。

如果我直接使用axios（不是来自axios拦截器的全局实例），我可以轻松地调用start（）和finish函数，并且运行良好。

我想要的是带有进度条的全局axios实例。

感谢您的时间吗？

//这是我的progressbar.js文件

import Vue from 'vue';
import VueProgressBar from 'vue-progressbar';
  const options = {
   color: '#201c11',
   failedColor: '#874b4b',
   thickness: '5px',
   transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
   },
 }
Vue.use(VueProgressBar, options)
export default  Vue;

//这是我的api-axios.js

import axios from 'axios';
import app from './progressbar';

const instance = axios.create({
  baseURL: '/api'
});

instance.interceptors.request.use(config => {
  app.$Progress.start(); // for every request start the progress
  return config;
 });

instance.interceptors.response.use(response => {
   app.$Progress.finish(); // finish when a response is received
  return response;
});
export default instance; // export axios instance to be imported in your   app

//这是我的app.js文件

import './bootstrap';
import Vue from 'vue'; // Importing Vue Library
import VueRouter from 'vue-router'; // importing Vue router library
import router from './routes';
import Axios from './api-axios';

window.Vue = Vue;
Vue.use(VueRouter);

Vue.prototype.$http = Axios;
const app = new Vue({
el: '#app',
router,
});

//这是启动服务器调用的组件中的方法

createTask()
        {                
            this.$http.post('/task', {
                name: this.task.name,
                description: this.task.description,
            })
                .then(response => {

                    this.reset();

                    this.tasks.push(response.data.task);

                    $("#add_task_model").modal("hide");

                })
                .catch(error => {
                    this.errors = [];
                    if (error.response.data.errors.name) {
                        this.errors.push(error.response.data.errors.name[0]);
                    }

                    if (error.response.data.errors.description) {
                        this.errors.push(error.response.data.errors.description[0]);
                    }
                });
        },

如何从axios拦截器调用vue-progressbar启动函数

0 个答案: