最近公司要重寫運營管理系統，不想再維護之前的backbone了，趕緊要求前端整個重寫。重開新坑，用了兩週多擼出了第一版，收穫很大。在實踐中學習永遠都是最高效的。趁熱把學到的東西都記錄總結下來，也算前端梳理一下思路。

相關部落格：

Axios

參考資料：文件

vue團隊本來有自己的vue-resource，後來感覺跟vue關係不大就不再維護也不再推薦了。官方推薦使用比較主流的Axios外掛。所以我後來也把vue-resource替換成了Axios，確實強大許多。
其實它的用法跟大多數ajax差不多，簡單看看很容易就明白了，我這裡只記錄一些值得記錄的點。

執行多個併發請求

function getUserAccount() {
  return axios.get('/user/12345')
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions')
}

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread((acct, perms) => {
   // 兩個請求現在都執行完成
 }))

攔截器的使用

攔截器是Axios超好用的一個功能，在ajax傳送request之前和接收到response之後分別有一個攔截器，靈活使用他們可以方便很多。可以直接按下邊的方法使用：

// 新增請求攔截器
axios.interceptors.request.use(function (config) {
 // 在傳送請求之前做些什麼
  return config;
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

// 新增響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應資料做點什麼
  return response;
}, function (error) {
  // 對響應錯誤做點什麼
  return
 
 Promise.reject(error);
});

常見的用途有：1. ajax模擬表單（自定義form這個method，然後配合qs包）；2. 根據本地和開發環境的區別，給ajax的url加上不同的字首。，例如：

// main.js
// 引入
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
// 當前程式碼執行在哪個環境中？ 開發環境還是生產環境
Vue.config.productionTip = process.env.NODE_ENV === 'production'
// 使用axios來發ajax
// 增加一個攔截器，當method為form時，使用表單提交的方式
// 使用qs包將data轉為表單資料
axios.interceptors.request.use((config) => {
  if (config.method === 'form') {
    config.method = 'post'
    config.data = qs.stringify(config.data)
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }
  // 若在本地開發環境，則給url增加 '/api' 字尾
  if (!Vue.config.productionTip) {
    config.url = '/api' + config.url
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
// 掛載在Vue原型上
Vue.prototype.$http = axios

檔案下載（匯出）

有時需要匯出的功能，比如傳給後端一些查詢引數，後端返回一個excel檔案下載下來，此時只要改變responseType即可：

this.$http({
  method: 'post',
  url: url,
  data: postData,
  responseType: 'blob'
}).then((res) => {
  if (res.data) {
    let blob = res.data
    let a = document.createElement('a')
    let url = window.URL.createObjectURL(blob)
    let filename = '檔名.xls'
    a.href = url
    a.download = filename
    a.click()
    window.URL.revokeObjectURL(url)
  }
}).catch((rej) => {
  this.tableLoading = false
  this.btnLoading = false
  alert('伺服器錯誤！')
})