快捷導(dǎo)航

使用Axios攔截器優(yōu)化HTTP請(qǐng)求與響應(yīng)的實(shí)踐案例

更新時(shí)間：2024年11月17日 11:31:53 作者：cooldream2009

在前端開發(fā)中,HTTP 請(qǐng)求是與后端交互的重要方式,為了提高代碼的可維護(hù)性、復(fù)用性以及用戶體驗(yàn),使用 Axios 攔截器是非常常見的做法,本文將詳細(xì)介紹如何使用 Axios 的請(qǐng)求攔截器和響應(yīng)攔截器,需要的朋友可以參考下

前言

在前端開發(fā)中，HTTP 請(qǐng)求是與后端交互的重要方式。為了提高代碼的可維護(hù)性、復(fù)用性以及用戶體驗(yàn)，使用 Axios 攔截器是非常常見的做法。通過攔截器，我們可以集中管理請(qǐng)求和響應(yīng)的邏輯，比如配置請(qǐng)求頭、處理錯(cuò)誤信息等。本文將詳細(xì)介紹如何使用 Axios 的請(qǐng)求攔截器和響應(yīng)攔截器，并結(jié)合實(shí)踐案例，分享如何讓攔截器為開發(fā)效率和代碼質(zhì)量保駕護(hù)航。

1. Axios 簡介與攔截器概念

1.1 Axios 的特點(diǎn)

Axios 是一個(gè)基于 Promise 的 HTTP 庫，支持在瀏覽器和 Node.js 環(huán)境下運(yùn)行。它提供了許多開箱即用的功能，比如：

請(qǐng)求和響應(yīng)的攔截。
自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)。
超時(shí)設(shè)置和取消請(qǐng)求。
支持跨域。
客戶端防御 XSRF 攻擊等。

這些功能讓 Axios 成為目前主流的 HTTP 請(qǐng)求庫之一。

1.2 什么是攔截器

攔截器是 Axios 提供的一種機(jī)制，它允許開發(fā)者在請(qǐng)求發(fā)送前或響應(yīng)到達(dá)后對(duì)數(shù)據(jù)進(jìn)行統(tǒng)一處理。具體分為：

請(qǐng)求攔截器：攔截并處理即將發(fā)出的請(qǐng)求，比如添加統(tǒng)一的請(qǐng)求頭、添加認(rèn)證 token 等。
響應(yīng)攔截器：攔截并處理收到的響應(yīng)，比如解析數(shù)據(jù)結(jié)構(gòu)、統(tǒng)一處理錯(cuò)誤提示等。

使用攔截器可以顯著簡化代碼邏輯，并提高復(fù)用性。

2. 請(qǐng)求攔截器的應(yīng)用與實(shí)踐

2.1 請(qǐng)求攔截器的作用

請(qǐng)求攔截器主要用于處理以下場(chǎng)景：

添加統(tǒng)一的請(qǐng)求頭：比如設(shè)置 Content-Type、添加認(rèn)證 Token。
記錄和調(diào)試：對(duì)每一個(gè)請(qǐng)求打印日志，便于調(diào)試和監(jiān)控。
預(yù)處理請(qǐng)求數(shù)據(jù)：在發(fā)送請(qǐng)求之前對(duì)數(shù)據(jù)格式進(jìn)行處理。

2.2 請(qǐng)求攔截器實(shí)現(xiàn)

以下是一個(gè)基本的請(qǐng)求攔截器實(shí)現(xiàn)示例：

// 引入 axios
import axios from 'axios';

// 創(chuàng)建 axios 實(shí)例
const baseURL = 'http://localhost:8080';
const instance = axios.create({ baseURL });

// 添加請(qǐng)求攔截器
instance.interceptors.request.use(
  config => {
    // 在請(qǐng)求發(fā)送前處理請(qǐng)求
    config.headers['Content-Type'] = 'application/json'; // 設(shè)置統(tǒng)一的請(qǐng)求頭
    const token = localStorage.getItem('token'); // 從本地存儲(chǔ)獲取 token
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // 為每個(gè)請(qǐng)求添加認(rèn)證信息
    }
    return config;
  },
  error => {
    // 處理請(qǐng)求錯(cuò)誤
    console.error('請(qǐng)求錯(cuò)誤:', error);
    return Promise.reject(error);
  }
);

export default instance;

在這個(gè)實(shí)現(xiàn)中，我們完成了：

設(shè)置基礎(chǔ) URL：通過 axios.create 設(shè)置公共的 API 地址。
添加請(qǐng)求頭：為每個(gè)請(qǐng)求設(shè)置 Content-Type 和 Authorization。
錯(cuò)誤處理：捕獲請(qǐng)求配置過程中的錯(cuò)誤并打印日志。

