在反应打字稿中使用异步等待和 try 和 catch 子句处理 HTTP 错误

Question

我有以下代码！

import React, { useState } from "react";

function App() {
const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>();
 async function fetchMoviesHandler() {
    setIsLoading(true);
    setError(null);
try {
      const response = await fetch("https://swapi.dev/api/film/");

      const data = await response.json();
const transformedMovies = data.results.map((movieData: any) => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
        };
      });
setMovies(transformedMovies);
} catch (err: any) {
setError(err.Message);
      console.log(err);
    }
    setIsLoading(false);
  }
return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>
        
        {!isLoading && movies.length > 0 && <p>Movies fetched!</p>}
        {!isLoading && movies.length === 0 && !error && <p>Found no movies.</p>}
        {!isLoading && error && <p>{error}</p>}
        {isLoading && <p>Loading...</p>}
      </section>
    </React.Fragment>
  );
}

export default App;

这里的 URL 不正确，会抛出 404 错误，我希望显示该错误消息。当我 console.log 错误消息显示在控制台上，但错误消息未显示在网页上。如果有人可以帮助我解决这个问题，将不胜感激。

Answer 1

从Fetch docs可以看到：

从 fetch() 返回的 Promise 不会拒绝 HTTP 错误状态 即使响应是 HTTP 404 或 500。而是 [...] Promise 将正常解析（将响应的 ok 属性设置为 如果响应不在 200–299 范围内，则返回 false)

所以fetchMoviesHandler 中的catch 子句在收到 404 响应时不会立即执行，它只会在您尝试从响应 (const data = await response.json()) 解析正文时执行，因为没有 json 可用于在那里解析。那是错误实际上被抛出和捕获的时候，但是它上面没有 Message 属性，所以没有什么可显示的：内置错误对象上的属性是 message。

为了处理这种情况，您应该检查 HTTP 响应中的 ok 属性并抛出特定错误。像这样的：

async function fetchMoviesHandler() {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch('https://swapi.dev/api/film/');
      if (!response.ok) {
        throw new Error('Something went wrong');
      }
      const data = await response.json();
      const transformedMovies = data.results.map((movieData: any) => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
        };
      });
      setMovies(transformedMovies);
    } catch (err: any) {
      setError(err.message);
      console.log(err);
    }
    setIsLoading(false);
  }