使用Fetch API時獲取404錯誤的解決方案

更新時間：2024年12月20日 10:29:08 作者：幾何心涼

在現(xiàn)代Web開發(fā)中,Fetch API 是用于執(zhí)行網(wǎng)絡請求的主要工具之一,它提供了一種基于Promise的簡潔語法,使得異步操作更加直觀和易于管理,本文將詳細探討在使用Fetch API時獲取404錯誤的原因、如何檢測和處理這些錯誤,以及最佳實踐,需要的朋友可以參考下

1. 引言

在現(xiàn)代Web開發(fā)中，F(xiàn)etch API 是用于執(zhí)行網(wǎng)絡請求的主要工具之一。它提供了一種基于Promise的簡潔語法，使得異步操作更加直觀和易于管理。然而，在實際使用中，開發(fā)者常常會遇到HTTP狀態(tài)碼錯誤，如404錯誤，即“未找到”錯誤。這種錯誤通常表示請求的資源在服務器上不存在或路徑錯誤。理解如何正確處理404錯誤，對于構(gòu)建健壯和用戶友好的應用至關重要。

本文將詳細探討在使用Fetch API時獲取404錯誤的原因、如何檢測和處理這些錯誤，以及最佳實踐，幫助開發(fā)者有效地應對和解決此類問題。

2. 理解HTTP 404錯誤

2.1 什么是404錯誤？

404錯誤，全稱HTTP 404 Not Found，是HTTP協(xié)議中常見的狀態(tài)碼之一。它表示客戶端能夠與服務器通信，但服務器無法找到客戶端請求的資源。這通常發(fā)生在以下幾種情況下：

請求的URL路徑錯誤。
資源已被刪除或移動。
服務器配置錯誤，導致資源不可訪問。

2.2 404錯誤的影響

當客戶端收到404錯誤時，通常意味著以下幾件事：

用戶體驗受損：用戶無法訪問他們期望的內(nèi)容，可能導致沮喪或放棄使用應用。
SEO影響：搜索引擎將404錯誤頁面視為負面信號，可能影響網(wǎng)站的搜索排名。
功能中斷：如果404錯誤出現(xiàn)在關鍵功能點，可能導致應用功能無法正常運行。

3. Fetch API如何處理HTTP錯誤

3.1 Fetch API的基本工作原理

Fetch API用于執(zhí)行網(wǎng)絡請求，返回一個Promise，該Promise在請求成功或失敗時解決或拒絕。關鍵點在于：

網(wǎng)絡錯誤：例如，無法連接到服務器，F(xiàn)etch Promise會被拒絕（rejected）。
HTTP錯誤狀態(tài)碼：例如，404、500等，F(xiàn)etch Promise仍然會被解決（fulfilled），但響應對象的ok屬性為false，并且status屬性包含具體的狀態(tài)碼。

3.2 Fetch API與HTTP狀態(tài)碼

當使用Fetch API進行請求時，即使服務器返回404錯誤，F(xiàn)etch Promise也會被解決，而不會被拒絕。這意味著你需要手動檢查響應對象的狀態(tài)碼，以確定請求是否成功。

示例：

fetch('https://api.example.com/nonexistent-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 錯誤! 狀態(tài): ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('發(fā)生錯誤:', error);
  });

在上面的示例中，即使請求返回404錯誤，catch塊仍會捕獲錯誤，因為在then塊中手動拋出了一個錯誤。

4. 如何檢測和處理404錯誤

4.1 使用響應對象的ok和status屬性

響應對象包含多個屬性，其中ok是一個布爾值，表示響應狀態(tài)碼是否在200-299范圍內(nèi)。status則包含具體的HTTP狀態(tài)碼。

示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else if (response.status === 404) {
      throw new Error('資源未找到 (404)');
    } else {
      throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
    }
  })
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('發(fā)生錯誤:', error.message);
    // 根據(jù)錯誤類型執(zhí)行相應的操作，如顯示錯誤消息給用戶
  });

4.2 使用async/await語法

使用async/await可以使異步代碼更具可讀性，并且更易于錯誤處理。

示例：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      console.log('數(shù)據(jù):', data);
      return data;
    } else if (response.status === 404) {
      console.error('資源未找到 (404)');
      // 這里可以處理404錯誤，如顯示特定的消息或重定向
    } else {
      throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    console.error('發(fā)生錯誤:', error.message);
    // 處理網(wǎng)絡錯誤或其他意外錯誤
  }
}

