如何在JavaScript中封装fetch为callApi函数并捕获所有错误？

DevOps 小满

2026-7-20

解决方法

你现在的问题核心有两个：一是response.text()是异步方法，直接拼接会得到Promise对象而非实际文本；二是没必要手动包裹new Promise，因为myFetch()本身就返回Promise，直接链式调用或用async/await更简洁。

文本响应的正确实现

链式调用写法

function callApi() {
  return myFetch()
    .then(response => {
      if (response.ok) {
        // 成功时返回文本Promise，链式传递到后续逻辑
        return response.text();
      } else {
        // 先获取错误响应的文本内容，再抛出格式化错误
        return response.text().then(body => {
          throw new Error(`${response.status}: ${body}`);
        });
      }
    })
    .catch(error => {
      // 捕获fetch自身的错误（如网络问题、请求格式错误）并抛出
      throw error;
    });
}

Async/Await写法（更易读）

async function callApi() {
  try {
    const response = await myFetch();
    if (response.ok) {
      return await response.text();
    } else {
      const body = await response.text();
      throw new Error(`${response.status}: ${body}`);
    }
  } catch (error) {
    throw error;
  }
}

JSON响应的处理差异

处理JSON响应逻辑几乎一致，只需要把response.text()替换为response.json()即可。注意如果后端错误响应返回的是JSON格式，就用response.json()解析；如果是纯文本，还是用response.text()，根据实际情况调整：

async function callApiJson() {
  try {
    const response = await myFetch();
    if (response.ok) {
      return await response.json();
    } else {
      // 假设错误响应是JSON格式，解析后转为字符串抛出
      const errorBody = await response.json();
      throw new Error(`${response.status}: ${JSON.stringify(errorBody)}`);
    }
  } catch (error) {
    throw error;
  }
}