vue axios 请求拦截器 根据请求返回的错误代码 跳转错误页面

编辑拦截器文件 挂载到 vue实例上
vue axios 请求拦截器 根据请求返回的错误代码 跳转错误页面_第1张图片
在该文件夹中书写 拦截内容

import Axios from 'axios'
import router from '../router/index'
// 请求拦截器
Axios.interceptors.request.use(config => {
     

    // 发送请求之前可以在这里写一些东西

    return config;

}, error => {
     

    // 请求报错的时候做一些事情

    return Promise.reject(error)
})


// 响应拦截器
Axios.interceptors.response.use(response => {
     
    // 对响应数据做一些事情

    return response
}, error => {
     

    // 请求错误时做些事
    let status = ''
    if(error.request){
     
        status = error.request
    }else if(error.response){
     
        status = error.response
    }
    
    if (status) {
     
        switch (status.status) {
     
            case 400: error.message = '请求错误(400)'; 
                break;
            case 401: error.message = '未授权,请重新登录(401)';
                      router.push('/401')
                break;
            case 403: error.message = '拒绝访问(403)';
                break;
            case 404: error.message = '请求出错(404)'; 
                      router.push('/404')
                break;
            case 408: error.message = '请求超时(408)'; 
                break;
            case 500: error.message = '服务器错误(500)'; 
                      router.push('/500')
                break;
            case 501: error.message = '服务未实现(501)'; 
                break;
            case 502: error.message = '网络错误(502)'; 
                break;
            case 503: error.message = '服务不可用(503)'; 
                break;
            case 504: error.message = '网络超时(504)'; 
                break;
            case 505: error.message = 'HTTP版本不受支持(505)';
                break;
            default: error.message = `连接出错(${
     error.response.status})!`;
        }
    }else{
     
        error.message ='连接服务器失败!'
    }
    return Promise.reject(error)

})

export default Axios

把书写好的拦截器文件 引入到main.js
vue axios 请求拦截器 根据请求返回的错误代码 跳转错误页面_第2张图片

引入 文件  
import axios from './utils/axiosConfig'

挂载拦截器
Vue.prototype.$axios = axios

这样用axios发送请求的时候 就能拦截到想要的信息了

你可能感兴趣的:(axios,javascript,vue.js)