axios封装

vue

来源：https://zhuanlan.zhihu.com/p/33651927

import Vue from 'vue'
import { ToastPlugin, md5 } from 'vux'
import axios from 'axios'
import store from './store'  // 从 vuex 里取出一些有用的信息
Vue.use(ToastPlugin)
// 前根据 location.host 判断测试 or 正式环境
const devUrl = '/dev'
const prodUrl = 'https://zhuanlan.zhihu.com'
const testUrl = 'https://test/api'
const isTest = loaction.host === 'https://test/api' ? 1 : 0
const baseUrl = process.env.NODE_ENV === 'production' ? (isTest ? testUrl : prodUrl) : devUrl
// 建议不要直接调用axios,采用创建实例的方式
// 集中处理异常情况
const instance = axios.create({
  timeout: 15000  // 请求超时时间
})
const method = (type, api, params) => {
  return new Promise((resolve, reject) => {
    instance[type](api, params).then(data => {
      if (data.status === 200 && data.data.status === 200) {
        resolve(data.data)
      } else {
        Vue.$vux.toast.show({
          type: 'warn',
          time: 1500,
          text: data.data.msg
        })
      }
    }).catch((err) => {
      Vue.$vux.toast.show({
        type: 'warn',
        time: 1500,
        text: '服务器繁忙'
      })
      reject(err)
    })
  })
}
/**
 * 加密算法
 * @params {*} 和后台商量要的参数
 */
const generateSignature = (param1, param2, param3) => md5()
/**
 * 拼接api默认参数
 * @param {*} api: 接口相对路径
 */
const stitching = (api) => {
  const val1 = store.getters.key1
  const val2 = store.getters.key2
  const val3 = 'value1'
  const timeStamp = Date.parse(new Date()) / 1000
  const sign = generateSignature(val1, val2, val3)
  return `${api}?timeStamp=${timeStamp}&key1=${val1}&key2=${val2}&key3=${val3}&sign=${sign}`
}
/**
 * post请求时携带的默认参数
 */
const extend = (data) => {
  return Object.assign({
    userId: store.getters.userInfo.userId
  }, data)
}
const ajaxGet = (api, data = null) => {
  return method('get', baseUrl + stitching(api), {params: data})
}
const ajaxPost = (api, data = null) => {
  return method('post', baseUrl + stitching(api), extend(data))
}
export {
  ajaxGet,
  ajaxPost
}

这是对 axios 做封装的一种形式，其中 generateSignature 函数是用来生成签名，通常需要携带时间戳，进行实效性验证。stitching 函数是用来对接口进行拼接处理的，post 和 get 请求的某些参数后台都会这里面拿。 extend 是为了 post 请求准备的。
当然还有了另一种形式的封装：

import axios from 'axios'
import { stringify } from 'qs'
import Cookies from 'js-cookie'
import { Toast } from 'vant'
const devUrl = '/liangchaowei'
const prodUrl = 'https://zhihu.com/api/'
const baseUrl = process.env.NODE_ENV === 'production' ? prodUrl : devUrl
const userInfo = JSON.parse(localStorage.getItem('userInfo') || Cookies.get('userInfo'))
/**
 * 设置请求头
 */
const getToken = data => {
  const { value1, value2 } = userInfo
  const secretKey1 = value1 || 'default'
  const secretKey2 = value2 || 'default'
  const newData = {}
  for (const key in data) {
    // 对象请求参数一系列操作
  }
  return {
    'X-customize-header1': secretKey1,
    'X-customize-header2': secretKey2
  }
}
const instance = axios.create({
  timeout: 10000
})
const method = (type, api, params, options) => {
  return new Promise((resolve, reject) => {
    instance[type](api, params, options).then(data => {
      if (data.status === 200 && data.data.code === 1) {
        resolve(data.data)
      } else {
        Toast({
          type: 'fail',
          message: data.data.msg,
          duration: 1000
        })
      }
    }).catch((err) => {
      reject(err)
    })
  })
}
const extend = (data, body) => {
  return Object.assign(body, data)
}
const ajaxGet = (api, data = null) => {
  const time = new Date().getTime()
  let body = {
    time: time,
    sign: getSign(time),
    userId: userInfo.userId
  }
  return method('get', baseUrl + api, {params: extend(data, body), headers: getToken(extend(data, body))})
}
const ajaxPost = (api, data = null) => {
  const time = new Date().getTime()
  let body = {
    time: time,
    sign: getSign(time),
    userId: userInfo.userId
  }
  return method('post', baseUrl + api, stringify(extend(data, body)), {headers: getToken(extend(data, body))})
}