介紹

有效的錯(cuò)誤處理對于提供無縫的用戶體驗(yàn)和維護(hù)干凈、可擴(kuò)展的代碼至關(guān)重要。在復(fù)雜的應(yīng)用程序中，跨組件手動(dòng)管理錯(cuò)誤通常會(huì)導(dǎo)致代碼混亂且不一致。本指南將向您展示如何使用 Axios、自定義鉤子 (useApi) 和模塊化服務(wù)層在 React 中構(gòu)建模塊化、可擴(kuò)展且集中的錯(cuò)誤處理系統(tǒng)，以創(chuàng)建用戶友好、有組織且高效的結(jié)構(gòu)。

掛鉤：為什么集中式錯(cuò)誤處理很重要

想象一下您正在構(gòu)建一個(gè)電子商務(wù)平臺(tái)。多個(gè)組件從不同的 API 獲取數(shù)據(jù)，每個(gè)組件都可能因不同的原因而失敗——網(wǎng)絡(luò)問題、服務(wù)器錯(cuò)誤或無效的用戶輸入。如果沒有集中的錯(cuò)誤處理系統(tǒng)，您的代碼就會(huì)因重復(fù)的錯(cuò)誤檢查而變得混亂，并且用戶會(huì)收到不一致的反饋。如何簡化此流程以確保可靠性和無縫的用戶體驗(yàn)？本指南將向您展示如何操作。

最后，您將學(xué)到：

• 如何使用 Axios 攔截器設(shè)置集中式錯(cuò)誤處理。
• 自定義 useApi 鉤子用于管理 API 請求狀態(tài)的作用。
• 使用服務(wù)模塊組織API邏輯的好處。
• 用于用戶友好的錯(cuò)誤處理的先進(jìn)技術(shù)，包括重試選項(xiàng)和請求取消。

目錄

1. 為什么要集中處理錯(cuò)誤？
2. 基本實(shí)現(xiàn)
3. 使用攔截器設(shè)置 Axios 實(shí)例
4. 創(chuàng)建自定義 useApi Hook
5. 理解 Promise 和 Promise 拒絕
6. 組織服務(wù)模塊
7. 示例：用戶服務(wù)
8. 高級(jí)增強(qiáng)功能（可選）
   • 解析自定義時(shí)出錯(cuò)
   • 重試機(jī)制
   • 詳細(xì)通知
   • 取消組件卸載請求
9. 連接點(diǎn)
10. 視覺摘要
11. 將它們放在一起：一個(gè)現(xiàn)實(shí)世界的例子
12. 最佳實(shí)踐
13. 延伸閱讀
14. 故障排除
15. 環(huán)境配置
16. 結(jié)論
17. 號(hào)召性用語

---

為什么要集中處理錯(cuò)誤？

集中式錯(cuò)誤處理解決了兩個(gè)常見的挑戰(zhàn)：

重復(fù)錯(cuò)誤代碼

• 問題：沒有中心機(jī)制，組件依賴多個(gè) try-catch 塊。
• 影響：導(dǎo)致不一致的錯(cuò)誤處理和冗余代碼。

用戶體驗(yàn)不一致

• 問題：在沒有集中化的情況下，錯(cuò)誤消息可能會(huì)因應(yīng)用程序而異。
• 影響：造成脫節(jié)的用戶體驗(yàn)并可能讓用戶感到困惑。

使用 Axios 攔截器、自定義掛鉤 (useApi) 和服務(wù)模塊的集中式方法可以通過以下方式解決這些問題：

• 錯(cuò)誤解析和消息傳遞的單一位置：提供統(tǒng)一的位置來處理所有錯(cuò)誤，確保一致性。
• 關(guān)注點(diǎn)分離：允許組件純粹專注于數(shù)據(jù)呈現(xiàn)和用戶交互，將錯(cuò)誤處理留給集中式模塊。

---

基本實(shí)現(xiàn)

使用攔截器設(shè)置 Axios 實(shí)例

