使用 React 处理 API 获取请求时出错答案

【问题标题】：Error handling API fetch request with React使用 React 处理 API 获取请求时出错
【发布时间】：2022-01-13 11:40:26
【问题描述】：

我正在使用 React，只是想要一些关于错误处理的建议。

我在异步函数中有我的 fetch 请求，这个函数在另一个文件夹中，并被导入到我的 App.js 文件中。我这样做是因为我想尝试使用模拟服务工作者进行测试，并通过单独文件中的请求更轻松地阅读它。

通过查看下面的代码，这是错误处理的最佳做法吗？有没有更好更简洁的方法？

这是我的 fetch async 函数，目前我故意提供了错误的环境变量名称，所以它会给我一个 401 未经授权的错误。

require('dotenv').config()

export const collect = async () => {
    const key = process.env.REACT_APP_API_KE
    try{
      const res = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=london&appid=${key}`)
      if(res.status !== 200){
          throw new Error(res.status)
      }
        const data = await res.json()
        return data
      } catch (error){
        let err = {
          error: true,
          status: error.message,
        }
        return err
      }
}

这是在我的 App.js 文件中调用的（目前没有渲染太多）

import { useState } from 'react'
import { collect } from './utilities/collect'
require('dotenv').config()

function App() {
  const [data, setData] = useState("")
  const [error, setError] = useState({ error: false, status: "" })
  const handleFetch = async () => {
      let newData = await collect()
      if(newData.error){
        setError({ error: newData.error, status: newData.status })
      }else {
        setData(newData)
      }
  }
  return (
    <div className="App">
      <h1>weather</h1>
      <button onClick={handleFetch}>fetch</button>
    </div>
  );
}

export default App;

任何帮助或建议都会很棒。

【问题讨论】：

标签： javascript reactjs api testing error-handling

【解决方案1】：

在围绕 Promises 或 async 和 await 编写抽象时，应确保正确使用它，这是一个很好的 Promse 必须允许它的消费者使用 then 和 catch 方法，或者应该允许它的消费者使用 try 和 catch 使用它并提供有关错误的适当信息

从您的代码中，抽象不会给出适当的响应，并且不遵循承诺的标准行为，它总是解决并且从不拒绝，尽管代码有效，但 collect 的实现不同于一个标准的Promise，对于标准代码库来说不是很好，例如，一个好的抽象将提供从第三方api

返回的错误信息

修改代码的适当方式

第三方api返回此响应

{
 "cod":401, 
 "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}

这应该是你的实现

// Your fetch functon abstraction modified
require('dotenv').config()
const collect = async () => {
    const key = process.env.REACT_APP_API_KE;
      const res = await fetch(
        `http://api.openweathermap.org/data/2.5/weather?q=london&appid=${key}`,
      );
      if (res.status !== 200) {

        const error = await res.json();
        throw {message: error.message,status:error.cod};
      }
      const data = await res.json();
      return data;
  };

您的应用组件现在应该是这样的

import { useState } from 'react'
import { collect } from './utilities/collect'
require('dotenv').config()

function App() {
  const [data, setData] = useState("")
  const [error, setError] = useState({ error: false, status: "" })
  const handleFetch = async () => {
      try {
            let newData = await collect()
            setData(newData)
      } catch(e){
          setError({ error: e.message, status: e.status })
      }
  }
  return (
    <div className="App">
      <h1>weather</h1>
      <button onClick={handleFetch}>fetch</button>
    </div>
  );
}

export default App;

【讨论】：