try...catch 在 useEffect 内部的异步调用中需要吗？答案

【问题标题】：try...catch needed in async call inside useEffect?try...catch 在 useEffect 内部的异步调用中需要吗？
【发布时间】：2023-01-30 06:06:47
【问题描述】：

我正在尝试在 useEffect 挂钩中做一些异步的事情。所以首先我定义异步函数，然后我调用该函数。我不太确定如何正确处理错误。 try...catch 部分是否也需要作为函数调用的 .catch？不一样吗？

useEffect(() => {
  const fetchData = async () => {
    try {
      const token = await AsyncStorage.getItem('auth.token')
      // do something
    } catch (e) {
      console.error(e)
    }
  }

  fetchData().catch(console.error)
}, [])

【问题讨论】：

外层的 .catch 是没有意义的，因为内层的 async catch 将任何拒绝变成了未定义的解决方案。这与 React/useEffect 无关，只是基本的 promise 使用。
“不一样吗？”: 通常有很多方法可以达到相同的目标。
函数内部的 try...catch 块用于处理在该函数范围内发生的错误，函数调用末尾的 catch 块用于处理尝试调用函数时发生的任何错误，例如作为网络错误。
你是对的。你不需要两者。

标签： javascript reactjs react-hooks async-await try-catch

【解决方案1】：

你有两个选项来处理 JavaScript 中的异步操作，你可以使用 async await 或 .then() & .catch()。这是两者的示例：

useEffect(() => {
  const fetchData = async () => {
    try {
      const token = await AsyncStorage.getItem('auth.token')
      // do something
    } catch (e) {
      console.error(e)
    }
  }

  fetchData()
}, [])

useEffect(() => {
  const fetchData = () => {
    AsyncStorage.getItem('auth.token')
      .then(token => console.log(token))
      .catch(err => console.error(err))
  }
  fetchData()
}, [])

【讨论】：