搜尋

首頁 >web前端 >js教程 >使用 Axios 和自訂 Hook 建立強大的前端錯誤處理系統

使用 Axios 和自訂 Hook 建立強大的前端錯誤處理系統

Patricia Arquette
Patricia Arquette原創
2024-11-02 20:54:03289瀏覽

Building a Robust Frontend Error-Handling System with Axios and Custom Hooks

介紹

有效的錯誤處理對於提供無縫的使用者體驗和維護乾淨、可擴展的程式碼至關重要。在複雜的應用程式中，跨元件手動管理錯誤通常會導致程式碼混亂且不一致。本指南將向您展示如何使用 Axios、自訂鉤子 (useApi) 和模組化服務層在 React 中建立模組化、可擴展且集中的錯誤處理系統，以建立使用者友好、有組織且高效的結構。

掛鉤：為什麼集中式錯誤處理很重要

想像一下您正在建立一個電子商務平台。多個元件從不同的 API 取得數據，每個元件都可能因不同的原因而失敗——網路問題、伺服器錯誤或無效的使用者輸入。如果沒有集中的錯誤處理系統，您的程式碼就會因重複的錯誤檢查而變得混亂，並且使用者會收到不一致的回饋。如何簡化此流程以確保可靠性和無縫的使用者體驗？本指南將向您展示如何操作。

最後，您將學到：

  • 如何使用 Axios 攔截器設定集中式錯誤處理。
  • 自訂 useApi 鉤子用於管理 API 請求狀態的作用。
  • 使用服務模組組織API邏輯的好處。
  • 用於用戶友好的錯誤處理的先進技術，包括重試選項和請求取消。

目錄

  1. 為什麼要集中處理錯誤？
  2. 基本實作
  3. 使用攔截器設定 Axios 實例
  4. 建立自訂 useApi Hook
  5. 理解 Promise 和 Promise 拒絕
  6. 組織服務模組
  7. 範例：用戶服務
  8. 進階增強功能（選購）
    • 解析自訂時出錯
    • 重試機制
    • 詳細通知
    • 取消組件卸載請求
  9. 連接點
  10. 視覺摘要
  11. 把它們放在一起：一個現實世界的例子
  12. 最佳實踐
  13. 延伸閱讀
  14. 故障排除
  15. 環境配置
  16. 結論
  17. 號召性用語

為什麼要集中處理錯誤？

集中式錯誤處理解決了兩個常見的挑戰：

重複錯誤代碼

  • 問題：沒有中心機制，元件依賴多個 try-catch 區塊。
  • 影響：導致不一致的錯誤處理和冗餘程式碼。

使用者體驗不一致

  • 問題：在沒有集中化的情況下，錯誤訊息可能會因應用程式而異。
  • 影響：造成脫節的使用者體驗並可能讓使用者感到困惑。

使用 Axios 攔截器、自訂掛鉤 (useApi) 和服務模組的集中式方法可以透過以下方式解決這些問題：

  • 錯誤解析和訊息傳遞的單一位置：提供統一的位置來處理所有錯誤，確保一致性。
  • 關注點分離：允許元件純粹專注於資料呈現和使用者交互，將錯誤處理留給集中式模組。

基本實現

使用攔截器設定 Axios 實例

Axios 攔截器是 Axios 對每個請求或回應呼叫的函數。透過設定回應攔截器，您可以全域處理錯誤、解析回應以及根據特定條件執行日誌記錄或重新導向使用者等操作。

第 1 步：導入必要的模組

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

第 2 步：建立 Axios 實例

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

第 3 步：新增回應攔截器

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);
  }
);

說明：

  • 錯誤解析：攔截器檢查錯誤是否有回應。如果沒有，則假定出現網路錯誤並顯示相應的訊息。
  • 自訂錯誤訊息：它嘗試根據伺服器提供的錯誤類型使用自訂錯誤訊息。如果沒有可用的訊息，則會退回到預先定義的訊息。
  • 使用者回饋：利用react-toastify顯示toast通知，透過提供即時回饋來增強使用者體驗。
  • 重定向：如果發生 401 未經授權錯誤，將使用者重定向到登入頁面，透過防止未經授權的存取來確保安全。