Axios 攔截器是 Axios 對每個(gè)請求或響應(yīng)調(diào)用的函數(shù)。通過設(shè)置響應(yīng)攔截器，您可以全局處理錯(cuò)誤、解析響應(yīng)以及根據(jù)特定條件執(zhí)行日志記錄或重定向用戶等操作。

第 1 步：導(dǎo)入必要的模塊

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

第 2 步：創(chuàng)建 Axios 實(shí)例

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

第 3 步：添加響應(yīng)攔截器

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

說明：

• 錯(cuò)誤解析：攔截器檢查錯(cuò)誤是否有響應(yīng)。如果沒有，則假定出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤并顯示相應(yīng)的消息。
• 自定義錯(cuò)誤消息：它嘗試根據(jù)服務(wù)器提供的錯(cuò)誤類型使用自定義錯(cuò)誤消息。如果沒有可用的消息，則會(huì)退回到預(yù)定義的消息。
• 用戶反饋：利用react-toastify顯示toast通知，通過提供即時(shí)反饋來增強(qiáng)用戶體驗(yàn)。
• 重定向：如果發(fā)生 401 未經(jīng)授權(quán)錯(cuò)誤，將用戶重定向到登錄頁面，通過防止未經(jīng)授權(quán)的訪問來確保安全。

第 4 步：導(dǎo)出 Axios 實(shí)例

export default axiosInstance;

自定義錯(cuò)誤消息

在單獨(dú)的配置文件中定義自定義錯(cuò)誤消息，以保持一致性和易于管理。

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

快速總結(jié)：Axios 攔截器配置

設(shè)置 Axios 攔截器提供：

• 集中錯(cuò)誤解析：在一個(gè)地方管理錯(cuò)誤，確保所有 API 請求的一致性。
• 用戶反饋：利用react-toastify立即通知用戶有關(guān)問題。
• 重定向和安全：在需要時(shí)重定向未經(jīng)授權(quán)的用戶登錄，確保應(yīng)用程序安全。

這個(gè)集中式 Axios 實(shí)例是構(gòu)建可靠、用戶友好的 API 通信層的關(guān)鍵，可確?？鐟?yīng)用程序?qū)λ?API 請求和錯(cuò)誤處理進(jìn)行一致管理。

創(chuàng)建自定義 useApi 掛鉤

useApi 掛鉤集中 API 請求處理、管理加載、數(shù)據(jù)和錯(cuò)誤狀態(tài)。通過抽象這個(gè)過程，useApi 可以讓組件避免重復(fù)的 try-catch 塊，而專注于數(shù)據(jù)呈現(xiàn)。

參數(shù)：

• apiFunc (Function)：要執(zhí)行的 API 函數(shù)，通常來自服務(wù)模塊。
• immediate（布爾值，可選）：確定是否應(yīng)在鉤子初始化后立即進(jìn)行 API 調(diào)用。默認(rèn)為 false。

返回值：

• data：API 調(diào)用的響應(yīng)數(shù)據(jù)。
• loading：表示API調(diào)用是否正在進(jìn)行。
• 錯(cuò)誤：捕獲失敗的 API 調(diào)用中的任何錯(cuò)誤消息。
• request：發(fā)起API調(diào)用的函數(shù)，可以帶必要的參數(shù)來調(diào)用。

執(zhí)行：

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

解釋：

• 狀態(tài)管理：
  • data：存儲(chǔ)響應(yīng)數(shù)據(jù)。
  • loading：指示 API 調(diào)用是否正在進(jìn)行。
  • 錯(cuò)誤：捕獲任何錯(cuò)誤消息。
• 請求函數(shù)：
  • 發(fā)起 API 調(diào)用。
  • 根據(jù) API 調(diào)用的結(jié)果管理狀態(tài)更新。

了解 Promise 和 Promise 拒絕

在深入研究之前，有必要了解 JavaScript 中的 Promise 和 Promise Rejection，因?yàn)樗鼈冊谔幚?API 調(diào)用等異步操作中發(fā)揮著關(guān)鍵作用。

