使用 try and catch 处理状态 500

Question

我不知道什么是处理我的 API 发送的状态 500 的最佳方式。请你帮助我好吗？在下面的例子中，当我的 API 以状态 500 响应时，我希望在我的 redux 存储中设置一条错误消息。当我的 API 发送成功状态代码时，我希望在我的商店中“获取用户牌组”。

我的第一次尝试 对我来说合乎逻辑且枯燥，但没有奏效：

const createDeck = async () => {
        try {
          const request = await fetch(`${back}/deck/`, options)
          const response = await request.json()
          store.dispatch({ type: FETCH_USER_DECKS })
        } catch (error) {
          store.dispatch({ type: SET_ERROR, message: error })
        }
      }

当 API 发送 500 状态时，似乎没有抛出异常，我的 catch 块中的代码被忽略。

我的第二次和第三次尝试成功了，因为我也排除了他们，但他们感觉很复杂和奇怪：

第二次尝试：

 const createDeck = async () => {
        try {
          const request = await fetch(`${back}/deck/`, options)
          const response = await request.json()
          if (request.status === 201 || request.status === 200) {
            store.dispatch({ type: FETCH_USER_DECKS })
          } else {
          store.dispatch({ type: SET_ERROR, message: error })
          }
        } catch (error) {
          console.log('error')
        }
  }

这行得通，但它完全忽略了 catch 块，这让我想知道：那么 try...catch 的意义何在？

第三次尝试：

  const createDeck = async () => {
    try {
      const request = await fetch(`${back}/deck/`, options)
      const response = await request.json()
      if (request.status === 201 || request.status === 200) {
        store.dispatch({ type: FETCH_USER_DECKS })
      } else {
        throw response
      }
    } catch (error) {
      store.dispatch({ type: SET_ERROR, message: error })
    }
  }

第三次尝试使用catch，但是手动抛出异常感觉很奇怪，马上被catch捕获。

我是不是漏掉了什么？

Answer 1

Isbn 已经在评论中正确回答了这个问题。我再次将它放在这里以提高可见性： “由于您使用的是 fetch()，因此采用其实现模型并且不将 500 响应视为异常（尝试 2）可能是有意义的。但我也不会认为您的第三次尝试有任何问题（axios，例如，在这种情况下会引发错误。请注意，fetch() 响应公开了一个 ok 属性来检查请求是否成功

使用 try and catch 处理状态 500

Handling status 500 with try and catch

javascript

error-handling

fetch

try-catch