深入剖析axios.request

一、axios.request是什麼

axios是一個基於Promise的HTTP客戶端工具，可以用於瀏覽器和Node.js。axios.request是axios中用來請求數據的API，可以發送異步請求並獲取響應數據。在axios中，request是一個重要的請求方式，下面我們來詳細介紹它的各項功能。

二、axios.request的基本使用

在使用axios.request時我們需要傳入一個包含配置參數的對象，在其中指定method（請求方法）、url（請求地址）等選項。

axios.request({
  method: 'get',
  url: '/user/12345',
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

在這段代碼中，我們發送了一個GET請求到/user/12345這個地址，並在.then中打印出響應的數據，如果發生錯誤則在.catch中進行處理。

三、配置項

除了method和url參數外，axios.request還提供了許多其他的配置項，其中比較常用的有：

1、params：請求參數

參數是通過查詢字符串追加到URL中的，可以是一個對象或字符串。axios會自動將對象序列化成字符串，如：

axios.request({
  method: 'get',
  url: '/user',
  params: {
    id: '12345'
  }
})

這個請求的URL將會是 /user?id=12345。

2、timeout：超時時間

指定請求超時的毫秒數（0表示無超時時間），超時時請求將會被終止。

axios.request({
  method: 'get',
  url: '/user',
  timeout: 1000 // 超時時間1s
})

3、headers：請求頭

請求頭是一個對象，包含了需要發送的自定義HTTP頭，如下所示：

axios.request({
  method: 'get',
  url: '/user',
  headers: {'X-Requested-With': 'XMLHttpRequest'}
})

4、baseURL：基礎URL

指定URL的前綴，將會在每個請求的URL前面自動加上。如：

axios.request({
  method: 'get',
  url: '/user',
  baseURL: 'https://example.com/api/',
})

四、響應處理

axios默認會將響應數據以Promise的形式返回，可以通過.then()和.catch()方法進行處理。

axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response.data); // 響應數據
})
.catch(function (error) {
  console.log(error);
});

同時，響應數據中也會包含一些信息，如status和headers，可以通過response.status和response.headers來獲取。如下所示：

axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response.status); // 響應狀態碼
  console.log(response.headers); // 響應頭
})
.catch(function (error) {
  console.log(error);
});

五、取消請求

在某些情況下，我們需要取消正在進行的請求，比如在用戶離開當前頁面時取消請求以避免浪費資源。axios提供了一個取消請求的方法，如下所示：

// 創建取消請求的對象
var cancel = axios.CancelToken.source();

axios.request({
  method: 'get',
  url: '/user',
  cancelToken: cancel.token // 指定取消token
})
.then(function (response) {
  console.log(response.data); // 響應數據
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('請求已經被取消');
  } else {
    console.log(error);
  }
});

// 取消請求
cancel.cancel('取消請求');

這裡我們創建了一個CancelToken對象，並將其作為cancelToken的值傳入request請求中。然後在需要取消請求的時候調用cancel()方法即可取消請求。在響應中，我們可以通過axios.isCancel()方法判斷請求是否被取消了。

六、攔截器

攔截器是axios中常用的一個功能，可以在請求發送和響應接收的過程中進行預處理。

1、請求攔截器

在發送請求之前，攔截器可以進行一些預處理操作，比如添加請求頭等。可以通過axios.interceptors.request.use()方法添加攔截器，如下所示：

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在請求發送之前進行一些處理
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
}, function (error) {
  // 如果請求出錯了，也可以在這裡處理
  return Promise.reject(error);
});

// 發送請求
axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

這裡我們添加了一個請求攔截器，在請求發送之前，將Authorization頭加入到請求中以驗證用戶身份，並在請求出錯時通過Promise.reject()方法返回錯誤信息。

2、響應攔截器

在接收到響應之後，攔截器可以對響應進行處理，比如統一處理響應數據等。可以通過axios.interceptors.response.use()方法添加攔截器，如下所示：

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 在響應接收之後進行一些處理
  if(response.data.code === 200){
    return response.data;
  } else {
    return Promise.reject(response.data);
  }
}, function (error) {
  // 如果響應出錯了，也可以在這裡處理
  return Promise.reject(error);
});

// 發送請求
axios.request({
  method: 'get',
  url: '/user',
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

這裡我們添加了一個響應攔截器，在響應接收之後，對響應數據進行統一處理，如果響應數據中的code字段為200，就返迴響應數據，否則通過Promise.reject()方法返迴響應數據中的錯誤信息。

七、Conclusion

以上就是對axios.request進行詳細的剖析和講解，包括基礎使用、配置項、響應處理、取消請求和攔截器等方面的內容。axios.request是axios中一個非常重要的API，掌握了它，我們可以很方便地進行HTTP請求，並對請求進行預處理。