Axios 簡易教程

標籤：要求方法   代理服務   參數   throw   通過   gre   tor   ane   function   

Axios 是一個基於 promise 的 HTTP 庫，支援攔截請求和響應，自動轉換 JSON 資料， 用戶端支援防禦?XSRF。

## 安裝

使用 npm:

$ npm install axios

## GET

執行 GET 請求,有兩種方式：

•    // 為給定 ID 的 user 建立請求  axios.get('/user?ID=12345')     .then(function (response) {           console.log(response);    })   .catch(function (error) {     console.log(error);  });

•   // 可選地，上面的請求可以這樣做  axios.get('/user', {      params: {           ID: 12345       }   })  .then(function (response) {       console.log(response);   })  .catch(function (error) {      console.log(error);   });

## POST

執行 POST 請求

     axios.post('/user', {       firstName: 'Fred',        lastName: 'Flintstone'     })     .then(function (response) {     console.log(response);      })      .catch(function (error) {          console.log(error);     }); 

執行多個並發請求

    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)

  // 發送 POST 請求    axios({       method: 'post',       url: '/user/12345',       data: {            firstName: 'Fred',           lastName: 'Flintstone'       }   });

axios(url[, config])

 // 發送 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]])

建立執行個體可以使用自訂配置建立一個 axios 執行個體axios.create([config])

      var instance = axios.create({            baseURL: 'https://some-domain.com/api/',            timeout: 1000,            headers: {'X-Custom-Header': 'foobar'}      });

## 請求配置總覽

這些是建立請求時可以用的配置選項。只有 url 是必需的。如果沒有指定 method，請求將預設使用 get 方法。

    // `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) {    })  }

### 攔截器

在請求或響應被 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 () {/.../});

錯誤處理

  xios.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 {        // Something happened in setting up the request that triggered an Error        console.log('Error', error.message);      }      console.log(error.config);    });

可以使用 validateStatus 配置選項定義一個自訂 HTTP 狀態代碼的錯誤範圍。

  axios.get('/user/12345', {    validateStatus: function (status) {      return status < 500; // 狀態代碼在大於或等於500時才會 reject    }  })

## 取消

Axios 的 cancel token API 基於cancelable promises proposal，它還處於第一階段。
可以使用 CancelToken.source Factory 方法建立 cancel token，像這樣：
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 {      // 處理錯誤    }  });  // 取消請求（message 參數是可選的）  source.cancel('Operation canceled by the user.');

還可以通過傳遞一個 executor 函數到 CancelToken 的建構函式來建立 cancel token：

    var CancelToken = axios.CancelToken;    var cancel;  axios.get('/user/12345', {    cancelToken: new CancelToken(function executor(c) {      // executor 函數接收一個 cancel 函數作為參數      cancel = c;    })  });  // 取消請求  cancel();

Axios 簡易教程