• Promises：Promise 是表示異步操作最終完成或失敗的對象。它允許您附加回調(diào)來處理操作的成功（解決）或失?。ň芙^）。
• Promise Rejection：當(dāng)操作失敗時(shí)，Promise 被“拒絕”，觸發(fā) .catch 方法或 .then 中的第二個(gè)參數(shù)。

Axios 和 useApi 的相關(guān)性：

• Axios 和 Promises：Axios 使用 Promises 來處理 HTTP 請求。當(dāng)您使用 Axios 發(fā)出請求時(shí)，它會(huì)返回一個(gè) Promise，該 Promise 會(huì)使用響應(yīng)數(shù)據(jù)進(jìn)行解析，或者會(huì)因錯(cuò)誤而拒絕。
• Axios 攔截器中的 Promise 拒絕：在 Axios 攔截器中，當(dāng)發(fā)生錯(cuò)誤時(shí)，攔截器使用 Promise.reject(error) 來拒絕 Promise。此拒絕會(huì)傳播到進(jìn)行 API 調(diào)用的位置。
• 在useApi中捕獲拒絕：useApi鉤子的請求函數(shù)使用try-catch來處理這些拒絕。當(dāng) apiFunc(...args) 拒絕時(shí)，catch 塊會(huì)捕獲錯(cuò)誤，并相應(yīng)地更新錯(cuò)誤狀態(tài)。

處理 Promise 拒絕的重要性：

• 防止未處理的拒絕：如果不處理 Promise 拒絕，可能會(huì)導(dǎo)致意外行為并使調(diào)試變得困難。
• 一致的錯(cuò)誤管理：通過集中處理 Promise 拒絕，您可以確保所有錯(cuò)誤得到統(tǒng)一管理，從而增強(qiáng)代碼可靠性和用戶體驗(yàn)。

如果不使用 useApi Hook 怎么辦？

如果沒有 useApi 鉤子，您將需要在每個(gè)進(jìn)行 API 調(diào)用的組件中實(shí)現(xiàn) try-catch 塊。這種方法導(dǎo)致：

• 重復(fù)代碼：每個(gè)組件都會(huì)有類似的錯(cuò)誤處理邏輯，增加代碼冗余。
• 不一致的錯(cuò)誤處理：不同的組件可能以不同的方式處理錯(cuò)誤，從而導(dǎo)致不一致的用戶體驗(yàn)。
• 增加維護(hù)工作：更新錯(cuò)誤處理邏輯需要跨多個(gè)組件進(jìn)行更改，使得維護(hù)變得很麻煩。

通過使用 useApi 鉤子，您可以抽象出重復(fù)的錯(cuò)誤處理邏輯，從而促進(jìn)更干凈、更易于維護(hù)的代碼。

用法示例：

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

在此示例中，useApi 掛鉤管理 API 調(diào)用以獲取產(chǎn)品。它處理加載狀態(tài)，捕獲任何錯(cuò)誤，并將獲取的數(shù)據(jù)提供給組件進(jìn)行渲染。

---

組織服務(wù)模塊

服務(wù)模塊定義 API 端點(diǎn)函數(shù)，按實(shí)體（例如用戶、產(chǎn)品）組織。這種結(jié)構(gòu)使 API 邏輯與組件代碼分離，確保模塊化和重用。

示例：產(chǎn)品服務(wù)

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

示例：用戶服務(wù)

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

服務(wù)模塊的優(yōu)點(diǎn)：

• 啟用重用和模塊化：API 函數(shù)可以跨多個(gè)組件重用，減少代碼重復(fù)。
• 確保關(guān)注點(diǎn)分離：通過將 API 邏輯移至服務(wù)中來保持組件清潔，提高代碼組織和可維護(hù)性。
• 更容易測試：服務(wù)模塊可以獨(dú)立測試，確保API交互在集成到組件之前按預(yù)期工作。