fetchData('https://api.example.com/nonexistent-endpoint');

4.3 處理API返回的錯誤信息

有些API在返回錯誤時，會在響應體中提供詳細的錯誤信息。你可以解析這些信息，提供更具體的錯誤反饋。

示例：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json(); // 假設API在錯誤時也返回JSON
    if (response.ok) {
      console.log('數(shù)據(jù):', data);
      return data;
    } else {
      // 假設錯誤信息在data.message中
      throw new Error(`錯誤: ${data.message}`);
    }
  } catch (error) {
    console.error('發(fā)生錯誤:', error.message);
    // 根據(jù)錯誤類型執(zhí)行相應的操作
  }
}

fetchData('https://api.example.com/nonexistent-endpoint');

5. 最佳實踐

5.1 始終檢查響應狀態(tài)碼

無論是使用then鏈還是async/await，始終檢查響應的ok屬性和status碼，確保請求成功后再處理數(shù)據(jù)。

示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 錯誤! 狀態(tài): ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 處理數(shù)據(jù)
  })
  .catch(error => {
    // 處理錯誤
  });

5.2 提供用戶友好的錯誤反饋

當發(fā)生404錯誤時，向用戶提供明確的反饋，告知他們所請求的內(nèi)容未找到，并可能提供返回主頁或搜索的選項。

示例：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      return data;
    } else if (response.status === 404) {
      displayErrorMessage('您請求的頁面未找到。');
    } else {
      throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    displayErrorMessage('發(fā)生了一個錯誤，請稍后再試。');
    console.error('發(fā)生錯誤:', error);
  }
}

function displayErrorMessage(message) {
  const errorDiv = document.getElementById('error');
  if (errorDiv) {
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
  }
}

5.3 使用重試機制

對于某些臨時性的問題，如網(wǎng)絡波動，可以實現(xiàn)自動重試機制，嘗試再次發(fā)起請求。

示例：

async function fetchWithRetry(url, options = {}, retries = 3, backoff = 300) {
  try {
    const response = await fetch(url, options);
    if (response.ok) {
      return await response.json();
    } else if (response.status === 404) {
      throw new Error('資源未找到 (404)');
    } else {
      throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    if (retries > 0 && error.message !== '資源未找到 (404)') {
      console.warn(`請求失敗，正在重試... 剩余次數(shù): ${retries}`);
      await new Promise(resolve => setTimeout(resolve, backoff));
      return fetchWithRetry(url, options, retries - 1, backoff * 2); // 指數(shù)退避
    } else {
      throw error;
    }
  }
}

fetchWithRetry('https://api.example.com/data')
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('請求最終失敗:', error.message);
  });

5.4 使用TypeScript進行類型檢查

使用TypeScript可以在編譯階段捕獲潛在的錯誤，減少運行時錯誤的發(fā)生。

示例：

interface User {
  name: string;
  age: number;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  if (!response.ok) {
    if (response.status === 404) {
      throw new Error('用戶未找到 (404)');
    }
    throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
  }
  const data: User = await response.json();
  return data;
}

fetchUser('https://api.example.com/users/1')
  .then(user => {
    console.log('用戶:', user.name);
  })
  .catch(error => {
    console.error('發(fā)生錯誤:', error.message);
  });

5.5 記錄和監(jiān)控錯誤

在生產(chǎn)環(huán)境中，使用錯誤監(jiān)控工具（如Sentry、LogRocket）記錄和監(jiān)控錯誤，幫助快速定位和修復問題。

示例：

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP 錯誤! 狀態(tài): ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    Sentry.captureException(error);
    console.error('發(fā)生錯誤:', error.message);
    throw error;
  }
}

fetchData('https://api.example.com/data')
  .then(data => {
    // 處理數(shù)據(jù)
  })
  .catch(error => {
    // 處理錯誤
  });

6. 實戰(zhàn)案例

6.1 簡單的Fetch請求處理404錯誤

場景：

發(fā)起一個GET請求獲取用戶數(shù)據(jù)，如果用戶不存在，服務器返回404錯誤。需要在前端捕獲并處理這個錯誤。