第 4 步：匯出 Axios 實例

export default axiosInstance;

自訂錯誤訊息

在單獨的設定檔中定義自訂錯誤訊息，以保持一致性和易於管理。 

// 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;

快速總結：Axios 攔截器配置

設定 Axios 攔截器提供：

  • 集中錯誤解析：在一個地方管理錯誤，確保所有 API 請求的一致性。
  • 用戶回饋：利用react-toastify立即通知用戶有關問題。
  • 重定向和安全性：在需要時重定向未經授權的使用者登錄，確保應用程式安全。

這個集中式 Axios 實例是建立可靠、使用者友好的 API 通訊層的關鍵，可確保跨應用程式對所有 API 請求和錯誤處理進行一致管理。

建立自訂 useApi 掛鉤

useApi 掛鉤集中 API 請求處理、管理載入、資料和錯誤狀態。透過抽象化這個過程，useApi 可以讓元件避免重複的 try-catch 區塊，而專注於資料呈現。

參數：

  • apiFunc (Function)：要執行的 API 函數，通常來自服務模組。
  • immediate（布林值，可選）：決定是否應在鉤子初始化後立即進行 API 呼叫。預設為 false。

傳回值：

  • data：API 呼叫的回應資料。
  • loading：表示API呼叫是否正在進行。
  • 錯誤：捕獲失敗的 API 呼叫中的任何錯誤訊息。
  • request：啟動API呼叫的函數，可以帶必要的參數來呼叫。

執行： 

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

解釋：

  • 狀態管理：
    • data：儲存回應資料。
    • loading：指示 API 呼叫是否正在進行。
    • 錯誤：捕獲任何錯誤訊息。
  • 請求函數：
    • 發起 API 呼叫。
    • 根據 API 呼叫的結果管理狀態更新。

了解 Promise 和 Promise 拒絕

在深入研究之前，有必要了解 JavaScript 中的 Promise 和 Promise Rejection，因為它們在處理 API 呼叫等非同步操作中發揮關鍵作用。

  • Promises：Promise 是表示非同步操作最終完成或失敗的物件。它允許您附加回調來處理操作的成功（解決）或失敗（拒絕）。
  • Promise Rejection：當操作失敗時，Promise 被“拒絕”，觸發 .catch 方法或 .then 中的第二個參數。

Axios 和 useApi 的相關性：

  • Axios 和 Promises：Axios 使用 Promises 來處理 HTTP 要求。當您使用 Axios 發出請求時，它會傳回一個 Promise，該 Promise 會使用回應資料進行解析，或會因錯誤而拒絕。
  • Axios 攔截器中的 Promise 拒絕：在 Axios 攔截器中，當發生錯誤時，攔截器使用 Promise.reject(error) 來拒絕 Promise。此拒絕會傳播到進行 API 呼叫的位置。
  • 在useApi中捕獲拒絕：useApi鉤子的請求函數使用try-catch來處理這些拒絕。當 apiFunc(...args) 拒絕時，catch 區塊會擷取錯誤，並相應地更新錯誤狀態。

處理 Promise 拒絕的重要性：

  • 防止未處理的拒絕：如果不處理 Promise 拒絕，可能會導致意外行為並使偵錯變得困難。
  • 一致的錯誤管理：透過集中處理 Promise 拒絕，您可以確保所有錯誤得到統一管理，從而增強程式碼可靠性和使用者體驗。

如果不使用 useApi Hook 怎麼辦？

如果沒有 useApi 鉤子，您將需要在每個進行 API 呼叫的元件中實作 try-catch 區塊。這種方法導致：

  • 重複程式碼：每個元件都會有類似的錯誤處理邏輯，增加程式碼冗餘。
  • 不一致的錯誤處理：不同的元件可能以不同的方式處理錯誤，從而導致不一致的使用者體驗。
  • 增加維護工作：更新錯誤處理邏輯需要跨多個元件進行更改，使得維護變得很麻煩。

透過使用 useApi 鉤子，您可以抽像出重複的錯誤處理邏輯，從而促進更乾淨、更易於維護的程式碼。

