TypeScript中axios异步请求返回Promise的最佳实现方式

关于await关键字的使用说明 #

不是必须使用await关键字。async/await本质是Promise链式调用的语法糖，你完全可以移除await，直接返回经过then/catch处理的Promise实例，和加await的写法执行效果完全一致。
你当前的写法属于await和then/catch混写，是无意义的冗余：await会等待后面的Promise链解析完成拿到结果，你又把这个结果包在async函数里重新返回成Promise，多了一层不必要的包装。
两种规范写法二选一即可：

1. 纯Promise链写法（不需要async关键字）

// 提前抽离公共常量，避免硬编码
const ARWEAVE_ABSTRACTION_FALLBACK: AbstractionPreview = {
  name: "Null",
  imageUri: "null",
  symbol: "null"
};

export function loadSingleArweaveAbstraction(absId: string): Promise<AbstractionPreview> {
  return axios({
    method: 'get',
    url: ARWEAVE_URL + absId,
    responseType: 'json',
    timeout: 10000
  }).then(response => ({
    name: response.data.name,
    imageUri: response.data.image,
    symbol: response.data.symbol,
  })).catch(() => ARWEAVE_ABSTRACTION_FALLBACK);
}

2. async/await搭配try/catch写法（更符合线性阅读习惯，推荐复杂逻辑使用）

export async function loadSingleArweaveAbstraction(absId: string): Promise<AbstractionPreview> {
  try {
    const response = await axios({
      method: 'get',
      url: ARWEAVE_URL + absId,
      responseType: 'json',
      timeout: 10000
    });
    return {
      name: response.data.name,
      imageUri: response.data.image,
      symbol: response.data.symbol,
    };
  } catch (err) {
    return ARWEAVE_ABSTRACTION_FALLBACK;
  }
}

兜底逻辑优化方案 #

直接在工具函数的catch块硬编码返回兜底值的问题很明显：一是调用方无法区分返回的是真实数据还是兜底值，二是错误被完全吞掉，不利于问题排查。更合理的实现方式如下：

• 优先把错误抛出，交给调用方按需处理
  工具函数本身不需要绑定固定的兜底逻辑，不同业务场景的错误处理策略差异很大：列表流场景可能需要展示兜底占位，详情页场景可能需要弹出错误提示。你可以在catch里打印/上报错误日志后直接抛出，让调用方自行决定处理逻辑：

export async function loadSingleArweaveAbstraction(absId: string): Promise<AbstractionPreview> {
  try {
    const response = await axios({
      method: 'get',
      url: ARWEAVE_URL + absId,
      responseType: 'json',
      timeout: 10000
    });
    // 增加字段合法性校验，避免接口返回异常结构导致下游报错
    const { name, image, symbol } = response.data;
    if (typeof name !== 'string' || typeof image !== 'string' || typeof symbol !== 'string') {
      throw new Error(`Abstraction data invalid for id: ${absId}`);
    }
    return { name, imageUri: image, symbol };
  } catch (err) {
    // 可在此处接入错误日志上报
    console.error('Load arweave abstraction failed:', err);
    throw err;
  }
}

调用时按需处理即可：

// 需要兜底的场景
const preview = await loadSingleArweaveAbstraction(absId).catch(() => ARWEAVE_ABSTRACTION_FALLBACK);

// 需要弹出错误提示的场景
try {
  const preview = await loadSingleArweaveAbstraction(absId);
} catch {
  showErrorToast('加载失败，请检查网络后重试');
}

• 如果业务确定该函数所有调用场景都统一用兜底值，就把兜底值抽成全局常量，不要在catch块里硬编码对象，后续修改兜底逻辑只需要改一处即可。
• 公共配置抽离：如果项目里有大量arweave相关的请求，可以创建独立的axios实例，把baseURL、超时、拦截器等公共配置统一维护，减少重复代码。

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