js Fetch返回数据res.json()报错问题

一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单、高效、快速、稳定、可定制等等诸多优点。一直也是用着很是舒服，直到有一天它竟然报错了。

前言

一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单、高效、快速、稳定、可定制等等诸多优点。一直也是用着很是舒服，直到有一天它竟然报错了。

什么是Fetch?

官方: Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

还原现场

因为业务需求简单,这里只封装了get和post方法, 并且后端数据都是已默认的json格式返回

const http = {
  apiBaseUrl: config.apiBaseUrl,
  get: function (url) {
    return new Promise((resolve, reject) => {
      fetch(this.apiBaseUrl + url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        }
      }).then(res => res.json()).then(res => {
        resolve(res);
      }).catch(e => {
        console.error("请求失败了,详细信息:" + JSON.stringify(e));
        reject(e);
      });
    })
  },
  post: function (url, body) {
    return new Promise((resolve, reject) => {
      fetch(this.apiBaseUrl + url, {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        }, body: JSON.stringify(body)
      }).then(res => res.json()).then(res => {
        resolve(res);
      }).catch(e => {
        console.error("请求失败了,详细信息:" + JSON.stringify(e));
        reject(e);
      })
    })
  }
}

这样的封装貌似也没什么问题