如何处理来自 redux 应用程序的 api 调用中的 >400 响应？

Question

目前我使用 fetch 在我的 redux 应用程序中进行 api 调用。

我尝试构建一个中间件 api :-

export function api(endpoint,method,isAuth=false,body=null,multiPart=false,initToken=null)
{
  let promise = null
  let myHeaders = new Headers();
  if(!multiPart){
    myHeaders.append("Content-Type", "application/json");
  }


  if(isAuth){
    //if authorizations is needed adding header
      const accessToken = authentication.getAccessToken()
      myHeaders.append("Authorization",accessToken)
  }

  if(initToken){
    // in case of initToken adding to Authorization
    console.log("here"+initToken)
    myHeaders.append("Authorization",initToken)
  }

  let myInit = { method: method,headers: myHeaders};

  myInit['method'] = method
  myInit['headers'] = myHeaders

  if(body){
      myInit['body'] = body
  }


  let request = new Request(constants.BASE_URL+endpoint,myInit);
  promise = fetch(request)

  return promise
}

我用 extraArguments 在我的 thunk 中注入了上面的内容

export default function configureStore(initialState) {
  const store=createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(thunk.withExtraArgument(api),createLogger()),
      DevTools.instrument()
    ))
  return store
}

在调用 api 的操作中：-

export function fetchEmployeeInformation(){
  return (dispatch,getState,api) => {
        const endPoint = '//url'
        const  method = 'GET'
        const isAuth = true
        const promise = api(endPoint,method,isAuth)
        promise
        .then(response =>
          response.json().then(json => ({
            status:response.status ,
            json
          })
        ))
        .then(
          ({ status, json }) => {
            if( status >= 200 && status < 300) {
               //success
            }
            if (status >= 400 ) {
                //throw error
            }
          },
          err => {
            console.log("error"+err);
          }
        );
  }
}

所以我的问题是 angularjs 中是否有像 $http 这样的包，我可以将其与我的 react-redux 应用程序一起使用。我的意思是，如果状态代码在 200-299 范围内，它应该成功，否则会抛出错误。

使用fetch我发现它不太关心代码，我必须专门检查代码范围是否大于>400然后抛出错误。

有没有更好的方法来处理这个问题？

Answer 1

库 axios 的流程与 Angular $http 相似，包括 requestInterceptor 和 responseInterceptor。阅读更多 docs

Answer 2

您也可以尝试 frisbee，这是一个 fetch API 包装器。获得 response 对象后，您可以检查 err 或 ok 布尔值属性.

异步示例：

const api = new Frisbee({
   baseURI: 'https://yourapiurl.com'
})
const rs = await api.get(`url`)
if (rs.ok) {
  console.log('success')
} else {
  console.log('failure', rs.err)
}

Frisbee 还可以与 node 和 React Native 完美配合。

如何处理来自 redux 应用程序的 api 调用中的 >400 响应？

How to handle >400 responses in api calls from redux app?

fetch

reactjs

redux

react-redux