Question

我有一个小问题，当我可以对API进行一些传奇调用时，我正在一个项目上，我的项目中大约有50个，但是如果请求状态为401，我必须注销用户，起初我没有考虑这一点，因为我不知道，但是我现在必须这样做。

所以我在三个saga函数（3个文件）中有这样的调用：

第一：

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多个文件进行更改。

有没有一种干净的方法可以做到这一点？要创建的中间人。

任何帮助将不胜感激。

Answer 1

这里有一些具有更简洁代码的函数（一个传奇助手）

首先，您可以创建一个准备请求选项的函数：

export const prepareOptions = (method, { data, params, successMessage, headers }) => {
    return {
        requestOptions: {
            method: method || 'GET',
            headers: headers || {
                'Content-Type': CONTENT_TYPE.JSON
            },
            data
        },
        params,
        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)
}

如何使用单个生成器功能处理401请求状态？

1 个答案: