Axios 0.28版本下TypeScript中如何将响应数据转为Blob？

问题根源 #

从错误信息来看，response的类型被推断为AxiosResponse<AxiosResponse<any, any>, any>，说明response.data实际是嵌套的AxiosResponse对象，而非预期的Blob。这通常是Axios类型定义冲突、拦截器错误包装响应，或是版本升级后类型推断逻辑变化导致的。

解决步骤 #

1. 移除冲突的@types/axios依赖 #

Axios从0.27版本开始自带官方TypeScript类型定义，无需再安装@types/axios。如果项目中同时存在该依赖，会和Axios内置类型冲突，导致类型推断错误。执行以下命令卸载：

npm uninstall @types/axios
# 或使用yarn
yarn remove @types/axios

2. 显式指定泛型与responseType类型 #

升级后的Axios对responseType的类型推断更严格，需要显式指定泛型，并确保responseType是字面量类型而非宽泛的string：

const response = await axios<Blob>({
  url: result?.source_file,
  method: "GET",
  responseType: "blob" as const, // 强制类型为"blob"，帮助TypeScript正确推断response.data类型
});

3. 检查响应拦截器是否错误包装响应 #

如果项目中配置了响应拦截器，确认拦截器没有将响应对象重复包装：

// 错误示例：拦截器返回完整response，导致后续请求的response.data变成原始response
axios.interceptors.response.use(res => res);

// 正确处理：若需保留完整响应，确保类型定义正确；若只需返回数据，直接返回res.data
axios.interceptors.response.use(res => res.data);

4. 临时方案：类型断言（不推荐长期使用） #

如果以上方法无法快速解决，可以临时用类型断言绕过编译错误，但建议后续找到根本原因：

const blob = new Blob([response.data as unknown as Blob], { type: "audio/mp3" });

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