axios和application/json的使用

一、axios基本使用

axios是一個基於Promise的HTTP客戶端，用於瀏覽器和Node.js環境中。可以發送GET、POST、PUT、DELETE等HTTP請求，支持Promise API，可以攔截請求和響應，也可以使用瀏覽器的XHR api發送請求。

下面是一個簡單的例子：

axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

其中，axios.get()會返回一個Promise，當Promise被resolve時候，會傳遞response參數。

二、發送application/json格式的數據

當需要傳遞json格式的數據時，可以使用以下方法：

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

其中，使用headers指定Content-Type為application/json，服務器可以通過request的Content-Type來判斷請求數據的格式。

三、處理application/json格式的響應數據

當服務器響應的數據格式為application/json時，axios會自動將響應數據解析為json格式。

axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

其中，response.data為服務器響應的json數據，可以直接使用。

四、攔截請求和響應

axios可以使用interceptors完成請求和響應的攔截。

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);
});

其中，interceptors.request用於攔截請求，interceptors.response用於攔截響應。其中兩個匿名函數都需要返回一個Promise。

五、總結

通過以上例子，我們可以知道axios是一個非常強大的HTTP客戶端，可以處理複雜的請求和響應數據格式。通過攔截器，還可以對請求和響應進行統一處理。以上是axios和application/json格式的使用方法，寫得比較簡單，實際使用中還可以更加靈活地使用axios完成各種HTTP請求。