涉及點：
1、axios官方文件（axios安裝、請求攔截器、響應攔截器、axios請求配置選項）
2、promise使用 （resolve、reject、.then、.catch）
3、函式封裝，全域性使用

本文封裝理念：單獨封裝一個axios模組檔案，並將其掛在至main.js中，供全域性使用

步驟1：npm安裝axios至當前專案中，如下

npm install axios --save 

步驟2：新建專案目錄如下，主要涉及：

                                                     ~直接上程式碼~
 

• config.js檔案

// axios中請求配置有baseURL選項，表示請求URL公共部分。
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL

export const baseURL = 'http://XXXXXXXX.com/'

• axios.js檔案

import axios from 'axios'
import qs from 'qs'
// 在config.js檔案中統一存放一些公共常量，方便之後維護
import { baseURL } from './config.js'

// 新增請求攔截器，在傳送請求之前做些什麼(**具體檢視axios文件**)--------------------------------------------
 

axios.interceptors.request.use(function (config) {
  // 顯示loading
  return config
}, function (error) {
  // 請求錯誤時彈框提示，或做些其他事
  return Promise.reject(error)
})

// 新增響應攔截器(**具體檢視axios文件**)----------------------------------------------------------------
axios.interceptors.response.use(function (response) {
 

  // 對響應資料做點什麼，允許在資料返回客戶端前，修改響應的資料
  // 如果只需要返回體中資料，則如下，如果需要全部，則 return response 即可
  return response.data
}, function (error) {
  // 對響應錯誤做點什麼
  return Promise.reject(error)
})

// 封裝資料返回失敗提示函式---------------------------------------------------------------------------
function errorState (response) {
  // 隱藏loading
  // 如果http狀態碼正常，則直接返回資料
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    // 如果不需要除了data之外的資料，可以直接 return response.data
    return response
  } else {
    alert('資料獲取錯誤')
  }
}

// 封裝資料返回成功提示函式---------------------------------------------------------------------------
function successState (res) {
  // 隱藏loading
  // 統一判斷後端返回的錯誤碼(錯誤碼與後臺協商而定)
  if (res.data.code === '000000') {
    alert('success')
    return res
  }
}

// 封裝axios--------------------------------------------------------------------------------------
function apiAxios (method, url, params) {
  let httpDefault = {
    method: method,
    baseURL: baseURL,
    url: url,
    // `params` 是即將與請求一起傳送的 URL 引數
    // `data` 是作為請求主體被髮送的資料
    params: method === 'GET' || method === 'DELETE' ? params : null,
    data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
    timeout: 10000
  }

  // 注意**Promise**使用(Promise首字母大寫)
  return new Promise((resolve, reject) => {
    axios(httpDefault)
      // 此處的.then屬於axios
      .then((res) => {
        successState(res)
        resolve(res)
      }).catch((response) => {
        errorState(response)
        reject(response)
      })
  })
}

// 輸出函式getAxios、postAxios、putAxios、delectAxios，供其他檔案呼叫-----------------------------
// Vue.js的外掛應當有一個公開方法 install。這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件。
export default {
  install: function (Vue) {
    Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
    Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
    Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
    Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
  }
}

注意：傳送請求時params和data的區別

– 在使用axios時，注意到配置選項中包含params和data兩者，他們使用場景不同。

1. params是新增到url的請求字串中的，用於get請求。
2. data是新增到請求體（body）中的，用於post請求。

比如對於下面的get請求：

axios.get('/user', {
    params: {
      ID: 12345
    }
  })

如果我們將params修改為data，顯然是不能請求成功的，因為get請求中不存在data這個選項。

番外篇：如果不需要全域性使用，輸出函式時，程式碼如下（全域性使用者，請忽略）

// 注：如果上述export default是如下寫法，則不需要再mian.js中引入，直接在需要使用的檔案中import，並使用即可。例如用axios.get()呼叫get方法；
 export default {
   get: (method, url, params) => apiAxios('get', url, params),
   post: (method, url, params) => apiAxios('post', url, params)
 }

• main.js檔案

// 在main.js中引入axios.js檔案，並Vue.use()使用---------------------------------------

• 在需要使用的檔案中直接使用 this.axios檔案中輸出的函式名（例如this.getAxios），例如：

end~