JavaScript/API：调用异步函数导出axios请求的规范实现方案

你当前写法的核心问题是顶层作用域直接使用await仅ES模块顶层await特性支持，且会阻塞模块加载、导致CHOOSE_SPORT在请求完成前处于不可用状态，同时两个异步请求串行执行会浪费请求时间。

方案1：预加载全量定价（适合运动项目少的场景） #

模块可主动提前初始化所有定价数据，请求完成后后续调用直接拿缓存结果：

import axios from 'axios';
import { freeze } from '你的冻结方法导入路径';

export const url = '/api/sport/';
// 定价缓存
let CHOOSE_SPORT = null;

export const requestApi = async (sport) => {
  const req = await axios.get(url + sport);
  console.log(req.data);
  return req.data;
};

// 并行初始化所有定价
export const initSportPrice = async () => {
  if (CHOOSE_SPORT) return CHOOSE_SPORT;
  const [footballPrice, basketballPrice] = await Promise.all([
    requestApi('football'),
    requestApi('basketball')
  ]);
  CHOOSE_SPORT = freeze({
    [SPORT.NOW]: footballPrice,
    [SPORT.TOMORROW]: basketballPrice
  });
  return CHOOSE_SPORT;
};

// 对外暴露的获取定价方法
export const getPrize = async (sportType) => {
  if (!CHOOSE_SPORT) await initSportPrice();
  return CHOOSE_SPORT[sportType];
};

业务侧使用方式：

// 可在应用初始化阶段提前执行预加载
initSportPrice();

// 实际业务取值
const currentPrice = await getPrize(SPORT.NOW);

方案2：懒加载定价（适合运动项目多的场景） #

用到对应项目时才发起请求，已请求过的结果自动缓存：

import axios from 'axios';
import { freeze } from '你的冻结方法导入路径';

export const url = '/api/sport/';
const priceCache = new Map();
// 运动类型和请求参数的映射
const SPORT_PARAM_MAP = freeze({
  [SPORT.NOW]: 'football',
  [SPORT.TOMORROW]: 'basketball'
});

export const requestApi = async (sport) => {
  if (priceCache.has(sport)) return priceCache.get(sport);
  const req = await axios.get(url + sport);
  console.log(req.data);
  priceCache.set(sport, req.data);
  return req.data;
};

export const getPrize = async (sportType) => {
  const sportParam = SPORT_PARAM_MAP[sportType];
  if (!sportParam) throw new Error('不支持的运动类型');
  return requestApi(sportParam);
};

注意事项 #

• 原代码中requestApi同时使用await和.then属于冗余写法，统一用async/await语法即可
• 可根据业务需要给请求方法添加try/catch异常捕获，避免单个请求失败影响整体逻辑
• 若需要支持过期刷新，可给缓存的每条数据添加时间戳，过期后自动重新请求

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