如何处理异步/等待获取 API 中的错误 404

Posted 2023-02-27

【中文标题】如何处理异步/等待获取 API 中的错误 404

【英文标题】：How can I handle error 404 in async/await fetch API

【发布时间】：2019-01-17 18:03:27

【问题描述】：

在没有提供数据的情况下是否有任何机会捕获错误？ 我收到错误 404 但不能例如 console.log 它...

class App extends React.Component
  getWeather = async (e) => 
    e.preventDefault();

    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;

    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=$city,$country&appid=$API_KEY&units=metric`);

    const data = await api_call.json();

    console.log(data);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【问题讨论】：

if (api_call.ok) 200-299 api_call.status 包含状态码

在您的屏幕截图中，响应在输出中，“我收到错误 404 但无法例如 console.log 它”是什么意思？

提示：使用 https！

【参考方案1】：

在尝试使用 .json() 方法提取正文之前，只需检查已解析承诺的 status 属性。

async function test() 
  const api_call = await fetch(`https://cors-anywhere.herokuapp.com/http://example.com/fake/fake`);
  console.log(api_call.status);


test();

【讨论】：

只是一个提示 httpbin.org 是一个很好的 cors 站点，测试有 httpbin.org/statusxxx 之类的东西

【参考方案2】：

无论使用async/await 或承诺链，fetch API 都会返回一个包含Response 对象的promise。响应对象包含一个 status 属性，该属性返回一个 HTTP 状态代码。在您对 response 对象调用 .json() 方法之前，您可以查看 if res.status === 200。例如，OpenWeather API 将为成功的请求返回一个 HTTP 状态代码 200。因此，要检查您的 API 请求是否成功，您可以执行以下操作...

class App extends React.Component
  getWeather = async (e) => 
    e.preventDefault();

    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;

    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=$city,$country&appid=$API_KEY&units=metric`);

    if (api_call.status !== 200) 
        // You can do your error handling here
     else 
        // Call the .json() method on your response to get your JSON data
        const data = await api_call.json();
    
  

你可以看到更多Response对象属性和方法By viewing the MDN documentation

【参考方案3】：

试试try catch:

getWeather = async (e) => 
    try 
        e.preventDefault();
        const city = e.target.elements.city.value;
        const country = e.target.elements.country.value;
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=$city,$country&appid=$API_KEY&units=metric`);
        const data = await api_call.json();
        console.log(data);
     catch(e) 
        console.log('error: ', e);  
    

【讨论】：

我有点想看看 await 如何影响对 try catch 块的需求；)

这个返回了和我之前一样的错误

【参考方案4】：

使用

class App extends React.Component
  getWeather = async (e) => 
    e.preventDefault();

    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    try 
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=$city,$country&appid=$API_KEY&units=metric`);

        const data = await api_call.json();
        console.log(data);
     catch(e) 
       console.log(e);
    

  

【讨论】：

Resolve of this is Error Failed to compile ./src/App.js Line 22: 'data' is not defined no-undef 搜索关键字以了解有关每个错误的更多信息。