---

高級(jí)增強(qiáng)功能（可選）

對于那些準(zhǔn)備進(jìn)一步改進(jìn)錯(cuò)誤處理系統(tǒng)的人，請考慮實(shí)施這些先進(jìn)技術(shù)：

自定義解析錯(cuò)誤

對錯(cuò)誤進(jìn)行分類（例如網(wǎng)絡(luò)與驗(yàn)證）并提供可操作的消息，以幫助用戶了解問題和可能的解決方案。

實(shí)施：

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

說明：

• 錯(cuò)誤分類：攔截器檢查錯(cuò)誤響應(yīng)中的類型屬性以確定錯(cuò)誤的性質(zhì)（例如，驗(yàn)證或身份驗(yàn)證）。
• 可操作消息：根據(jù)錯(cuò)誤類型為用戶提供特定的錯(cuò)誤消息，增強(qiáng)他們的理解和適當(dāng)響應(yīng)的能力。

重試機(jī)制

為失敗的請求實(shí)現(xiàn)重試選項(xiàng)，例如 UI 中的重試按鈕或具有指數(shù)退避的自動(dòng)重試，以增強(qiáng)可靠性。

實(shí)施：

export default axiosInstance;

說明：

• 重試：配置 Axios 使用指數(shù)退避策略重試失敗的請求最多 3 次。
• 重試條件：網(wǎng)絡(luò)錯(cuò)誤、冪等請求或服務(wù)器響應(yīng) 500 內(nèi)部服務(wù)器錯(cuò)誤時(shí)發(fā)生重試。
• 記錄重試：記錄每次重試嘗試，這對于調(diào)試和監(jiān)控非常有用。

詳細(xì)通知

按嚴(yán)重性（信息、警告、錯(cuò)誤）區(qū)分通知，以幫助用戶了解錯(cuò)誤的重要性。

實(shí)施：

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

說明：

• 通知類型：根據(jù)錯(cuò)誤類別確定 Toast 通知的類型（信息、警告、錯(cuò)誤）。
• 用戶反饋：為用戶提供特定于上下文的反饋，幫助他們了解問題的嚴(yán)重性和性質(zhì)。

取消組件卸載請求

使用 Axios 取消令牌，通過在組件卸載時(shí)取消正在進(jìn)行的請求來防止內(nèi)存泄漏。

實(shí)施：

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

說明：

• 取消令牌：當(dāng)發(fā)出新請求或卸載組件時(shí)，利用 Axios 取消令牌取消正在進(jìn)行的 API 請求。
• 防止內(nèi)存泄漏：確保未安裝的組件上不會(huì)發(fā)生狀態(tài)更新，防止?jié)撛诘膬?nèi)存泄漏。
• 記錄取消的請求：記錄取消的請求以用于調(diào)試目的。

高級(jí)增強(qiáng)功能總結(jié)

實(shí)施這些先進(jìn)技術(shù)可以將您的錯(cuò)誤處理系統(tǒng)提升到一個(gè)新的水平：

• 錯(cuò)誤解析定制：向用戶傳遞更具體的錯(cuò)誤消息，幫助他們直接理解和解決問題。
• 重試機(jī)制：通過允許請求在某些錯(cuò)誤后自動(dòng)或手動(dòng)重試來提高可靠性。
• 詳細(xì)通知：區(qū)分錯(cuò)誤類型，根據(jù)嚴(yán)重性顯示通知，以更好地通知用戶。
• 取消組件卸載請求：防止內(nèi)存泄漏和冗余請求，確保應(yīng)用性能穩(wěn)定高效。

這些增強(qiáng)功能是可選的，但非常有價(jià)值，因?yàn)樗鼈優(yōu)閼?yīng)用程序的錯(cuò)誤處理方法增加了深度、靈活性和以用戶為中心的改進(jìn)。

---

連接點(diǎn)

當(dāng)組件通過useApi發(fā)起API調(diào)用時(shí)，會(huì)觸發(fā)以下流程：

