vue-axios系列:封装axios

记录一下自己封装的axios，已在项目中使用

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 * 需要修改的地方：响应拦截-具体业务拦截：需要问后台问成功的code码
 */
import axios from 'axios';
import QS from 'qs';
import router from '../router' // 导入路由文件
import {toast} from '@/util/util.js'
import global from '@/util/global.js' // 全局变量

// 请求超时时间
// axios.defaults.timeout = 10000;

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
axios.interceptors.request.use(
  config => {
    let token = localStorage.getItem('token');
    /**
     * 处理请求头
     * 1.token 2.防刷短信
     */
    if(token){ config.headers.Authorization= JSON.parse(token) }
    //防刷短信(pdd)
    config.headers.AcceptParam = 'application/no-referrer-urlencoded';
    
    // 处理参数-统一添加token
    /**
     * 处理参数
     * 1.token
     */
    if (config.method == 'post') {
      config.data = {
        ...config.data,
        token: token
      }
      // 需要将数据格式化，否则传到后台就错了
      config.data = QS.stringify(config.data)
    }else if (config.method == 'get') {
      config.params = {
        token: token,
        ...config.params
      }
    }
    return config;
  },
  error => {
    return Promise.error(error);
  })

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // console.log('响应拦截-response: ', response);
    if (response.status === 200) {
      // 检查是否是登录接口：是的话修改loginToken，再重新调用登录接口
      if(response.config.url == global.loginApi){
        global.loginToken = response.headers.__login_token__;
      }

      // 登录已过期
      if(response.data.code == -51){
        console.log('登录已过期: ');
        toast('登录已过期,请重新登录');
        toLogin();
        return Promise.reject(response);
      }else{
        return Promise.resolve(response);
      }
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是200的情况
  error => {
    console.log('响应拦截-error:', error);
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录状态，跳转登录页
        case 401:
          // Message('您还未登录，请先登录');
          toLogin();
          return;
          break;
        // 403 token过期
        // 清除token并跳转登录页
        case 403:
          // Message('登录已过期,请重新登录');
          toLogin();
          return;
          break;
        // 404请求不存在
        case 404:
          // Message('网络请求不存在');
          break;
          return;
          // 其他错误，直接抛出错误提示
        default:
          console.log('响应拦截：error.response.data.message', error.response.data.message);
        }
      }
      return Promise.reject(error.response);
  }
);

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  // console.log('token: ', token);
  // let token = localStorage.getItem('token');
  // params.token = token;
  return new Promise((resolve, reject) => {
    // axios.post(url, QS.stringify(params))
    axios.post(url, params)
      .then(res => {
        // 具体业务拦截: resultCode: 1000(成功)
        if(res.data.code == 0){
          resolve(res.data);
        }else{
          reject(res.data);
        }
      })
      .catch(err => {
        reject(err);
      })
  });
}

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

// 去登录页
function toLogin(){
  router.push('login')
}