代碼示例：

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (response.ok) {
      const user = await response.json();
      console.log('用戶數(shù)據(jù):', user);
      return user;
    } else if (response.status === 404) {
      console.error('用戶未找到 (404)');
      // 可以顯示用戶友好的錯誤消息或進行其他處理
    } else {
      throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    console.error('網(wǎng)絡錯誤或其他問題:', error);
    // 可以顯示全局錯誤消息或重試邏輯
  }
}

getUser(12345);

解釋：

響應檢查：使用response.ok判斷請求是否成功。
特定狀態(tài)碼處理：單獨處理404錯誤，提供特定的反饋。
通用錯誤處理：處理其他HTTP錯誤和網(wǎng)絡錯誤。

6.2 在React組件中處理404錯誤

場景：

在一個React組件中，發(fā)起一個Fetch請求獲取文章內(nèi)容。如果文章不存在（返回404），需要顯示一個“文章未找到”的消息。

代碼示例：

import React, { useEffect, useState } from 'react';

function Article({ articleId }) {
  const [article, setArticle] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    async function fetchArticle() {
      try {
        const response = await fetch(`https://api.example.com/articles/${articleId}`);
        if (response.ok) {
          const data = await response.json();
          setArticle(data);
        } else if (response.status === 404) {
          setError('抱歉，您請求的文章未找到。');
        } else {
          throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
        }
      } catch (err) {
        setError('網(wǎng)絡錯誤，請稍后再試。');
        console.error('發(fā)生錯誤:', err);
      }
    }

    fetchArticle();
  }, [articleId]);

  if (error) {
    return <div className="error">{error}</div>;
  }

  if (!article) {
    return <div>加載中...</div>;
  }

  return (
    <div className="article">
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </div>
  );
}

export default Article;

解釋：

狀態(tài)管理：使用useState管理文章數(shù)據(jù)和錯誤信息。
異步請求：在useEffect中發(fā)起Fetch請求。
錯誤處理：根據(jù)響應狀態(tài)碼設置錯誤信息，提供用戶友好的反饋。
條件渲染：根據(jù)狀態(tài)顯示加載中、錯誤消息或文章內(nèi)容。

6.3 重試機制應對偶發(fā)的404錯誤

場景：

某些情況下，服務器可能暫時無法找到資源（如由于緩存更新或部署延遲），可以實現(xiàn)重試機制，嘗試再次請求。

代碼示例：

async function fetchWithRetry(url, options = {}, retries = 3, delay = 1000) {
  try {
    const response = await fetch(url, options);
    if (response.ok) {
      return await response.json();
    } else if (response.status === 404) {
      if (retries > 0) {
        console.warn(`資源未找到 (404)，正在重試... 剩余次數(shù): ${retries}`);
        await new Promise(res => setTimeout(res, delay));
        return fetchWithRetry(url, options, retries - 1, delay * 2); // 指數(shù)退避
      } else {
        throw new Error('資源未找到 (404)');
      }
    } else {
      throw new Error(`服務器錯誤! 狀態(tài): ${response.status}`);
    }
  } catch (error) {
    if (retries > 0 && error.message !== '資源未找到 (404)') {
      console.warn(`請求失敗，正在重試... 剩余次數(shù): ${retries}`);
      await new Promise(res => setTimeout(res, delay));
      return fetchWithRetry(url, options, retries - 1, delay * 2);
    } else {
      throw error;
    }
  }
}

fetchWithRetry('https://api.example.com/data')
  .then(data => {
    console.log('數(shù)據(jù):', data);
  })
  .catch(error => {
    console.error('請求最終失敗:', error.message);
  });

解釋：

遞歸重試：函數(shù)在遇到404錯誤時，根據(jù)剩余次數(shù)決定是否重試。
指數(shù)退避：每次重試的延遲時間翻倍，避免過度頻繁的請求。
錯誤終止：在重試次數(shù)耗盡后，拋出錯誤以便調(diào)用方處理。

注意事項：

合理的重試次數(shù)：避免無限制的重試，通常設置一個最大重試次數(shù)。
延遲策略：結(jié)合指數(shù)退避策略，避免網(wǎng)絡擁堵和服務器壓力。
特定錯誤處理：針對特定的錯誤狀態(tài)碼（如404）進行特殊處理，避免無意義的重試。