用法範例： 

// 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 呼叫以取得產品。它處理載入狀態，捕獲任何錯誤，並將獲取的資料提供給元件進行渲染。

組織服務模組

服務模組定義 API 端點函數，依實體（例如使用者、產品）組織。這種結構使 API 邏輯與元件程式碼分離，確保模組化和重複使用。

例：產品服務 

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

範例：用戶服務 

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

服務模組的優點：

  • 啟用重複使用​​和模組化：API 函數可以跨多個元件重複使用，並減少程式碼重複。
  • 確保關注點分離：透過將 API 邏輯移至服務中來保持元件清潔，提高程式碼組織和可維護性。
  • 更容易測試：服務模組可以獨立測試，確保API互動在整合到元件之前能如預期運作。

進階增強功能（選購）

對於那些準備進一步改進錯誤處理系統的人，請考慮實施這些先進技術：

自訂解析錯誤

將錯誤分類（例如網路與驗證）並提供可操作的訊息，以幫助使用者了解問題和可能的解決方案。

實作：

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);
  }
);

說明：

  • 錯誤分類：攔截器檢查錯誤回應中的類型屬性以確定錯誤的性質（例如，驗證或身份驗證）。
  • 可操作訊息：根據錯誤類型為使用者提供特定的錯誤訊息，增強他們的理解和適當回應的能力。

重試機制

為失敗的請求實作重試選項，例如 UI 中的重試按鈕或具有指數退避的自動重試，以增強可靠性。

實作：

export default axiosInstance;

說明：

  • 重試：設定 Axios 使用指數退避策略重試失敗的請求最多 3 次。
  • 重試條件：網路錯誤、冪等請求或伺服器回應 500 內部伺服器錯誤時發生重試。
  • 記錄重試：記錄每次重試嘗試，這對於偵錯和監控非常有用。

詳細通知

以嚴重性（訊息、警告、錯誤）區分通知，以幫助使用者了解錯誤的重要性。

實作：

// 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;

說明：

  • 通知類型：根據錯誤類別決定 Toast 通知的類型（訊息、警告、錯誤）。
  • 使用者回饋：提供使用者特定於上下文的回饋，幫助他們了解問題的嚴重性和性質。

取消組件卸載請求

使用 Axios 取消令牌，透過在元件卸載時取消正在進行的請求來防止記憶體洩漏。

實作：

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

說明：

  • 取消令牌：當發出新請求或卸載元件時，利用 Axios 取消令牌取消正在進行的 API 請求。
  • 防止記憶體洩漏：確保未安裝的元件上不會發生狀態更新，防止潛在的記憶體洩漏。
  • 記錄取消的請求：記錄取消的請求以用於偵錯目的。

進階增強功能總結

實作這些先進技術可以將您的錯誤處理系統提升到一個新的水平：

  • 錯誤解析客製化：向使用者傳遞更具體的錯誤訊息，幫助他們直接理解和解決問題。
  • 重試機制：透過允許請求在某些錯誤後自動或手動重試來提高可靠性。
  • 詳細通知：區分錯誤類型，根據嚴重性顯示通知，以便更好地通知使用者。
  • 取消組件卸載請求：防止記憶體洩漏和冗餘請求，確保應用程式效能穩定且有效率。

這些增強功能是可選的，但非常有價值，因為它們為應用程式的錯誤處理方法增加了深度、靈活性和以使用者為中心的改進。

連接點

當元件透過useApi啟動API呼叫時，會觸發下列流程：

組件使用服務模組：

每個服務模組（例如 userService、productService）都會為特定 API 端點定義函數並使用配置的 axiosInstance。元件僅與這些服務功能互動。

useApi 透過Service模組觸發axios：

元件將服務函數（例如，productService.getProducts）傳遞給useApi。當 request 被呼叫時，useApi 將函數轉送給服務，然後服務透過 axiosInstance 發出 HTTP 請求。

Axios攔截器中的自訂錯誤解析：

axiosInstance 中的攔截器處理錯誤日誌記錄、解析預先定義的自訂錯誤訊息並集中錯誤處理。

