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

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

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

前言

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

1. Axios 簡介與攔截器概念

1.1 Axios 的特點

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

請求和響應的攔截。
自動轉換 JSON 數(shù)據(jù)。
超時設置和取消請求。
支持跨域。
客戶端防御 XSRF 攻擊等。

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

1.2 什么是攔截器

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

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

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

2. 請求攔截器的應用與實踐

2.1 請求攔截器的作用

請求攔截器主要用于處理以下場景：

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

2.2 請求攔截器實現(xiàn)

以下是一個基本的請求攔截器實現(xiàn)示例：

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

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

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

export default instance;

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

設置基礎 URL：通過 axios.create 設置公共的 API 地址。
添加請求頭：為每個請求設置 Content-Type 和 Authorization。
錯誤處理：捕獲請求配置過程中的錯誤并打印日志。

3. 響應攔截器的應用與實踐

3.1 響應攔截器的作用

響應攔截器主要處理以下場景：

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

3.2 響應攔截器實現(xiàn)

以下是一個響應攔截器的示例：

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

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

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

4. 綜合實例：一個完整的 Axios 配置

以下是將請求攔截器和響應攔截器結合的完整實現(xiàn)：

import axios from 'axios';

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

// 請求攔截器
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('請求錯誤:', error);
    return Promise.reject(error);
  }
);

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

export default instance;