淺談axios

標籤：stat   cti   target   對象   evel   patch   develop   自訂   resource   

在我們的項目中有用到:

• fetch
  有直接用的，也有自己封裝之後用的;
• vue-resource
  在vue1的時候使用，把方法抽象出來後，總需要往方法裡傳 this.$http ,感覺是個超級不爽的設計，在vue2的時候棄用；
• Axios
  這是一個非常棒的設計，它是借用angularJs的http + httpBackend的概念，對unit test，mocking data比較方便，替換一個假的backend就可以，而且代碼扣除注釋，500行左右；

那麼現在我們來詳細瞭解一下Axios (朋友圈有前端同學叫它 “阿迪奧克斯”??)

二、詳解axios

1. Axios是什麼

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。(一看是基於promise是不是就對它的API有了大概的瞭解？哈哈哈)

2. Axios的特點

• 從瀏覽器中建立 XMLHttpRequests
• 從 node.js 建立 http 請求
• 支援 Promise API
• 攔截請求和響應 （就是有interceptor）
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 用戶端支援防禦 XSRF

ps: 可能大家對interceptor（攔截器）並不是很熟悉，在這裡作下介紹，攔截器可以在請求發送前和發送請求後做一些處理。有一張圖可以清晰的瞭解它在一次HTTP請求中做了什麼，如

image.png

3.相容性

image.png

4.安裝
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

5.基本用法

//執行get請求// Make a request for a user with a given IDaxios.get(‘/user?ID=12345‘)  .then(function (response) {    console.log(response);  }).catch(function (error) {    console.log(error);  });// Optionally the request above could also be done asaxios.get(‘/user‘, {    params: {      ID: 12345    }  }).then(function (response) {    console.log(response);  }).catch(function (error) {    console.log(error);  });

是不是都在then,catch裡處理response，感覺fetch差不多，寫起來很方便
6.使用流程
本來想在這貼Axios API,這跟大家讀api文檔無異，所以在這裡貼一下我們是如何使用的吧，或許對你更有協助

//首先我們來建立一個Axios執行個體var axiosIns = axios.create({  baseURL: ‘https://some-domain.com/api/‘,  timeout: 1000,  headers: {‘X-product‘: ‘h5‘}});//設定request攔截器axiosIns.interceptors.request.use((request) => {//在這裡處理request，可以對所有請求統一處理要求標頭等})//設定response攔截器axiosIns.interceptors.response.use((response) => {       //在這裡處理response，這是全域的，對所有使用axios的請求起作用 });

//可以將上邊的建立執行個體和設定的攔截器封裝成函數，之後直接調用就Ok//執行個體方法//以下是可用的執行個體方法。指定的配置將與執行個體的配置合并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` 是用於請求的伺服器 URL  url: ‘/user‘,  // `method` 是建立請求時使用的方法  method: ‘get‘, // 預設是 get  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。  // 它可以通過設定一個 `baseURL` 便於為 axios 執行個體的方法傳遞相對 URL  baseURL: ‘https://some-domain.com/api/‘,  // `transformRequest` 允許在向伺服器發送前，修改請求資料  // 只能用在 ‘PUT‘, ‘POST‘ 和 ‘PATCH‘ 這幾個要求方法  // 後面數組中的函數必須返回一個字串，或 ArrayBuffer，或 Stream  transformRequest: [function (data) {    // 對 data 進行任意轉換處理    return data;  }],  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應資料  transformResponse: [function (data) {    // 對 data 進行任意轉換處理    return data;  }],  // `headers` 是即將被發送的自訂要求標頭  headers: {‘X-Requested-With‘: ‘XMLHttpRequest‘},  // `params` 是即將與請求一起發送的 URL 參數  // 必須是一個無格式對象(plain object)或 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  // - 瀏覽器專屬：FormData, File, Blob  // - Node 專屬： Stream  data: {    firstName: ‘Fred‘  },  // `timeout` 指定請求逾時的毫秒數(0 表示無逾時時間)  // 如果請求話費了超過 `timeout` 的時間，請求將被中斷  timeout: 1000,  // `withCredentials` 表示跨域請求時是否需要使用憑證  withCredentials: false, // 預設的  // `adapter` 允許自訂處理請求，以使測試更輕鬆  // 返回一個 promise 並應用一個有效響應 (查閱 [response docs](#response-api)).  adapter: function (config) {    /* ... */  },  // `auth` 表示應該使用 HTTP 基礎驗證，並提供憑據  // 這將設定一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設定的自訂 `Authorization`頭  auth: {    username: ‘janedoe‘,    password: ‘s00pers3cret‘  },  // `responseType` 表示伺服器響應的資料類型，可以是 ‘arraybuffer‘, ‘blob‘, ‘document‘, ‘json‘, ‘text‘, ‘stream‘  responseType: ‘json‘, // 預設的  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱  xsrfCookieName: ‘XSRF-TOKEN‘, // default  // `xsrfHeaderName` 是承載 xsrf token 的值的 HTTP 頭的名稱  xsrfHeaderName: ‘X-XSRF-TOKEN‘, // 預設的  // `onUploadProgress` 允許為上傳處理進度事件  onUploadProgress: function (progressEvent) {    // 對原生進度事件的處理  },  // `onDownloadProgress` 允許為下載處理進度事件  onDownloadProgress: function (progressEvent) {    // 對原生進度事件的處理  },  // `maxContentLength` 定義允許的響應內容的最大尺寸  maxContentLength: 2000,  // `validateStatus` 定義對於給定的HTTP 響應狀態代碼是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者設定為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte  validateStatus: function (status) {    return status >= 200 && status < 300; // 預設的  },  // `maxRedirects` 定義在 node.js 中 follow 的最大重新導向數目  // 如果設定為0，將不會 follow 任何重新導向  maxRedirects: 5, // 預設的  // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用於定義在執行 http 和 https 時使用的自訂代理。允許像這樣配置選項：  // `keepAlive` 預設沒有啟用  httpAgent: new http.Agent({ keepAlive: true }),  httpsAgent: new https.Agent({ keepAlive: true }),  // ‘proxy‘ 定義Proxy 伺服器的主機名稱和連接埠  // `auth` 表示 HTTP 基礎驗證應當用於串連代理，並提供憑據  // 這將會設定一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設定的自訂 `Proxy-Authorization` 頭。  proxy: {    host: ‘127.0.0.1‘,    port: 9000,    auth: : {      username: ‘mikeymike‘,      password: ‘rapunz3l‘    }  },  // `cancelToken` 指定用於取消請求的 cancel token  // （查看後面的 Cancellation 這節瞭解更多）  cancelToken: new CancelToken(function (cancel) {  })}

補充說明：
XMLHttpRequest 或 Fetch都是瀏覽器實現的功能，而axios是我們封裝的axios庫

7.參考資料
https://github.com/mzabriskie/axios

瓦斯程式媛
連結：https://www.jianshu.com/p/065294e2711c

淺談axios