对 Axios 进行简单封装

import axios from 'axios'
import qs from 'qs'
import { baseURL } from './config.js'

const SuccessCode = 200

// 自定义错误
const ErrorType = {
  'Default': 'default',
  'Sysetem': 'sysetem'
}

function ApiError (message, errorType, innerError) {
  this.name = 'ApiError'
  this.message = message || 'Default Message'
  this.errorType = errorType || ErrorType.Default
  this.innerError = innerError
  this.stack = (new Error()).stack
}
ApiError.prototype = Object.create(Error.prototype)
ApiError.prototype.constructor = ApiError

const httpClient = axios.create({
  baseURL: baseURL,
  timeout: 20000,
  // 响应的数据格式 json / blob / document / arraybuffer / text / stream
  responseType: 'json',
  withCredentials: true
})

// POST传参序列化(添加请求拦截器)
httpClient.interceptors.request.use(
  config => {
    // 在发送请求之前做某件事
    if (
      config.method === 'post' ||
      config.method === 'put' ||
      config.method === 'patch'
    ) {
      // Content-Type 对于 POST、PUT 和 PATCH 才有意义
      config.headers = {
        // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        'Content-Type': 'application/json; charset=UTF-8'
      }
      // 序列化
      config.data = JSON.stringify(config.data)
    } else if (
      config.method === 'delete' ||
      config.method === 'get' ||
      config.method === 'head'
    ) {
      // QueryString 序列化器
      config.paramsSerializer = function (params) {
        // arrayFormat: indices brackets repeat
        return qs.stringify(params, {
          arrayFormat: 'indices'
        })
      }
    }

    // 若是有做鉴权token , 就给头部带上token
    if (localStorage.token) {
      config.headers.Authorization = localStorage.token
    }
    return config
  },
  error => {
    return error
  }
)

// 返回状态判断(添加响应拦截器)
httpClient.interceptors.response.use(
  response => {
    if (response.headers['content-type'].indexOf('json') === -1) {
      // 返回的数据不是 json (或是 json 但服务器的 content-type 设置不准确)
      return response
    }
    // 仅处理 json 数据
    let json
    if (response.request.responseType === 'arraybuffer' && response.data.toString() === '[object ArrayBuffer]') {
      // 返回的数据是 arraybuffer，内容是 json
      // 备注：可能内容不是 json，这里暂未处理
      const text = Buffer.from(response.data).toString('utf8')
      console.log(text)
      json = JSON.parse(text)
    } else {
      // 备注：不是 arraybuffer 可能会是 blob 等，这里暂未处理
      json = response.data
    }

    if (json && json.url) {
      top.location = json.url
    } else if (json && json.code !== SuccessCode) {
      console.log(json)
      return Promise.reject(new ApiError(json.message))
    }
    return response
  },
  error => {
    // 返回 response 里的错误信息
    return Promise.reject(new ApiError(error.message, ErrorType.Sysetem, error))
  }
)

// 将 Axios 的实例封装成一个 plugin ,方便 Vue.use(xxxx)
export default {
  install: function (Vue, option = {}) {
    // 1.通过 Vue.httpClient 调用
    Vue.httpClient = httpClient
    // 2.通过 this.$httpClient 调用
    Vue.prototype.$httpClient = httpClient
  }
}

export const baseURL = 'http://www.yourdomain.com/api'

// ......
import Vue from 'vue'
import HttpClient from '@/utils/httpclient.js'

import App from './App.vue'

Vue.use(HttpClient)
// ......

login () {
    const params = {
        username: 'test',
        password: '123456'
    }
    Vue.httpClient.post('/login', params).then(response => {
        console.log(response.data)
    }, error => {
        // error 为 ApiError 实例。对于网络错误或 HTTP 错误等系统错误，可通过 innerError 查询实际错误。
        console.log(error)
    })
}

const fileDownload = require('js-file-download')

testDownload () {
    const url = 'http://www.yourdomain.com/somefile.zip'
    const params = {
        token: '35dea0e5-9b9f-4b8b-981e-2e1120b1c317'
    }
    Vue.httpClient.post(url, params, {
      // 重要
      responseType: 'arraybuffer'
    }).then(response => {
        fileDownload(response.data, 'somefile.zip')
    }, error => {
        console.log(error)
    })
}