如何使用fetch-mock模拟准确服务器错误并获取完整错误对象

问题根因 #

直接在fetchMock的响应回调中抛出普通对象时，fetch-mock内部会对抛出值执行默认的toString转换，最终就会得到[object Object]的无意义字符串。

解决方案 #

你可以根据你的模拟场景选择以下两种方案：

方案1：模拟网络级错误（直接触发catch回调）

如果要模拟断网、跨域等会直接导致fetch返回rejected状态的场景，不要直接throw对象，而是返回一个rejected的Promise，即可完整保留错误对象结构：

// 修改后的fetchMock配置
fetchMock.get('glob:https://*/server-api-uri', () => {
  return Promise.reject({ example: 'error' })
})

修改后业务代码无需调整，catch中即可直接拿到完整错误对象：

exampleServerCall().catch(error => {
  console.log(error) // 输出 {example: 'error'}
})

方案2：模拟HTTP接口错误（更贴近真实线上行为）

真实场景中，接口返回4xx、5xx状态码时，fetch默认不会触发catch，仅会将响应的ok属性设为false。这种更贴近真实业务的模拟方案如下：

// 修改后的fetchMock配置，可自定义状态码和返回体
fetchMock.get('glob:https://*/server-api-uri', {
  status: 500,
  body: { example: 'error' }
})

业务代码需要先判断响应状态，再手动抛出错误：

exampleServerCall()
  .then(async response => {
    if (!response.ok) {
      // 解析接口返回的错误内容后抛出
      const error = await response.json()
      throw error
    }
    // 正常处理成功响应逻辑
  })
  .catch(error => {
    console.log(error) // 输出 {example: 'error'}
  })

如果你使用的是axios等二次封装的请求库，库本身会对非2xx的状态码自动抛出错误，使用方案2的配置即可直接在catch中拿到错误内容。

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