Vue.js學習(一)—— axios學習
一、axios簡介
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特徵:
- 從瀏覽器中建立 XMLHttpRequest
- 從 node.js 發出 http 請求
- 支援 Promise API
- 攔截請求和響應
- 轉換請求和響應資料
- 取消請求
- 自動轉換JSON資料
- 客戶端支援防止CSRF/XSRF
二、瀏覽器相容性
三、引入安裝方式
1、npm安裝
npm install axios
發出警告,沒有對應檔案資訊
解決方法:執行該命令之前,使用命令: npm init 命令生成package.json
注意:npm init的時候package name不能和你安裝的包名axios相同,鬥則會衝突。npm初始化完畢之後會在對應目錄(E:\Java\setting\axios)下生成package.json,內容資訊與你初始化時候的資訊一致,內容如下:
然後執行npm install axios之後檔案目錄如下:
至此安裝完畢
2、cnpm安裝
cnpm install axios //taobao源
備註:cnpm安裝方式,不需要npm init
3、bower安裝
bower install axios
顯示'bower' 不是內部或外部命令,也不是可執行的程式或批處理檔案。
解決方法:按照以下步驟先安裝bower
(1)命令列輸入:
cnpm install bower -g(若沒有安裝cnpm,則npm install bower -g)
備註:之所以顯示在這個位置,是因為我在上一篇部落格(https://www.cnblogs.com/javahr/p/13226360.html)中已經設定了全域性目錄
(2)命令列檢測版本號
bower -v
至此安裝成功,我們繼續之前的命令吧
bower install axios
安裝結果
4、使用cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
四、執行GET\POST\多個併發示例
1、執行GET請求
// 向具有指定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); });
2、執行POST請求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
3、執行多個併發請求
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 來進行請求。
1、axios(config)
// 傳送一個 POST 請求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
2、axios(url[, config])
// 傳送一個 GET 請求 (GET請求是預設請求模式) axios('/user/12345');
3、請求方法別名
為了方便起見,已經為所有支援的請求方法提供了別名。
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屬性。
4、併發
幫助函式處理併發請求。
axios.all(iterable)
axios.spread(callback)
5、建立例項
您可以使用自定義配置建立axios的新例項。
axios.create([config])
var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });
6、例項方法
可用的例項方法如下所示。 指定的配置將與例項配置合併。
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。
{ // `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 時,您將收到如下響應:
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); });
七、配置預設值
您可以指定將應用於每個請求的配置預設值。
1、全域性axios預設值
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';
2、自定義例項預設值
//在建立例項時設定配置預設值 var instance = axios.create({ baseURL:'https://api.example.com' }); //在例項建立後改變預設值 instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;
3、配置優先順序順序
配置將與優先順序合併。 順序是lib / defaults.js中的庫預設值,然後是例項的defaults屬性,最後是請求的config引數。 後者將優先於前者。 這裡有一個例子。
//使用庫提供的配置預設值建立例項 //此時,超時配置值為`0`,這是庫的預設值 var instance = axios.create(); //覆蓋庫的超時預設值 //現在所有請求將在超時前等待2.5秒 instance.defaults.timeout = 2500; //覆蓋此請求的超時,因為它知道需要很長時間 instance.get('/ longRequest',{ timeout:5000 });
八、攔截器
你可以擷取請求或響應在被 then 或者 catch 處理之前
//新增請求攔截器 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); });
如果你以後可能需要刪除攔截器。
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
你可以將攔截器新增到axios的自定義例項。
var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});
九、處理錯誤
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狀態碼錯誤範圍。
axios.get('/ user / 12345',{ validateStatus:function(status){ return status < 500; //僅當狀態程式碼大於或等於500時拒絕 }} })
十、消除
您可以使用取消令牌取消請求。
axios cancel token API基於可取消的promise提議,目前處於階段1
您可以使用CancelToken.source工廠建立一個取消令牌,如下所示:
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建構函式來建立取消令牌:
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格式傳送資料,您可以使用以下選項之一。
1、瀏覽器
在瀏覽器中,您可以使用URLSearchParams API,如下所示:
var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);
請注意,所有瀏覽器都不支援URLSearchParams,但是有一個polyfill可用(確保polyfill全域性環境)。
或者,您可以使用qs庫對資料進行編碼:
var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 });
2、Node.js
在node.js中,可以使用querystring模組,如下所示:
var querystring = require('querystring'); axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });
你也可以使用qs庫。
十二、Promise
axios 依賴本機要支援ES6 Promise實現。 如果您的環境不支援ES6 Promises,您可以使用polyfill。
十三、TypeScript
axios包括TypeScript定義。
import axios from 'axios'; axios.get('/user?ID=12345');
axios在很大程度上受到Angular提供的$http服務的啟發。 最終,axios努力提供一個在Angular外使用的獨立的$http-like服務。
參考原文地址:https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/