vue响应拦截器的问题

Question

为什么我在响应拦截判断了请求方式==post请求路径==user状态码==400时他会出现报错,还是编译错误

```javascript
import axios from "axios";


const request = axios.create({
    baseURL: "http://127.0.0.1:8888/api/private/v1/",
    timeout: 5000,
})

// 请求拦截
request.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

// 响应拦截
request.interceptors.response.use(response => {
    console.log(response.config.url, response.config.method, response.data.meta.status)
    if (response.config.url == 'users' && response.config.method == 'post' && response.data.meta.status == 400) {
        this.$message.error(response.data.meta.msg)
    }
    return response;
});

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        request.get(url, params).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        request.post(url, data).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

export function deletes(url, data = {}) {
    return new Promise((resolve, reject) => {
        request.delete(url, data).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

```

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

问题分析： 在响应拦截器中，你判断了请求路径为"users"、请求方式为"post"、状态码为400时，执行了this.$message.error(response.data.meta.msg)。然而，在响应拦截器中是无法直接使用Vue组件的实例，所以会出现报错。

解决方案：

1. 将this.$message.error(response.data.meta.msg)替换为其他处理错误的方式，比如通过console.log输出错误信息到控制台。
2. 在响应拦截器中，通过引入Vue实例来使用消息提示组件。先在main.js中引入Vue和ElementUI，并将Vue实例挂载到Vue原型上。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
    el: '#app',
    render: h => h(App)
})

然后在响应拦截器中使用Vue.prototype访问Vue实例的$message对象来显示错误信息。

import Vue from 'vue'
import axios from "axios";

const request = axios.create({
    baseURL: "http://127.0.0.1:8888/api/private/v1/",
    timeout: 5000,
})

// 请求拦截
request.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

// 响应拦截
request.interceptors.response.use(response => {
    console.log(response.config.url, response.config.method, response.data.meta.status)
    if (response.config.url == 'users' && response.config.method == 'post' && response.data.meta.status == 400) {
        Vue.prototype.$message.error(response.data.meta.msg)
    }
    return response;
});

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        request.get(url, params).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        request.post(url, data).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

export function deletes(url, data = {}) {
    return new Promise((resolve, reject) => {
        request.delete(url, data).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

经过以上修改，你就可以在响应拦截器中成功使用消息提示组件来显示错误信息了。