如何简化带Token预请求的Axios数据请求代码？

可以通过提取重复逻辑、使用async/await扁平化异步代码来大幅简化这段代码，同时补上缺失的错误处理：

// 提取重复的请求数据逻辑到独立函数
const fetchOutlets = async (limit, offset, filter) => {
  const res = await axios.post(`${BASE_URL}/json/em/pos/poses`, {
    limit,
    offset,
    contractType: 0,
    ...filter,
  });
  dispatch(reducerGetOutlets({ data: res.data, limit, offset: 0 }));
};

// 统一处理Token与请求流程
const getOutletsWithAuth = async (limit, offset, filter) => {
  try {
    let token = localStorage.getItem('token');
    // 如果没有Token，先请求获取并存储
    if (!token) {
      const tokenRes = await axios(`${process.env.REACT_APP_BASE_URL}/api/user/info`);
      token = `Basic ${tokenRes.data.token}`;
      localStorage.setItem('token', token);
    }
    // 设置全局Authorization头
    axios.defaults.headers.common['Authorization'] = token;
    // 调用提取好的请求函数
    await fetchOutlets(limit, offset, filter);
  } catch (err) {
    // 这里可以添加错误处理逻辑，比如清除失效Token、提示用户等
    console.error('请求失败:', err);
    localStorage.removeItem('token'); // 若Token失效，清空缓存
  }
};

// 调用执行
getOutletsWithAuth(limit, offset, filter);

优化点说明： #

• 消除代码冗余：把重复的post请求逻辑抽成独立函数fetchOutlets，避免在两个分支里重复写相同代码
• 扁平化异步流程：用async/await替代嵌套的then，让异步代码的执行顺序更直观，可读性更强
• 统一Token逻辑：将Token的获取、存储、设置头的逻辑集中到一处，后续修改只需调整这部分代码
• 增加错误处理：添加try/catch捕获请求异常，还能在Token失效时清空本地缓存，避免后续请求用无效Token

内容的提问来源于stack exchange，提问作者Стас Рябцев