組件使用服務(wù)模塊：

每個(gè)服務(wù)模塊（例如 userService、productService）都為特定 API 端點(diǎn)定義函數(shù)并使用配置的 axiosInstance。組件僅與這些服務(wù)功能交互。

useApi 通過Service模塊觸發(fā)axios：

組件將服務(wù)函數(shù)（例如，productService.getProducts）傳遞給useApi。當(dāng) request 被調(diào)用時(shí)，useApi 將函數(shù)轉(zhuǎn)發(fā)給服務(wù)，然后服務(wù)通過 axiosInstance 發(fā)出 HTTP 請求。

Axios攔截器中的自定義錯(cuò)誤解析：

axiosInstance 中的攔截器處理錯(cuò)誤日志記錄、解析預(yù)定義的自定義錯(cuò)誤消息并集中錯(cuò)誤處理。

來自 useApi 的結(jié)構(gòu)化響應(yīng)：

useApi 將結(jié)構(gòu)化狀態(tài)（數(shù)據(jù)、加載和錯(cuò)誤）返回給組件，使其能夠?qū)Ｗ⒂诔尸F(xiàn)數(shù)據(jù)和處理交互。

---

視覺總結(jié)

以下概述描述了錯(cuò)誤處理系統(tǒng)中的每個(gè)組件如何在應(yīng)用程序內(nèi)交互，從最初的 API 調(diào)用到用戶反饋：

1. 組件

   • 該組件使用 useApi 鉤子發(fā)起 API 請求，從而消除了管理 API 調(diào)用、錯(cuò)誤處理和加載狀態(tài)的復(fù)雜性。

2. 使用Api Hook

   • useApi 是一個(gè)自定義鉤子，用于接收 API 請求的函數(shù)（來自服務(wù)模塊）。它管理請求的加載狀態(tài)，處理錯(cuò)誤，并將結(jié)構(gòu)化響應(yīng)（數(shù)據(jù)、加載、錯(cuò)誤）返回給組件。

3. 服務(wù)模塊

   • 服務(wù)模塊為每個(gè) API 端點(diǎn)（例如 getProducts、createProduct）定義特定功能，并使用集中式 axiosInstance 來處理所有請求，確保整個(gè)應(yīng)用程序的一致性。

4. Axios 實(shí)例

   • axiosInstance 管理 HTTP 請求和響應(yīng)，應(yīng)用任何自定義配置，例如基本 URL 和標(biāo)頭。

5. API 響應(yīng)

   • 來自 API 的響應(yīng)通過 Axios 攔截器進(jìn)行處理，該攔截器全局處理錯(cuò)誤。這包括解析自定義錯(cuò)誤消息和觸發(fā)用戶通知。

6. 錯(cuò)誤處理和用戶通知

   • 攔截器通過react-toastify通知向用戶顯示錯(cuò)誤消息，并且它們可以管理其他操作，例如在身份驗(yàn)證錯(cuò)誤時(shí)將用戶重定向到登錄頁面。

此流程支持集中式錯(cuò)誤管理和一致的用戶反饋，允許組件僅專注于呈現(xiàn)數(shù)據(jù)，而不需要處理重復(fù)的錯(cuò)誤檢查邏輯。

---

把它們放在一起：一個(gè)現(xiàn)實(shí)世界的例子

產(chǎn)品列表組件

此示例演示了從進(jìn)行 API 調(diào)用到顯示數(shù)據(jù)的整個(gè)流程，以及集中的錯(cuò)誤處理和反饋。

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

組件細(xì)分：

• 導(dǎo)入語句：

  • react-toastify：用于顯示 toast 通知。
  • ProductService：包含與產(chǎn)品相關(guān)的API函數(shù)。
  • useApi：用于管理 API 調(diào)用的自定義鉤子。

• 鉤子初始化:

  • 使用productService 中的getProducts 函數(shù)初始化useApi 掛鉤。 false 參數(shù)表示 API 調(diào)用不應(yīng)在鉤子初始化后立即發(fā)生。

