vue2 项目架构--request（三）

src/api/request.js

import axios from 'axios';
import { Message, MessageBox } from 'element-ui';
import store from '@/store';
import { getToken } from '@/utils/auth';
import errorCode from '@/utils/errorCode';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false;
    if (getToken() && !isToken) {
      config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // 注意：根据实际扩张

        config.headers['keyid'] = 'xxxxxxxx'

// 设置请求头
    config.headers['Content-Type'] = config.headers['Content-Type'] || 'application/json;charset=utf-8';
    
    return config;
  },
  error => {
    console.error('request error:', error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    
    // 未设置状态码则默认成功状态
    const code = res.code || 200;
    
    // 获取错误信息
    const msg = errorCode[code] || res.msg || errorCode['default'];
    
    // 二进制数据则直接返回
    //if (response.request.responseType === 'blob' || response.request.responseType === 'arraybuffer') {
     // return res;
   // }
    
    if (code === 401) {
      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/logout').then(() => {
          location.reload(); // 为了重新实例化vue-router对象 避免bug
        });
      });
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error'
      });
      return Promise.reject(new Error(msg));
    } else if (code !== 200) {
      Message({
        message: msg,
        type: 'error'
      });
      return Promise.reject(msg);
    } else {
      return res;
    }
  },
  error => {
    console.error('response error:', error);
    let { message } = error;
    
    if (message === 'Network Error') {
      message = '后端接口连接异常';
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时';
    } else if (message.includes('Request failed with status code')) {
      message = `系统接口${message.substr(message.length - 3)}异常`;
    }
    
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    });
    
    return Promise.reject(error);
  }
);

export default service;

 

import errorCode from '@/utils/errorCode';

errorCode.js

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员',
}