vue axios全攻略
阿新 • • 發佈：2019-02-11
不再繼續維護vue-resource，並推薦大家使用 axios 開始，axios 被越來越多的人所瞭解。本來想在網上找找詳細攻略，突然發現，axios 的官方文件本身就非常詳細！！有這個還要什麼自行車！！所以推薦大家學習這種庫，最好詳細閱讀其官方文件。大概翻譯了一下 axios 的官方文件，相信大家只要吃透本文再加以實踐，axios 就是小意思啦！！
如果您覺得本文對您有幫助，不妨點個贊或關注收藏一下，您的鼓勵對我非常重要。
axios 簡介
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵：
- 從瀏覽器中建立 XMLHttpRequest
- 從 node.js 發出 http 請求
- 支援 Promise API
- 攔截請求和響應
- 轉換請求和響應資料
- 取消請求
- 自動轉換JSON資料
瀏覽器相容性
引入方式：
| 1 2 3 4 5 | $ npm install axios $ cnpm install axios //taobao源 $ bower install axios 或者使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
舉個栗子：
執行 GET 請求
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 向具有指定ID的使用者發出請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通過 params 物件傳遞引數
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error); |
執行 POST 請求
| 1 2 3 4 5 6 7 8 9 10 | axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); |
執行多個併發請求
| 1 2 3 4 5 6 7 8 9 10 11 12 | function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { //兩個請求現已完成 })); |
axios API
可以通過將相關配置傳遞給 axios 來進行請求。
axios(config)
| 1 2 3 4 5 6 7 8 9 | // 傳送一個 POST 請求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); |
axios(url[, config])
| 1 2 | // 傳送一個 GET 請求 (GET請求是預設請求模式) axios('/user/12345'); |
請求方法別名
為了方便起見，已經為所有支援的請求方法提供了別名。
- axios.request（config）
- axios.get（url [，config]）
- axios.delete（url [，config]）
- axios.head（url [，config]）
- axios.post（url [，data [，config]]）
- axios.put（url [，data [，config]]）
- axios.patch（url [，data [，config]]）
注意
當使用別名方法時，不需要在config中指定url，method和data屬性。
併發
幫助函式處理併發請求。
- axios.all（iterable）
- axios.spread（callback）
建立例項
您可以使用自定義配置建立axios的新例項。
axios.create（[config]）
| 1 2 3 4 5 | var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); |
例項方法
可用的例項方法如下所示。 指定的配置將與例項配置合併。
axios＃request（config）
axios＃get（url [，config]）
axios＃delete（url [，config]）
axios＃head（url [，config]）
axios＃post（url [，data [，config]]）
axios＃put（url [，data [，config]]）
axios＃patch（url [，data [，config]]）
請求配置
這些是用於發出請求的可用配置選項。 只有url是必需的。 如果未指定方法，請求將預設為GET。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | { // `url`是將用於請求的伺服器URL url: '/user', // `method`是發出請求時使用的請求方法 method: 'get', // 預設 // `baseURL`將被新增到`url`前面，除非`url`是絕對的。 // 可以方便地為 axios 的例項設定`baseURL`，以便將相對 URL 傳遞給該例項的方法。 baseURL: 'https://some-domain.com/api/', // `transformRequest`允許在請求資料傳送到伺服器之前對其進行更改 // 這隻適用於請求方法'PUT'，'POST'和'PATCH' // 陣列中的最後一個函式必須返回一個字串，一個 ArrayBuffer或一個 Stream transformRequest: [function (data) { // 做任何你想要的資料轉換 return data; }], // `transformResponse`允許在 then / catch之前對響應資料進行更改 transformResponse: [function (data) { // Do whatever you want to transform the data return data; }], // `headers`是要傳送的自定義 headers headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params`是要與請求一起傳送的URL引數 // 必須是純物件或URLSearchParams物件 params: { ID: 12345 }, // `paramsSerializer`是一個可選的函式，負責序列化`params` // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data`是要作為請求主體傳送的資料 // 僅適用於請求方法“PUT”，“POST”和“PATCH” // 當沒有設定`transformRequest`時，必須是以下型別之一： // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream data: { firstName: 'Fred' }, // `timeout`指定請求超時之前的毫秒數。 // 如果請求的時間超過'timeout'，請求將被中止。 timeout: 1000, // `withCredentials`指示是否跨站點訪問控制請求 // should be made using credentials withCredentials: false, // default // `adapter'允許自定義處理請求，這使得測試更容易。 // 返回一個promise並提供一個有效的響應（參見[response docs]（＃response-api）） adapter: function (config) { /* ... */ }, // `auth'表示應該使用 HTTP 基本認證，並提供憑據。 // 這將設定一個`Authorization'頭，覆蓋任何現有的`Authorization'自定義頭，使用`headers`設定。 auth: { username: 'janedoe', password: 's00pers3cret' }, // “responseType”表示伺服器將響應的資料型別 // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名稱 xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName`是攜帶xsrf令牌值的http頭的名稱 xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress`允許處理上傳的進度事件 onUploadProgress: function (progressEvent) { // 使用本地 progress 事件做任何你想要做的 }, // `onDownloadProgress`允許處理下載的進度事件 onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `maxContentLength`定義允許的http響應內容的最大大小 maxContentLength: 2000, // `validateStatus`定義是否解析或拒絕給定的promise // HTTP響應狀態碼。如果`validateStatus`返回`true`（或被設定為`null` promise將被解析;否則，promise將被 // 拒絕。 validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects`定義在node.js中要遵循的重定向的最大數量。 // 如果設定為0，則不會遵循重定向。 maxRedirects: 5, // 預設 // `httpAgent`和`httpsAgent`用於定義在node.js中分別執行http和https請求時使用的自定義代理。 // 允許配置類似`keepAlive`的選項， // 預設情況下不啟用。 httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy'定義代理伺服器的主機名和埠 // `auth`表示HTTP Basic auth應該用於連線到代理，並提供credentials。 // 這將設定一個`Proxy-Authorization` header，覆蓋任何使用`headers`設定的現有的`Proxy-Authorization` 自定義 headers。 proxy: { host: '127.0.0.1', port: 9000, auth: : { username: 'mikeymike', password: 'rapunz3l' } }, // “cancelToken”指定可用於取消請求的取消令牌 // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }) } |
使用 then 時，您將收到如下響應：
| 1 2 3 4 5 6 7 8 | axios.get('/user/12345') .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); }); |
配置預設值
您可以指定將應用於每個請求的配置預設值。
全域性axios預設值
| 1 2 3 | axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; |
自定義例項預設值
| 1 2 3 4 5 6 7 | //在建立例項時設定配置預設值 var instance = axios.create（{ baseURL：'https://api.example.com' }）; //在例項建立後改變預設值 instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN; |
配置優先順序順序
配置將與優先順序合併。 順序是lib / defaults.js中的庫預設值，然後是例項的defaults屬性，最後是請求的config引數。 後者將優先於前者。 這裡有一個例子。
| 1 2 3 4 5 6 7 8 9 10 11 12 | //使用庫提供的配置預設值建立例項 //此時，超時配置值為`0`，這是庫的預設值 var instance = axios.create（）; //覆蓋庫的超時預設值 //現在所有請求將在超時前等待2.5秒 instance.defaults.timeout = 2500; //覆蓋此請求的超時，因為它知道需要很長時間 instance.get（'/ longRequest'，{ timeout：5000 }）; |
攔截器
你可以擷取請求或響應在被 then 或者 catch 處理之前
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //新增請求攔截器 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 2 | var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor); |
你可以將攔截器新增到axios的自定義例項。
| 1 2 | var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/}); |
處理錯誤
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | axios.get（'/ user / 12345'） .catch（function（error）{ if（error.response）{ //請求已發出，但伺服器使用狀態程式碼進行響應 //落在2xx的範圍之外 console.log（error.response.data）; console.log（error.response.status）; console.log（error.response.headers）; } else { //在設定觸發錯誤的請求時發生了錯誤 console.log（'Error'，error.message）; }} console.log（error.config）; }）; |
您可以使用validateStatus配置選項定義自定義HTTP狀態碼錯誤範圍。
| 1 2 3 4 5 | axios.get（'/ user / 12345'，{ validateStatus：function（status）{ return status < 500; //僅當狀態程式碼大於或等於500時拒絕 }} }） |
消除
您可以使用取消令牌取消請求。
axios cancel token API基於可取消的promise提議，目前處於階段1。
您可以使用CancelToken.source工廠建立一個取消令牌，如下所示：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var CancelToken = axios.CancelToken; var source = CancelToken.source（）; axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯誤 } }); //取消請求（訊息引數是可選的） source.cancel（'操作被使用者取消。'）; |
您還可以通過將執行器函式傳遞給CancelToken建構函式來建立取消令牌：
| 1 2 3 4 5 6 7 8 9 10 11 12 | var CancelToken = axios.CancelToken; var cancel; axios.get（'/ user / 12345'，{ cancelToken：new CancelToken（function executor（c）{ //一個執行器函式接收一個取消函式作為引數 cancel = c; }） }）; // 取消請求 clear(); |
注意：您可以使用相同的取消令牌取消幾個請求。
使用application / x-www-form-urlencoded格式
預設情況下，axios將JavaScript物件序列化為JSON。 要以應用程式/ x-www-form-urlencoded格式傳送資料，您可以使用以下選項之一。
瀏覽器
在瀏覽器中，您可以使用URLSearchParams API，如下所示：
| 1 2 3 4 | var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params); |
請注意，所有瀏覽器都不支援URLSearchParams，但是有一個polyfill可用（確保polyfill全域性環境）。
或者，您可以使用qs庫對資料進行編碼：
| 1 2 | var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }); |
Node.js
在Node.js中，可以使用querystring模組，如下所示：
| 1 2 | var querystring = require('querystring'); axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }); |
你也可以使用qs庫。
Promise
axios 依賴本機要支援ES6 Promise實現。 如果您的環境不支援ES6 Promises，您可以使用polyfill。
TypeScript
axios包括TypeScript定義。
| 1 2 | import axios from 'axios'; axios.get('/user?ID=12345'); |
axios在很大程度上受到Angular提供的$http服務的啟發。 最終，axios努力提供一個在Angular外使用的獨立的$http-like服務。