• API 調(diào)用觸發(fā)器:

  • 組件掛載時(shí)使用useEffect調(diào)用請求函數(shù)，獲取第一頁商品。

• 錯(cuò)誤處理:

  • 另一個(gè) useEffect 監(jiān)聽錯(cuò)誤狀態(tài)的變化。如果發(fā)生錯(cuò)誤，則會(huì)觸發(fā) toast 通知來通知用戶。

• 條件渲染:

  • 加載狀態(tài)：API 調(diào)用正在進(jìn)行時(shí)顯示加載消息。
  • 錯(cuò)誤狀態(tài)：如果 API 調(diào)用失敗，則顯示錯(cuò)誤消息。
  • 數(shù)據(jù)渲染：成功獲取數(shù)據(jù)后，它會(huì)渲染產(chǎn)品網(wǎng)格及其圖像、名稱和價(jià)格。

此示例演示了集中式錯(cuò)誤處理如何簡化組件邏輯并確保一致的用戶反饋。

---

最佳實(shí)踐

遵守最佳實(shí)踐可確保您的錯(cuò)誤處理系統(tǒng)高效、可維護(hù)且用戶友好。

關(guān)注點(diǎn)分離

• 描述：通過使用服務(wù)模塊將 API 邏輯與 UI 組件分開。這提高了代碼組織和可維護(hù)性。
• 示例：不要直接在組件內(nèi)進(jìn)行API調(diào)用，而是將它們委托給productService.js等服務(wù)模塊。

一致的錯(cuò)誤消息

• 描述：統(tǒng)一處理所有錯(cuò)誤，以簡化調(diào)試并提供無縫的用戶體驗(yàn)。
• 示例：在 customErrors.js 中使用預(yù)定義的錯(cuò)誤消息可確保用戶收到一致的反饋，無論錯(cuò)誤源自何處。

避免重復(fù)代碼

• 描述：使用集中式錯(cuò)誤處理和自定義掛鉤來消除組件之間重復(fù)的 try-catch 塊。
• 示例：useApi 掛鉤管理錯(cuò)誤狀態(tài)和通知，允許組件僅專注于渲染數(shù)據(jù)。

有意義的錯(cuò)誤消息

• 描述：提供用戶友好、可操作的錯(cuò)誤消息，以增進(jìn)理解并減少挫敗感。
• 示例：不要顯示“發(fā)生錯(cuò)誤”等通用消息，而是使用“驗(yàn)證錯(cuò)誤：請輸入有效的電子郵件地址”等特定消息。

處理邊緣情況

• 描述：預(yù)測和管理意外情況，例如網(wǎng)絡(luò)故障或服務(wù)器錯(cuò)誤，以防止您的應(yīng)用程序崩潰。
• 示例：Axios 攔截器通過顯示“網(wǎng)絡(luò)錯(cuò)誤”toast 并防止應(yīng)用程序崩潰來處理網(wǎng)絡(luò)錯(cuò)誤。

安全錯(cuò)誤處理

• 描述：避免在錯(cuò)誤消息中暴露敏感信息。提供用戶友好的消息，同時(shí)在服務(wù)器上安全地記錄詳細(xì)錯(cuò)誤。
• 示例：向用戶顯示一般錯(cuò)誤消息，同時(shí)向開發(fā)人員發(fā)送詳細(xì)的錯(cuò)誤日志到 Sentry 等日志服務(wù)。

---

進(jìn)一步閱讀

通過以下資源增強(qiáng)您對本指南中涵蓋的概念的理解：

• Axios 攔截器文檔：了解如何使用 Axios 攔截器全局處理請求和響應(yīng)。
• React Hooks 文檔：了解 React Hooks 管理狀態(tài)和副作用的基礎(chǔ)知識(shí)。
• Redux Toolkit 簡介：開始使用 Redux Toolkit 在 React 應(yīng)用程序中進(jìn)行高效的狀態(tài)管理。
• React-Toastify 文檔：了解如何實(shí)現(xiàn) Toast 通知以獲得更好的用戶反饋。