3. 響應(yīng)攔截器的應(yīng)用與實(shí)踐

3.1 響應(yīng)攔截器的作用

響應(yīng)攔截器主要處理以下場(chǎng)景：

提取核心數(shù)據(jù)：很多后端返回的數(shù)據(jù)結(jié)構(gòu)是嵌套的，通過攔截器可以直接提取需要的核心數(shù)據(jù)。
統(tǒng)一處理錯(cuò)誤：捕獲 HTTP 錯(cuò)誤碼并展示友好的提示。
日志記錄和調(diào)試：記錄響應(yīng)信息，便于分析問題。

3.2 響應(yīng)攔截器實(shí)現(xiàn)

以下是一個(gè)響應(yīng)攔截器的示例：

// 添加響應(yīng)攔截器
instance.interceptors.response.use(
  response => {
    // 處理響應(yīng)數(shù)據(jù)
    const result = response.data; // 假設(shè)后端返回 { code: 200, data: {...}, message: '成功' }
    if (result.code !== 200) {
      // 如果返回碼不是 200，認(rèn)為請(qǐng)求失敗
      alert(result.message || '請(qǐng)求失敗');
      return Promise.reject(new Error(result.message));
    }
    return result.data; // 直接返回核心數(shù)據(jù)
  },
  error => {
    // 處理響應(yīng)錯(cuò)誤
    if (error.response) {
      // 根據(jù) HTTP 狀態(tài)碼給出提示
      const status = error.response.status;
      if (status === 401) {
        alert('未授權(quán)，請(qǐng)重新登錄');
      } else if (status === 500) {
        alert('服務(wù)器錯(cuò)誤，請(qǐng)稍后重試');
      } else {
        alert(`請(qǐng)求錯(cuò)誤，狀態(tài)碼：${status}`);
      }
    } else {
      alert('網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)檢查您的網(wǎng)絡(luò)連接');
    }
    return Promise.reject(error);
  }
);

在這個(gè)實(shí)現(xiàn)中，我們完成了：

數(shù)據(jù)提取：直接返回后端數(shù)據(jù)中的 data 部分。
錯(cuò)誤提示：根據(jù)不同的狀態(tài)碼給出提示，比如未授權(quán)、服務(wù)器錯(cuò)誤等。
網(wǎng)絡(luò)異常處理：當(dāng)服務(wù)器無法響應(yīng)時(shí)，給出通用提示。

4. 綜合實(shí)例：一個(gè)完整的 Axios 配置

以下是將請(qǐng)求攔截器和響應(yīng)攔截器結(jié)合的完整實(shí)現(xiàn)：

import axios from 'axios';

const baseURL = 'http://localhost:8080';
const instance = axios.create({ baseURL });

// 請(qǐng)求攔截器
instance.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json';
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.error('請(qǐng)求錯(cuò)誤:', error);
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器
instance.interceptors.response.use(
  response => {
    const result = response.data;
    if (result.code !== 200) {
      alert(result.message || '請(qǐng)求失敗');
      return Promise.reject(new Error(result.message));
    }
    return result.data;
  },
  error => {
    if (error.response) {
      const status = error.response.status;
      if (status === 401) {
        alert('未授權(quán)，請(qǐng)重新登錄');
      } else if (status === 500) {
        alert('服務(wù)器錯(cuò)誤，請(qǐng)稍后重試');
      } else {
        alert(`請(qǐng)求錯(cuò)誤，狀態(tài)碼：${status}`);
      }
    } else {
      alert('網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)檢查您的網(wǎng)絡(luò)連接');
    }
    return Promise.reject(error);
  }
);

export default instance;

5. 使用攔截器的好處與注意事項(xiàng)

5.1 優(yōu)勢(shì)

代碼復(fù)用：將公共邏輯集中到攔截器中，減少重復(fù)代碼。
提高維護(hù)性：當(dāng)需求變更時(shí)，只需修改攔截器即可應(yīng)用到所有請(qǐng)求。
增強(qiáng)用戶體驗(yàn)：通過統(tǒng)一的錯(cuò)誤處理，提升應(yīng)用的穩(wěn)定性和友好性。

5.2 注意事項(xiàng)

攔截器順序：多個(gè)攔截器時(shí)，執(zhí)行順序與注冊(cè)順序一致。use 方法中的第一個(gè)函數(shù)處理成功，第二個(gè)函數(shù)處理錯(cuò)誤。
避免無限循環(huán)：在攔截器中若對(duì)請(qǐng)求進(jìn)行重試或修改，應(yīng)小心避免引發(fā)遞歸調(diào)用。
捕獲錯(cuò)誤：確保所有 Promise 都有正確的錯(cuò)誤處理，避免意外崩潰。