如何处理来自 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

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。阅读更多文档

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一起工作。