---

故障排除

1. Toast 通知未出現(xiàn)

• 原因：您的應(yīng)用程序中可能缺少來自 React-toastify 的組件。
• 解決方案：確保包含在您的主應(yīng)用程序組件中，通常位于pages/_app.js 中。

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

2. API請求未被攔截器捕獲

• 原因：服務(wù)模塊可能正在導(dǎo)入默認(rèn)的 Axios 庫，而不是集中式 axiosInstance。
• 解決方案：確保所有服務(wù)模塊都導(dǎo)入集中式axiosInstance。

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. 重定向?qū)μ囟ㄥe(cuò)誤不起作用

• 原因：來自 next/router 的 Router 可能無法在 React 組件之外正確導(dǎo)入或使用。
• 解決方案：確保Axios攔截器在Router可以執(zhí)行重定向的上下文中使用?；蛘?，在 useApi 掛鉤或組件內(nèi)處理重定向。

---

環(huán)境配置

管理不同的環(huán)境可確保您的應(yīng)用程序在開發(fā)、測試和生產(chǎn)過程中與正確的 API 端點(diǎn)交互。

第1步：定義環(huán)境變量

在項(xiàng)目根目錄中創(chuàng)建 .env.local 文件并定義 API 基本 URL：

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

第2步：在代碼中訪問環(huán)境變量

確保您的 Axios 實(shí)例使用環(huán)境變量：

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

最佳實(shí)踐：

• 保護(hù)敏感信息：切勿將 .env.local 文件或任何敏感環(huán)境變量提交到版本控制系統(tǒng)。使用 .gitignore 排除這些文件。
• 一致的命名約定：對環(huán)境變量使用清晰一致的命名，通常以 NEXT_PUBLIC_ 為前綴，表示它們暴露給前端。
• 為每個(gè)環(huán)境單獨(dú)配置：為不同環(huán)境維護(hù)單獨(dú)的.env文件（例如.env.development、.env.Production）以有效管理配置。

---

結(jié)論

通過構(gòu)建集中式錯(cuò)誤處理系統(tǒng)，您已經(jīng)建立了一個(gè)干凈、模塊化且用戶友好的結(jié)構(gòu)，可以提高開發(fā)人員體驗(yàn)和用戶滿意度。無論您是剛剛開始還是希望增強(qiáng)應(yīng)用程序的錯(cuò)誤管理，此方法都提供了可以與您的應(yīng)用程序一起成長的堅(jiān)實(shí)基礎(chǔ)。

鼓勵(lì)自己嘗試此處描述的功能，從基礎(chǔ)知識(shí)開始，并在您熟悉后添加增強(qiáng)功能。集中式錯(cuò)誤處理方法是一項(xiàng)寶貴的技能和實(shí)踐，隨著應(yīng)用程序的擴(kuò)展，它會(huì)帶來回報(bào)。

---

號(hào)召性用語

準(zhǔn)備好通過集中錯(cuò)誤處理來增強(qiáng)您的 React/Next.js 應(yīng)用程序了嗎？

實(shí)施本指南中概述的策略，以體驗(yàn)更清晰的代碼、一致的用戶通知和改進(jìn)的可維護(hù)性。

分享您的反饋

有問題、建議或經(jīng)驗(yàn)要分享嗎？通過發(fā)表評論或在 GitHub 和 Twitter 上聯(lián)系來與社區(qū)互動(dòng)。

敬請期待更多

我正在開發(fā)一個(gè)基于這個(gè)集中式錯(cuò)誤處理系統(tǒng)的 npm 包。請繼續(xù)關(guān)注更新，或推薦您認(rèn)為有價(jià)值的功能！

編碼快樂！ ??

以上是使用 Axios 和自定義 Hook 構(gòu)建強(qiáng)大的前端錯(cuò)誤處理系統(tǒng)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！