Axios封装

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import store from '@/store'
import qs from 'qs'
const defaultConfig = {
  needToken: true // 默认接口都需要token
}
const showMessage = msg => {
  Vue.prototype.$message({
    showClose: true,
    message: msg,
    type: 'error'
  })
}
const Axios = axios.create({
  baseURL: '',
  timeout: '',
  headers: {
    'Content-Type': 'application/json',
    'Cache-Control': 'no-cache'
  }
})
// request拦截器，设置全局请求
Axios.interceptors.request.use(config => {
  config = {
    ...defaultConfig,
    ...config
  }
  if (config.needToken) {
    const token = store.getters.token
    if (token) {
      config.headers.Authorization = token
    } else {
      if (router.currentRoute.name !== 'Login') {
        router.push({
          name: 'Login'
        })
        return
      }
    }
  }
  // get进行序列化
  if (config.method === 'get') {
    // { a: ['b', 'c'] }
    // indices:a[0]=b&a[1]=c
    // brackets:a[0]=b&a[1]=c
    // repeat:a=b&a=c
    // comma:a=b,c
    config.paramsSerializer = params =>
      qs.stringify(params, { arrayFormat: 'repeat' })
  }
  return config
})
// response拦截器，做些错误处理
Axios.interceptors.response.use(
  response => {
    const data = response.data
    console.log('response::', response)
    if (response.config.responseType === 'blob') {
      if (response.headers['content-type'].indexOf('application/json') > -1) {
        try {
          const reader = new FileReader()
          reader.onload = function (event) {
            const content = reader.result
            const message = JSON.parse(content) // 接口错误信息
            return Promise.reject(message)
          }
          reader.readAsText(data)
        } catch (error) {
          return Promise.reject(error.toStrng())
        }
        return
      } else {
        // 下载文件处理
        return response
      }
    }
    return response
    // return Promise.reject(data)
  },
  error => {
    console.log('error::', error)
    let text = ''
    if (error.response) {
      if (error.response.status) {
        const status = error.response.status
        switch (status) {
          case 404:
            text = '接口异常：接口不存在(404)'
            break
          case 500:
            text = '接口异常：服务器错误(500)'
            break
          default:
            text = `接口异常：状态码错误-${status}`
            break
        }
      } else {
        text = '连接服务器失败，请稍后重试'
      }
    } else if (
      error.code === 'ECONNABORTED' &&
      error.message.indexOf('timeout') > -1
    ) {
      text = '请求超时，请重试'
    } else if (error.message.indexOf('Invalid URL') > -1) {
      text = '请求地址异常'
    } else if (error.message === 'Network Error') {
      text = '网络异常，请稍后重试'
    } else {
      text = '系统异常，请重试'
    }
    if (text) {
      showMessage(text)
    }
    return Promise.reject(error)
  }
)
/**
* POST请求
*
* @export
* @param {*} url // 请求地址
* @param {*} [params={}] // params参数
* @param {*} [config={}] // config配置
* @return {*}
*/
export function POST (url, params = {}, config = {}) {
  return new Promise((resolve, reject) => {
    Axios.post(url, params, config)
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}
/**
* PUT请求
*
* @export
* @param {*} url // 请求地址
* @param {*} [params={}] // params参数
* @param {*} [config={}] // config配置
* @return {*}
*/
export function PUT (url, params = {}, config = {}) {
  return new Promise((resolve, reject) => {
    Axios.put(url, params, config)
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}
/**
* DELETE请求
*
* @export
* @param {*} url // 请求地址
* @param {*} [params={}] // params参数
* @param {*} [config={}] // config配置
* @return {*}
*/
export function DELETE (url, params = {}, config = {}) {
  return new Promise((resolve, reject) => {
    Axios.delete(url, params, config)
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}
/**
* GET请求
*
* @export
* @param {*} url // 请求地址
* @param {*} [params={}] // params参数
* @param {*} [config={}] // config配置
* @return {*}
*/
export function GET (url, params = {}, config = {}) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
      params,
      ...config
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}