如何在 React js 中为所有请求只创建一个服务层？

Question

我想制作一个通用服务层来处理 reactjs 中的所有请求。

这是我到目前为止完成的代码：

这是服务层的thunk动作。 postRequest 方法获取调用 api.

所需的所有参数

bankCustomerThunkAction.js

    export const fetchBankCustomers = (filterType, searchParam) => dispatch => {
apiServices.postRequest(urlBuilders.getUrlAppenderWithParams(bankCustomerApiConstant.GET_BANK_CUSTOMER_STATISTICS, "filter", filterType), searchParam).then((response) => dispatch(actions.getBankCustomerStatisticsWithDate(response))).catch(error => console.log("error", error))

}

这是请求后端 api 的唯一服务层

service.js

 export const postRequest = (url, data) => Axios({method: 'POST' , url:url , data : data})

做这个就够了吗还是有其他选择？

Answer 1

我想你的做法是对的。

我可以提一点建议，当您需要不同的 header 来满足特定要求时，这会有所帮助。

即

bankCustomerThunkAction.js -> DataService.js -> service.js

bankCustomerThunkAction.js

dataService.bankCustomerThunkAction().then().catch()

DataService.js -> 这里你可以header代码，或者任何可选的参数代码

export bankCustomerThunkAction ()=>apiServices.postRequest(urlBuilders.getUrlAppenderWithParams(bankCustomerApiConstant.GET_BANK_CUSTOMER_STATISTICS, "filter", filterType), searchParam).then((response) => dispatch(actions.getBankCustomerStatisticsWithDate(response))).catch(error => console.log("error", error))

如何在 React js 中为所有请求只创建一个服务层？

How to make only one service layer for all request in react js?

reactjs

redux-thunk

axios