7. 總結(jié)

在使用Fetch API進行網(wǎng)絡請求時，正確處理HTTP 404錯誤是確保應用穩(wěn)定性和用戶體驗的關鍵。通過以下關鍵措施，開發(fā)者可以有效地檢測和應對404錯誤：

檢查響應狀態(tài)碼：始終檢查響應對象的ok屬性和status碼，確保請求成功后再處理數(shù)據(jù)。
提供用戶友好的反饋：在發(fā)生404錯誤時，向用戶展示明確的錯誤信息，并提供可行的后續(xù)操作，如返回主頁或重新搜索。
實現(xiàn)重試機制：對于偶發(fā)性的404錯誤，可以實施重試策略，增加請求成功的可能性。
使用async/await和try/catch：利用現(xiàn)代JavaScript特性，簡化異步代碼和錯誤處理邏輯。
采用TypeScript進行類型檢查：通過靜態(tài)類型檢查，提前發(fā)現(xiàn)潛在的錯誤，減少運行時錯誤的發(fā)生。
記錄和監(jiān)控錯誤：在生產(chǎn)環(huán)境中，使用錯誤監(jiān)控工具記錄和分析錯誤，幫助快速定位和修復問題。
優(yōu)化API設計：確保后端API在資源不存在時返回明確的錯誤信息，并提供有用的錯誤描述。

以上就是使用Fetch API時獲取404錯誤的解決方案的詳細內(nèi)容，更多關于Fetch API獲取404錯誤的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

基于JavaScript實現(xiàn)五子棋游戲
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
js中幾種循環(huán)的退出方式實例總結(jié)
提到在一段程序中如果碰到需要終止,結(jié)束一個循環(huán),函數(shù)或者一段代碼,一般會想到以下這幾個關鍵字return、continue、break,這篇文章主要給大家介紹了關于js中幾種循環(huán)的退出方式,需要的朋友可以參考下
2022-12-12
javascript之通用簡單的table選項卡實現(xiàn)(二)
上篇中的選項卡存在這樣的問題：把邏輯封裝在table.js中，不夠靈活，也就是說如果某個選項卡是實現(xiàn)異步請求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過table.js來達到目的，顯然不是我所需要的。
2010-05-05
JS/jQuery實現(xiàn)超簡單的Table表格添加,刪除行功能示例
這篇文章主要介紹了JS/jQuery實現(xiàn)超簡單的Table表格添加,刪除行功能,結(jié)合實例形式詳細分析了JS與jQuery針對Table表格添加,刪除行功能的相關實現(xiàn)技巧,需要的朋友可以參考下
2019-07-07
JavaScript prototype屬性使用說明
prototype 是在 IE 4 及其以后版本引入的一個針對于某一類的對象的方法，而且特殊的地方便在于：它是一個給類的對象添加方法的方法！
2010-05-05
javascript實現(xiàn)隨機讀取數(shù)組的方法
這篇文章主要介紹了javascript實現(xiàn)隨機讀取數(shù)組的方法,涉及javascript隨機數(shù)及針對數(shù)組操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
如何使用 Deepseek 寫的html油耗計算器
在油價高企的今天,了解自己愛車的真實油耗情況對每位車主來說都至關重要,本文將介紹一個簡單實用的油耗計算方法,并提供一個可以直接使用的HTML油耗計算器,本文提供的油耗計算器簡單易用,無需安裝任何軟件,在任何有瀏覽器的設備上都可以使用,感興趣的朋友一起看看吧
2025-04-04
純原生js實現(xiàn)table表格的增刪
本文主要介紹了純原生javascript實現(xiàn)table表格的增刪的方法，文章底部提供了完整的代碼。需要的朋友一起來看下吧
2017-01-01
JS插入排序簡單理解與實現(xiàn)方法分析
這篇文章主要介紹了JS插入排序簡單理解與實現(xiàn)方法,結(jié)合實例形式分析了JavaScript插入排序基本原理、實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下
2019-11-11
JavaScript入門教程之引用類型
引用類型是一種數(shù)據(jù)結(jié)構(gòu)，用于將數(shù)據(jù)和功能組織在一起。這篇文章主要介紹了JavaScript入門教程之引用類型的相關資料，需要的朋友一起學習吧
2016-05-05