來自 useApi 的結構化響應：

useApi 將結構化狀態（資料、載入和錯誤）傳回給元件，使其能夠專注於呈現資料和處理互動。

視覺總結

以下概述描述了錯誤處理系統中的每個元件如何在應用程式內交互，從最初的 API 呼叫到使用者回饋：

  1. 組件

    • 該元件使用 useApi 鉤子發起 API 請求，從而消除了管理 API 呼叫、錯誤處理和載入狀態的複雜性。

  2. 使用Api Hook

    • useApi 是一個自訂鉤子，用於接收 API 請求的函數（來自服務模組）。它管理請求的載入狀態，處理錯誤，並將結構化回應（資料、載入、錯誤）傳回給元件。

  3. 服務模組

    • 服務模組為每個 API 端點（例如 getProducts、createProduct）定義特定功能，並使用集中式 axiosInstance 來處理所有請求，確保整個應用程式的一致性。

  4. Axios 實例

    • axiosInstance 管理 HTTP 請求和回應，套用任何自訂配置，例如基本 URL 和標頭。

  5. API 回應

    • 來自 API 的回應透過 Axios 攔截器進行處理，該攔截器全域處理錯誤。這包括解析自訂錯誤訊息和觸發用戶通知。

  6. 錯誤處理與使用者通知

    • 攔截器透過react-toastify通知向使用者顯示錯誤訊息，並且它們可以管理其他操作，例如在身份驗證錯誤時將使用者重新導向到登入頁面。

此流程支援集中式錯誤管理和一致的使用者回饋，允許元件僅專注於呈現數據，而不需要處理重複的錯誤檢查邏輯。

把它們放在一起：一個現實世界的例子

產品清單組件

此範例示範了從進行 API 呼叫到顯示資料的整個流程，以及集中的錯誤處理和回饋。 

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

組件細分：

  • 導入語句：

    • react-toastify：用於顯示 toast 通知。
    • ProductService：包含與產品相關的API函數。
    • useApi：用於管理 API 呼叫的自訂鉤子。

  • 鉤子初始化:

    • 使用productService 中的getProducts 函數初始化useApi 掛鉤。 false 參數表示 API 呼叫不應在鉤子初始化後立即發生。

  • API 呼叫觸發器:

    • 元件掛載時使用useEffect呼叫請求函數，取得第一頁商品。

  • 錯誤處理:

    • 另一個 useEffect 監聽錯誤狀態的變化。如果發生錯誤，則會觸發 toast 通知來通知使用者。

  • 條件渲染:

    • 載入狀態：API 呼叫正在進行時顯示載入訊息。
    • 錯誤狀態：如果 API 呼叫失敗，則顯示錯誤訊息。
    • 資料渲染：成功取得資料後，它會渲染產品網格及其影像、名稱和價格。

此範例示範了集中式錯誤處理如何簡化元件邏輯並確保一致的使用者回饋。

最佳實踐

遵守最佳實務可確保您的錯誤處理系統高效、可維護且使用者友好。

關注點分離

  • 描述：透過使用服務模組將 API 邏輯與 UI 元件分開。這提高了程式碼組織和可維護性。
  • 範例：不要直接在元件內進行API調用，而是將它們委託給productService.js等服務模組。

一致的錯誤訊息

  • 描述：統一處理所有錯誤，以簡化偵錯並提供無縫的使用者體驗。
  • 範例：在 customErrors.js 中使用預先定義的錯誤訊息可確保使用者收到一致的回饋，無論錯誤源自何處。

避免重複程式碼

  • 描述：使用集中式錯誤處理和自訂掛鉤來消除組件之間重複的 try-catch 區塊。
  • 範例：useApi 掛鉤管理錯誤狀態和通知，允許元件僅專注於渲染資料。

有意義的錯誤訊息

  • 描述：提供使用者友善、可操作的錯誤訊息，以增進理解並減少挫折感。
  • 範例：不要顯示「發生錯誤」等通用訊息，而是使用「驗證錯誤：請輸入有效的電子郵件地址」等特定訊息。

