封装axios,请求拦截,响应拦截

118 阅读1分钟
//   utils/request.js

import axios from 'axios'
// 创建axios实例
const request = axios.create({
    // 配置基准路径
    baseURL: 'http://chifan.com' 
    timeout: 6000 // 请求超时
})

请求拦截

request.interceptors.request.use( config => {
    // 在发送请求之前执行某些操作
    const { user } = store.state
    if (user && user.token){
        // 让每个请求携带token
        config.headers.Authorization  = `Bearer${user.token}`
    }
    return config;
  }, error => {
    // 处理请求错误
    return Promise.reject(error);
  });
  

响应拦截

request.interceptors.response.use((response) => {
    // 在2xx范围内的任何状态代码都会触发此功能
    // 对响应数据做些什么
    // 通过自定义代码确定请求状态
    if(res.code!==200){
    // 提示报错信息
        Message({
            message: res.message || 'Error',
            type: 'error',
            duration: 5 * 1000
        })
    }
    // 50008:非法代币;50012:其他客户端登录;50014:令牌已过期;
    if(res.code === 50008 || res.code === 50012 || res.code === 50014){
        this.$message({ 
            message: '请重新登录', 
            type: 'warning' 
        });
    }else return res
    

    // 还可以通过HTTP状态代码判断状态
    return response;
  }, (error) => {
    // 任何超出2xx范围的状态代码都会触发此功能
    // 处理响应错误
     this.$message({ 
            message: error.message, 
            type: 'error',
            duration: 5 * 1000
        });
      return Promise.reject(error);
  });
  export default request