从Fetch切换到Axios：如何获取响应文本？

原Fetch代码：

const createAttachment = async (formData: FormData): Promise<boolean | string> => {
  try {
    const response = await fetch(API_URL, { method: 'POST', body: formData });
    const resultText = await response.text();

    if (response?.ok) {
      return resultText;
    }

    // 上传失败
    captureMessage(
      `联系表单附件上传失败: ${JSON.stringify(resultText)}`,
    );
    return false;
  } catch (error) {
    captureMessage(`联系表单附件上传失败: ${error}`);
    return false;
  }
};

当前Axios代码：

const api = axios.create({baseURL: env.STRAPI_URL})

const createAttachment = async (formData: FormData): Promise<boolean | string> => {
  try {
    const response = await api.post(DAKTELA_FILE_API, formData);
    const resultText = await response.data

    if (response.statusText === "OK" && response.status === 200) {
      return resultText;
    }

    // 上传失败
    captureMessage(
      `联系表单附件上传失败: ${JSON.stringify(resultText)}`,
    );
    return false;
  } catch (error) {
    captureMessage(`联系表单附件上传失败: ${error}`);
    return false;
  }
};

关键问题解决 #

Fetch的response.text()是强制将响应体解析为纯文本，而Axios默认会根据响应头的Content-Type自动解析响应（比如JSON、form-data等）。要实现等效功能，需要在Axios请求中配置responseType: 'text'，强制返回纯文本格式的响应体。

另外，原Axios代码中用response.statusText === "OK" && response.status === 200判断请求成功的逻辑不够严谨，Fetch的response.ok是判断状态码在200-299之间，Axios可以用同样的逻辑对齐。

修改后的Axios代码 #

const api = axios.create({ baseURL: env.STRAPI_URL });

const createAttachment = async (formData: FormData): Promise<boolean | string> => {
  try {
    // 配置responseType为'text'，强制解析为纯文本
    const response = await api.post(DAKTELA_FILE_API, formData, {
      responseType: 'text'
    });
    const resultText = response.data; // 无需await，Axios已直接解析为文本

    // 对齐Fetch的response.ok逻辑：状态码200-299视为成功
    if (response.status >= 200 && response.status < 300) {
      return resultText;
    }

    // 上传失败
    captureMessage(
      `联系表单附件上传失败: ${JSON.stringify(resultText)}`,
    );
    return false;
  } catch (error) {
    captureMessage(`联系表单附件上传失败: ${error}`);
    return false;
  }
};

说明 #

1. responseType: 'text'：这是实现response.text()等效功能的核心配置，告诉Axios不要自动解析响应，直接返回纯文本字符串。
2. 成功判断逻辑：用response.status >= 200 && response.status < 300替代原有的严格判断，和Fetch的response.ok行为完全一致，覆盖所有成功状态码。
3. 无需await：Axios在配置responseType后会直接同步返回解析后的结果，所以不需要像Fetch那样用await response.text()。

内容的提问来源于stack exchange，提问作者Daniel Bílek