时间戳

首页 > 解决方案 > 如何在 axios catch() 块中重新抛出捕获的错误

javascript - 如何在 axios catch() 块中重新抛出捕获的错误

问题描述

里面，axios为什么throw new Error()不允许里面catch()？我有这样的要求，如果服务器返回错误，catch 块应该抛出一个错误，稍后将由 redux-saga 处理并调度适当的操作。

API 调用：

export const userSignupApi = userDetails => {
   const endpoint = `${URL_ROOT}${URN_SIGNUP}`;
    axios
    .post(endpoint, userDetails)
    .then(response => {
      console.log("Response: ", response);
      //do something with the response
    })
    .catch(error => {
      throw new Error(error.response.data.message);
    });
};

Unhandled Rejection (Error)由于上面的 catch 块，我得到了。下面是我处理操作的传奇：

import { call, takeLatest, put } from "redux-saga/effects";

function* handleUserSignup(action) {
  try {
    yield call(userSignupApi, action.userDetails);
    yield put(userSignupSuccess()); //dispatching success action
  } catch (error) {
    yield put(userSignupFail(error)); //dispatching error action
  }
}

function* watchUserSignup() {
  yield takeLatest(NEW_USER.SIGNUP, handleUserSignup);
}

编辑：为什么我想要上面的代码结构？因为这使得对 API 代码和 saga 代码的单元测试变得容易。

标签： javascriptreactjsaxiosredux-saga

解决方案

中创建的 PromiseuserSignupAPI没有在任何地方使用（甚至没有被返回），因此当内部抛出错误时catch，Promise 链解析为（未捕获的）被拒绝的 Promise，从而导致错误。

在 的调用者中userSignupAPI，你应该await调用，这样try/catch里面handleUserSignup就会看到抛出的错误：

export const userSignupAPI = userDetails => {
   const endpoint = `${URL_ROOT}${URN_SIGNUP}`;
    return axios
    .post(endpoint, userDetails)
    .then(response => {
      console.log("Response: ", response);
    })
    .catch(error => {
      throw new Error(error.response.data.message);
    });
};

async function* handleUserSignup(action) {
  try {
    yield await call(userSignupApi, action.userDetails);
    yield put(userSignupSuccess()); //dispatching success action
  } catch (error) {
    yield put(userSignupFail(error)); //dispatching error action
  }
}

function* watchUserSignup() {
  yield takeLatest(NEW_USER.SIGNUP, handleUserSignup);
}

（确保call返回Promise返回的userSignupApi）

推荐阅读