axios使用筆記

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);
  });
複製代碼