axios統一封裝

本文代碼參考了網上別人的資料，經過修改而來

/**
 * Created by zxf on 2017/9/6.
 * 封裝統一的ajax請求，統一攔截請求，對不同的請求狀態封裝
 * 通常說, ajax 請求錯誤有兩種, 一種是網絡問題或者代碼問題所造成的 400, 500錯誤等,需要checkStatus方法攔截
 * 另外一種是請求參數后端通不過驗證, 由后端拋出的錯誤，需要checkCode攔截處理
 *第二種根據不同的后端框架或者程序猿又可以分成兩種, 一種是直接返回 json, 用一個 特別的 code 來區別正常請求返回的數據, 如:
 */
import qs from 'qs'
import axios from 'axios'

/**
 * axios請求攔截器
 * @param {object} config axios請求配置對象
 * @return {object} 請求成功或失敗時返回的配置對象或者promise error對象
 **/
axios.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * axios 響應攔截器
 * @param {object} response 從服務端響應的數據對象或者error對象
 * @return {object} 響應成功或失敗時返回的響應對象或者promise error對象
 **/
axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error)
})

/**
 * 請求發出后檢查返回的狀態碼,統一捕獲正確和錯誤的狀態碼，正確就直接返回response,錯誤就自定義一個返回對象
 * @param {object} response 響應對象
 * @return {object} 響應正常就返回響應數據否則返回錯誤信息
 **/
function checkStatus (response) {
  // 如果狀態碼正常就直接返回數據,這里的狀態碼是htttp響應狀態碼有400，500等，不是后端自定義的狀態碼
  if (response && ((response.status === 200 || response.status === 304 || response.status === 400))) {
    return response.data // 直接返回http response響應的data,此data會后端返回的數據數據對象，包含后端自定義的code,message,data屬性
  }
  return { // 自定義網絡異常對象
    code: '404',
    message: '網絡異常'
  }
}

/**
 * 檢查完狀態碼后需要檢查后如果成功了就需要檢查后端的狀態碼處理網絡正常時后台語言返回的響應
 * @param {object} res 是后台返回的對象或者自定義的網絡異常對象，不是http 響應對象
 * @return {object} 返回后台傳過來的數據對象，包含code,message,data等屬性，
 **/
// function checkCode (res) {
//   // 如果狀態碼正常就直接返回數據
//   console.log(res)
//   if (res.code === -404) { // 這里包括網絡異常，服務器異常等這種異常跟業務無關，直接彈窗警告
//     alert(res.message)
//     return {code: '', message: '網絡錯誤'}
//   } else { // 除了上面的異常就剩下后端自己返回的狀態code了這個直接返回出去供調用時根據不同的code做不同的處理
//     return res
//   }
// }

export default {
  post (url, data) {
    return axios({
      method: 'post',
      baseURL: process.env.BASE_URL,
      url: url,
      data: qs.stringify(data),
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      timeout: 10000
    }).then((res) => {
      return checkStatus(res)
    })
  },
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: process.env.BASE_URL,
      url,
      params,
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    )
  }

}