axios封装及API接口管理

在src文件夹下新建api文件夹，并新建index.js用来作为axios封装

index.js代码如下

import axios from 'axios'
import config from '../config/server.js'
import qs from 'qs'
import Vue from 'vue'
import { getToken } from '../utils/common'

import { Message } from 'elementUI'

/** **** 创建axios实例 ******/
const service = axios.create({
  baseURL: config.apiPathPrefix, // api 的 base_url
  timeout: 150000 // request timeout
})
Vue.prototype.$http = service
/** **** //取消请求标记 ******/
const CancelToken = axios.CancelToken

/** **** //拦截器 ******/
service.interceptors.request.use(config => {
  const oldHeaders = config.headers || {}
  config.headers = {
    common: {},
    'X-CSRF-TOKEN': getToken(),
    ...oldHeaders
  }
  config.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
  }

  if (config.method === 'get') {
    config.params = { ...config.params, _t: Date.now() }
  }
  return config
})
service.interceptors.response.use(
  res => {
    if (res.data.type === -2) {
      Message.error({
        showClose: true,
        message: res.data.msg
      })
    }
    return Promise.resolve(res)
  },
  err => {
    const rp = err.response.status
    if (rp === 401 || rp === 403 || rp === 302) {
      skipLogin()
    } else {
      // window.app.feedback();
      Message.error({
        showClose: true,
        message: '服务器内部错误'
      })
    }
    return Promise.reject(err)
  }
)
export default {
  source: CancelToken.source(),
  resetSource () {
    this.source = axios.CancelToken.source()
  },
  fetchPost (url, params, isSucMsg, alertTitle, headers) {
    return new Promise((resolve, reject) => {
      service
        .post(`${url}${config.apiPathSuffix}`, params, {
          headers,
          cancelToken: this.source.token
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg, alertTitle);
          // console.log('res', res)
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchPostForm (url, params, isSucMsg, alertTitle, headers) {
    return new Promise((resolve, reject) => {
      service
        .post(`${url}${config.apiPathSuffix}`, qs.stringify(params), {
          headers: Object.assign(
            {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            headers
          ),
          cancelToken: this.source.token
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg, alertTitle);
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchPostJson (url, params, isSucMsg, alertTitle, headers) {
    return new Promise((resolve, reject) => {
      service
        .post(`${url}${config.apiPathSuffix}`, params, {
          headers: Object.assign(
            {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            headers
          )
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg, alertTitle);
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchGet (url, params, isSucMsg, headers) {
    return new Promise((resolve, reject) => {
      service
        .get(`${url}${config.apiPathSuffix}`, {
          params,
          headers
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg);
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchGetNoTip (url, params, isSucMsg, headers) {
    return new Promise((resolve, reject) => {
      service
        .get(`${url}${config.apiPathSuffix}`, { params, headers })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  }
}
// 跳至cas登录
function skipLogin () {
  if (process.env.NODE_ENV !== 'development') {
    window.location.reload()
  }
}