问题描述
我有一个小问题,当我可以对API进行一些传奇调用时,我正在一个项目上,我的项目中大约有50个,但是如果请求状态为401,我必须注销用户,起初我没有考虑这一点,因为我不知道,但是我现在必须这样做。
第一:
const { data } = yield call(client.getProducts,{ type: 0 });
秒:
const { data } = yield call(client.getClients);
第三名:
const { isCreatedCorrectly } = yield call(client.createProduct,{ user });
所以我是直接从响应中提取数据,但是现在我必须要这样:
第一:
const response = yield call(client.getProducts,{ type: 0 });
if(response.status === 401 ) {
yield put(logout());
yield cancel();
}
const data = response.data; // and continue
秒:
const response = yield call(client.getClients);
if(response.status === 401 ) {
yield put(logout());
yield cancel();
}
const data = response.data; // and continue
第三名:
const response = yield call(client.createProduct,{ user });
if(response.status === 401 ) {
yield put(logout());
yield cancel();
}
const isCreatedCorrectly = response.isCreatedCorrectly ; // and continue
所以有些事情总是重复的,我想让事情变得更整洁,因为从您的角度来看,我必须对50多个文件进行更改。
有没有一种干净的方法可以做到这一点?要创建的中间人。
任何帮助将不胜感激。
解决方法
这里有一些具有更简洁代码的函数(一个传奇助手)
首先,您可以创建一个准备请求选项的函数:
export const prepareOptions = (method,{ data,params,successMessage,headers }) => {
return {
requestOptions: {
method: method || 'GET',headers: headers || {
'Content-Type': CONTENT_TYPE.JSON
},data
},successMessage
}
}
创建一个中心化的方法以便进行http调用,在我的情况下,我使用fetch,但是您可以使用axios或其他任何方法:
export function requestWithAuth(url,options) {
const optionsWithAuth = {
...options,headers: {
...options.headers,},};
if (!url) {
throw new Error('Url cannot be empty');
}
return fetch(url,optionsWithAuth).then(checkStatus)
.then(parseJSON).catch((error) => {
if (error.response && (error.response.status === 401 || error.status === 401)) {
loginDataStorageService.clearLoginData();
redirectToLoginWithBrowserHistory();
} else {
throw error;
}
});
}
然后创建一个传奇助手,集中处理http调用失败和超时的代码,成功操作(您可以自动执行成功操作,而不是为每个请求编写成功操作):
function* callApi(apiPath,options = {},type) {
const requestOptions = options.requestOptions || DEFAULT_OPTIONS
const URL = apiPath
try {
const { response,timeout } = yield race({
response: call(requestWithAuth,URL,requestOptions),timeout: delay(120000)
})
const { ...payload } = response
if (timeout) {
//will invoke a reject action
yield put({ type: `${type}_REJECTED`,payload: 'timeout' })
}
//will invoke a success action
yield put({ type: `${type}_FULFILLED`,payload})
return { response: payload}
} catch (err) {
//handle error
if (err.response && err.response.data) {
const payload = { data: err.response.data.description }
yield put({ type: `${type}_REJECTED`,payload })
} else {
yield put({ type: `${type}_REJECTED`,payload: err })
}
return null
}
}
所以您的呼叫将像这样:
function* requestData(action) {
const { numeroCompte } = action
const path = END_POINT
const options = prepareOptions(httpMethods.GET,{})
yield call(callApi,path,options,action.type)
}