Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特點：
- 從瀏覽器中建立 XMLHttpRequests
- 從 node.js 建立 http 請求
- 支援 Promise API
- 攔截請求和響應
- 轉換請求資料和響應資料
- 取消請求
- 自動轉換 JSON 資料
- 客戶端支援防禦 XSRF
我在做Spring Boot+Vue前後端分離專案的時候，是使用了這個庫進行的前後端對接。
這個東西很簡單，它的使用說明文件也很短小精悍，而我在這也不是想把它全部介紹一遍，只是記下我在專案中使用到的部分。
安裝有三種途徑：
- npm
$ npm install axios
複製程式碼- bower
$ bower install axios
複製程式碼- cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
複製程式碼request和response
request
前端向後端傳送請求
axios提供了所有它所支援的請求方法的別名，可以直接用，諸如：
axios.get(url[, config])
axios.post(url[, data[, config]])
。。。。。。
引數可以不用指定，但我在這使用了axios提供的介面 axios(config)，自己定義了配置
export const postKeyValueRequest = (url, params) => {
return axios({
// `method` 是建立請求時使用的方法
method: 'post',
// `url` 是用於請求的伺服器 URL
url: `${base}${url}`,
// `data` 是作為請求主體被髮送的資料
data: params,
// `transformRequest` 允許在向伺服器傳送前，修改請求資料，只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法，後面陣列中的函式必須返回一個字串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
// `headers` 是即將被髮送的自定義請求頭
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
複製程式碼=> 是 箭頭函式，不瞭解的可以點選連結
我自己的請求到此就配置好了一個，之後可以配置多個方法進行呼叫。不過請求的配置還有許多屬性，有需求的可以自己去看看
response
前端接收後端響應的請求
一個response的相應資料結構如下：
{
// `data` 由伺服器提供的響應
data: {},
// `status` 來自伺服器響應的 HTTP 狀態碼
status: 200,
// `statusText` 來自伺服器響應的 HTTP 狀態資訊
statusText: 'OK',
// `headers` 伺服器響應的頭
headers: {},
// `config` 是為請求提供的配置資訊
config: {}
}
複製程式碼可以通過then或catch接收，寫法如下：
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
});
複製程式碼攔截器
攔截器在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);
});
複製程式碼