reactjs - 使用自定义Axios和redux-saga处理错误

Question

我的React App中有以下管道

saga.js:

function* handleGetTrack(action: ReturnType<typeof selectTrack>) {
  try {
    const getTrackResponse = yield httpGetTrack(action.payload)
    yield console.log(getTrackResponse)

     getTrackResponse.status === 200
       ? yield put(trackSelected(getTrackResponse.data))
       : yield put(selectTrackError('Track Not Found (Get)'))
  } catch (err) {
    if (err instanceof Error && err.stack) {
      yield put(selectTrackError(err.stack))
    } else {
      yield put(selectTrackError('An unknown error occured.'))
    }
  }
}

Api.js

export function httpGetTrack(trackId) {
  return customAxios.get(`${URL}/tracks/${trackId}`)
}

customAxios.js:

export const customAxios = axios.create({
  baseURL: process.env.REACT_APP_API_ENDPOINT,
  timeout: 10000,
})
customAxios.interceptors.response.use(
  function(response) {
    return response
  },

  function(error) {
    const errorResponse = error.response
    if (isTokenExpiredError(errorResponse)) {
      return resetTokenAndReattemptRequest(error)
    }
    return error.response
  }
)

这样，一切正常，实际上，在我的saga.js中，我可以使 console.log(getTrackResponse)很好地打印错误，

但是在Axios文档中，它说tu使用 return Promise.reject(error)而不是 return error.response
这是为什么 ？？我做得好还是做错了？

Answer 1

您是否尝试过使用call效果？例如:

import { call } from 'redux-saga/effects';

...

const getTrackResponse = yield call(httpGetTrack, action.payload);

...

定义拦截器时，还应该遵循Axios文档

function(error) {
    const errorResponse = error.response
    ...
    return Promise.reject(error.response);
}