處理邊緣情況

  • 描述：預測和管理意外情況，例如網路故障或伺服器錯誤，以防止您的應用程式崩潰。
  • 範例：Axios 攔截器透過顯示「網路錯誤」toast 並防止應用程式崩潰來處理網路錯誤。

安全錯誤處理

  • 描述：避免在錯誤訊息中暴露敏感訊息。提供用戶友好的消息，同時在伺服器上安全地記錄詳細錯誤。
  • 範例：向使用者顯示一般錯誤訊息，同時向開發人員發送詳細的錯誤日誌到 Sentry 等日誌服務。

進一步閱讀

透過以下資源增強您對本指南中涵蓋的概念的理解：

  • Axios 攔截器文件：了解如何使用 Axios 攔截器全域處理請求和回應。
  • React Hooks 文件：了解 React Hooks 管理狀態和副作用的基礎知識。
  • Redux Toolkit 簡介：開始使用 Redux Toolkit 在 React 應用程式中進行高效的狀態管理。
  • React-Toastify 文件：了解如何實現 Toast 通知以獲得更好的使用者回饋。

故障排除

1. Toast 通知未出現

  • 原因：您的應用程式中可能缺少來自 React-toastify 的元件。
  • 解決方案：確保包含在您的主應用程式元件中，通常位於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請求未被攔截器捕獲

  • 原因：服務模組可能正在匯入預設的 Axios 函式庫，而不是集中式 axiosInstance。
  • 解決方案：確保所有服務模組都匯入集中式axiosInstance。 
const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. 重定向對特定錯誤不起作用

  • 原因：來自 next/router 的 Router 可能無法在 React 元件之外正確匯入或使用。
  • 解決方案：確保Axios攔截器在Router可以執行重定向的上下文中使用。或者，在 useApi 掛鉤或元件內處理重定向。

環境配置

管理不同的環境可確保您的應用程式在開發、測試和生產過程中與正確的 API 端點互動。

步驟1：定義環境變數

在專案根目錄中建立 .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：在程式碼中存取環境變數

確保您的 Axios 實例使用環境變數：

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

最佳實踐：

  • 保護敏感資訊：切勿將 .env.local 檔案或任何敏感環境變數提交到版本控制系統。使用 .gitignore 排除這些檔案。
  • 一致的命名約定：對環境變數使用清晰一致的命名，通常以 NEXT_PUBLIC_ 為前綴，表示它們暴露給前端。
  • 為每個環境單獨配置：為不同環境維護單獨的.env檔案（例如.env.development、.env.Production）以有效管理配置。

結論

透過建立集中式錯誤處理系統，您已經建立了一個乾淨、模組化且使用者友好的結構，可以提高開發人員體驗和使用者滿意度。無論您是剛開始還是希望增強應用程式的錯誤管理，此方法都提供了可以與您的應用程式一起成長的堅實基礎。

鼓勵自己嘗試此處描述的功能，從基礎知識開始，並在您熟悉後添加增強功能。集中式錯誤處理方法是一項寶貴的技能和實踐，隨著應用程式的擴展，它會帶來回報。

號召性用語

準備好透過集中錯誤處理來增強您的 React/Next.js 應用程式了嗎？

實施本指南中概述的策略，以體驗更清晰的程式碼、一致的使用者通知和改進的可維護性。

分享您的回饋

有問題、建議或經驗可以分享嗎？透過發表評論或在 GitHub 和 Twitter 上聯繫來與社群互動。

敬請期待更多

我正在開發一個基於這個集中式錯誤處理系統的 npm 套件。請繼續關注更新，或推薦您認為有價值的功能！

編碼快樂！ ?✨

以上是使用 Axios 和自訂 Hook 建立強大的前端錯誤處理系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript npm edge Boolean Object define if for while require try catch Directory Error Logging using internal Conditional Property Delegate Generic JS function default this promise location display input table github http ui issue sentry Access router axios Foundation
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何動態包含包含「document.write」指令的變數 URL 的外部腳本？下一篇：如何動態包含包含「document.write」指令的變數 URL 的外部腳本？

相關文章

看更多