reactjs 在try块中测试API是否失败是一个好的实践吗?

qjp7pelc  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(103)

在我的React组件中获取以下代码:

const getPhotos = async (page?: number) => { 
    setLoading(true);
    try {
      const data = await endpoints.getCuratedPhotos(page)
      if (!data) {
        setError('No Photos found')
        setLoading(false);
      } else {
        setPhotos(data);
        setSearchQuery(null)
        setLoading(false);
      }

    } catch (e) {
      console.log('error something went wrong', e);
      setError(`error something went wrong, ${e}`)
      setLoading(false);
    }
  }

  useEffect(() => {
    getPhotos();
  }, [])

在try块中使用if语句检查!data是否有必要,甚至是一个好的实践?除了开发人员更改端点中的URL之外,是否还有其他情况会触发此操作?仅让我的catch块捕获所有错误是否足够?提前感谢您。

iezvtpos

iezvtpos1#

实际上,验证data是一个很好的实践:
1.它可以帮助您只呈现有效的数据,避免破坏UI。
1.它可以帮助您向用户显示一致的错误消息
此外,还有一种方法可以使用finally稍微重构函数,调用finally时可能出错,也可能不出错:

const getPhotos = async (page?: number) => { 
  setLoading(true);

  try {
    const data = await endpoints.getCuratedPhotos(page)
    if (!data) {
      setError('No Photos found')
    } else {
      setPhotos(data);
      setSearchQuery(null)
    }

  } catch (e) {
    setError(`error something went wrong, ${e}`)
  } finally {
    setLoading(false);
  }
}

相关问题