Axios實例詳解

一、Axios實例化

Axios是一個用於瀏覽器和Node.js的基於Promise的HTTP客戶端，可以使用簡單的方式進行HTTP請求和響應處理。

為了更好地管理HTTP請求，我們通常需要對Axios進行實例化來使用。在創建Axios實例時，我們可以傳遞一些默認配置項，這些配置項將被全局使用，並且在實例請求中可以覆蓋。以下是Axios實例化的示例代碼：


import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

以上示例代碼創建了一個新的Axios實例，並定義了三個默認配置項：

baseURL：用於設置請求的基礎URL，將自動添加到請求URL的前面。
timeout：用於設置請求超時時間，單位是毫秒。
headers：用於設置請求頭。

通過實例化，我們可以在整個應用中使用相同的默認配置項，並進行更靈活的個性化配置和處理。在接下來的小節中，我們將進一步介紹使用Axios實例的方式。

二、Axios實例請求中的params

在Axios實例請求時，我們可以使用params參數傳遞一些查詢字元串（Query String）參數，以便於後端進行數據的篩選以及傳遞一些額外的信息。以下是使用Axios實例請求的示例代碼：


instance.get('/user', {
  params: {
    name: 'example',
    age: 20
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代碼將發送一個GET請求到「/user」介面，並將「name」和「age」作為查詢字元串參數傳遞到後端。在控制台中，我們可以看到請求的完整URL。

需要注意的是，當我們使用params參數時，Axios將自動將查詢字元串參數進行編碼處理，以便於在URL中傳遞。如果需要手動編碼，則可以使用qs庫進行處理。

三、Axios實例方法

Axios實例提供了一系列HTTP方法，可以使用相應的方法進行數據的請求和響應處理。以下是Axios實例提供的一些常見方法：

instance.get(url[, config])
instance.delete(url[, config])
instance.head(url[, config])
instance.options(url[, config])
instance.post(url[, data[, config]])
instance.put(url[, data[, config]])
instance.patch(url[, data[, config]])

以上方法的詳細使用方式，可以參考Axios官方文檔。在使用Axios實例方法時，我們可以傳遞與實例化時的默認配置項不同的配置參數，以覆蓋默認配置。以下是一個使用Axios實例POST請求的示例代碼：


instance.post('/user', {
  name: 'example',
  age: 20
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代碼將發送一個POST請求到「/user」介面，並將{name: ‘example’, age: 20}作為請求體數據傳遞到後端。在控制台中，我們可以看到請求的詳細信息以及響應結果。

四、Axios實例對象

在使用Axios實例時，我們可以訪問到以下三個重要的對象：

instance.defaults：包含實例的默認配置項。
instance.interceptors：用於註冊全局攔截器。
instance.CancelToken：用於取消請求。

下面我們將對以上三個對象進行簡單的介紹。

1. instance.defaults

通過訪問instance.defaults，我們可以獲取到實例的默認配置項，並進行修改和覆蓋。以下是一些常見的操作：

修改實例的默認超時時間：


instance.defaults.timeout = 10000;

添加自定義的請求頭：


instance.defaults.headers.common['Authorization'] = 'Bearer token123';

2. instance.interceptors

使用Axios時，攔截器是非常重要的。通過攔截器，我們可以在請求和響應發生前後添加一些自定義的處理邏輯。以下是Axios提供的兩個攔截器：

請求攔截器：在發起請求前，對請求進行處理。
響應攔截器：在接收到響應後，對響應進行處理。

在實例化時，我們可以定義攔截器。以下是一個在請求攔截器中添加token頭的示例：


instance.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

以上代碼將在每次請求頭中添加token信息。此處使用localStorage存儲了token信息，如果需要更安全的方式存儲可以使用cookie或session進行存儲。

3. instance.CancelToken

有時候，我們需要在請求發送後進行取消操作，在Axios中可以通過使用CancelToken實現取消請求的功能。以下是一個使用CancelToken取消請求的示例代碼：


const CancelToken = axios.CancelToken;
const source = CancelToken.source();

instance.get('/user', {
  cancelToken: source.token
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('請求已取消：', error.message);
  } else {
    console.log(error);
  }
});

// 取消請求
source.cancel('請求被用戶取消');

以上代碼使用了axios.isCancel()方法判斷請求是否被取消，如果被取消則列印出相應的信息。在取消請求時，我們可以傳遞一個錯誤信息，方便進行調試。

五、Axios實例什麼意思

在Axios中，實例化是指創建一個新的Axios實例，使用該實例進行HTTP請求和響應處理。與全局的Axios對象不同，實例化對象具有自己的默認配置，可以通過實例對象中的方法進行請求的個性化配置。在一個應用中，可以創建多個Axios實例，以適應不同的請求需求。

六、Axios實例化內存泄漏

在應用開發中，內存泄漏是一個常見的問題，Axios也不例外。為了避免內存泄漏，我們需要在Axios實例不再使用時進行清理，以釋放相應的內存。以下是Axios實例內存清理的示例代碼：


instance = null;

通過將實例變數賦值為null，可以將指向實例的引用斷開，從而釋放相應的內存空間。

七、Axios實例js中訪問

在JavaScript中，我們可以使用import來引入Axios實例，以便於使用。以下是JS中使用Axios實例的示例代碼：


import { instance } from './axios-instance';

instance.get('/user')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

這裡我們通過import引入了一個命名為instance的Axios實例，然後在調用時直接使用即可。

八、Axios實例的介面怎麼單獨帶請求頭

在使用Axios時，我們經常需要針對某個特定URL，添加自定義的請求頭進行處理。以下是針對單個URL添加請求頭的示例代碼：


const headers = { 'X-Custom-Header': 'foobar' };

instance.get('/user/profile', { headers })
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代碼將添加一個名為X-Custom-Header的自定義請求頭，發送一個GET請求到「/user/profile」介面。

九、Axios的實現原理

Axios是基於Promise的JavaScript HTTP客戶端庫，底層使用XMLHttpRequest實現。主要的實現方式是構建一個HttpRequest對象，向伺服器發起請求並返回對應的響應結果。

在Axios中，Promise被廣泛應用，可以通過Promise對非同步請求進行封裝和處理。在同步請求中，需要使用async和await進行處理。

這裡我們不會過多地介紹Axios的實現原理，如果您對此感興趣，可以查閱相關的資料進行了解。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/239697.html