Redux Saga中两种Axios分页请求写法的差异与问题解析

在Redux Saga中使用Axios发送分页GET请求时，第一种写法返回undefined，第二种可正常运行。第一种写法先拼接包含${pageNumber}的URL变量，再传入axios.get；第二种则直接在axios.get的模板字符串中拼接参数，以下是具体代码和原因分析：

第一种写法（返回undefined） #

function* workGetAllCats(action: any): any {
  let pageNumber = action.payload;

  let URL = `/api/admin/category?page=${pageNumber }`;

  const fetchAllCats = yield call(() => axios.get(URL));
  const formattedResponse = fetchAllCats.data;
  yield put(getAllCatsSuccess(formattedResponse));
}

function* catIndexSaga() {
  yield takeEvery("catIndex/getAllCats", workGetAllCats);
}
export default catIndexSaga;

第二种写法（正常运行） #

function* workGetAllCats(action: any): any {
  let pageNumber = action.payload;

  const fetchAllCats = yield call(() =>
    axios.get(`/api/admin/category?page=${pageNumber}`)
  );
  const formattedResponse = fetchAllCats.data;
  yield put(getAllCatsSuccess(formattedResponse));
}

function* catIndexSaga() {
  yield takeEvery("catIndex/getAllCats", workGetAllCats);
}
export default catIndexSaga;

差异与底层原因 #

两种写法的核心差异在于URL拼接时的空格问题：

• 第一种写法的模板字符串中，${pageNumber }的变量后面多了一个空格，导致最终URL变成/api/admin/category?page= [pageNumber的值]（比如pageNumber为1时，URL是/api/admin/category?page= 1）。后端接收到的page参数值带前导空格，无法正确解析分页参数，可能返回空数据或错误响应，进而导致fetchAllCats.data为undefined。
• 第二种写法的模板字符串${pageNumber}没有多余空格，拼接出的URL参数格式正确，后端能正常解析分页参数，返回预期数据。

至于Redux Saga的call effect底层逻辑，两种写法的调用方式是一致的：call会执行传入的函数，等待Axios返回的Promise完成后，将resolve的结果赋值给fetchAllCats。问题并非出在call的使用上，而是URL拼接的低级错误。

内容的提问来源于stack exchange，提问作者Armya Zabihi