Axios配置文件中this为undefined?

Question

问题描述

在this.$router发现没这个属性，后面查了下 this为undefined

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
import axios from 'axios'
import {Loading, Message} from 'element-ui'
import Debounce from 'lodash/debounce'

const Axios = axios.create({

baseURL:'/',
timeout:'10000',
responseType:'json',
withCredentials:true,
headers:{
    "Content-Type":"application/json; charset=UTF-8"
}

});
let needLoadingRequestCount = 0;
let loadingObj;

Axios.interceptors.request.use(

config=>{
    console.log(this);
    if(config.showLoading){
        showFullScreenLoading();
    }
    return config;
},
error=>{
    if(needLoadingRequestCount !== 0){
        loadingObj.close();
    }
    Message({
        showClose:true,
        message:'服务器有误！请稍后重试',
        type:"error"
    });
    return Promise.reject(error);
}

);

Axios.interceptors.response.use(

res =>{
    // console.log(this);
    if(res.config.showLoading){
        tryHideFullScreenLoading();
    }
    if(res.data.code !== 200 && res.data.message){
        Message({
            showClose:false,
            type:"error",
            center:true,
            message:res.data.message ? res.data.message : "服务器繁忙! 请重试"
        });
        if(res.data.code === 9999100){
            this.$router.push('/login');
        }
        return Promise.reject(res.data.message);
    }
    return res;
},
error =>{
    if(needLoadingRequestCount !== 0){
        loadingObj.close();
    }
    Message({
        showClose:true,
        message:'服务器繁忙！请稍后重试',
        type:"error"
    });
    return Promise.reject(error);
}

);

function showFullScreenLoading(){

if(needLoadingRequestCount === 0){
    loadingObj = Loading.service({
                    lock:true,
                    text:"Loading",
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
}
needLoadingRequestCount ++

}
function tryHideFullScreenLoading(){

if(needLoadingRequestCount <= 0) return
    needLoadingRequestCount --
if(needLoadingRequestCount === 0){
    Debounce(tryCloseLoading,300)();
}

}
function tryCloseLoading(){

if(needLoadingRequestCount === 0){
    loadingObj.close();
}

}
export default {

header(token){
    Axios.defaults.headers.common['Authorization'] = `ticket ${token}`;
},
post:(url,data,config = {showLoading : true}) => Axios.post(url,data,config),
get:(url,config = {showLoading : true}) => Axios.get(url,config),
delete:(url,config = {showLoading : true}) => Axios.delete(url,config)

}

你期待的结果是什么？实际看到的错误信息又是什么？

明明都是箭头函数啊，this怎么会丢呢

Answer 1

你在拦截器里调用，自然跟Vue的虚拟DOM没什么关系了，this自然不会指向Vue虚拟DOM对象。
这里路由跳转直接使用router即可

import router from "../router";
// ···
router.push({
   path: "xxx"
});

Answer 2

Vue实例还未生成b啊，
import Vue from 'vue'
Vue.$router
or
import router from '../router.js'(路由的路径)
然后router.push...

Answer 3

楼主，你好！当前的 this 已经换过了，不再是 vue 实例化的对象了。所以可以再 main.js 里初始化实例对象的时候挂载到 window 下面。

// main.js
...
window.vm = new Vue({});
...
// axios
window.vm.$router.push('..')