通达信华泰扩展行情接口-js Fetch返回数据res.json报错问题

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

验证结果正确,一切又回到了正常。

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

Body类定义了以下方法以获取body内容。这些方法都会返回一个被解析后的Promise对象和数据。Request.arrayBuffer/Response.arrayBufferRequest.blob/Response.blobRequest.formData/Response.formDataRequest.json/Response.jsonRequest.text/Response.text

此时前端在处理完成后,控制台面板中Network中也显示post成功返回200了,但是在Console中却有一条红色报错信息

请求失败了,详细信息:{}

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

可知有5种数据格式,因为json和text可使用js原生方法JSON.parse/JSON.stringify相互转换,那就直接选用.text转成字符串判断即可.

// 将.then(res=> res.json()) 替换成下面
.then(res => {
  let data = res.text();//转成字符串判断
  return data.then(r => {
  if (r.length === 0) return null;
  else return JSON.parse(r);
  })
})

而且还有一条报错信息

Uncaught (in promise) TypeError: Failed to execute "json" on "Response": body stream already read

看到报错位置竟然是post中的catch,可明明在Network中看到返回200了啊,稍作镇静之后就意识到应该就是返回时数据处理报错了,在resolve上面打印也没走这个逻辑,那就是上一层.then有问题。

// 将.then(res=> res.json()) 替换成下面
.then(res => {
   console.log(res.json());
   return res.json();
})

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

fetch返回的是数据流,最终是什么格式数据需要我们自己判断使用,arrayBuffer/blob/formData/json/text这些格式都有其使用场景,前端er不要将思维只限定在了json哦。

什么是Fetch?

可以看到时解析json报错了,嗯,因为我们就是没有返回任何数据,解析自然会报错!既然没有值Json解析报错,那解决办法自然就得加一层判断了,思路是先读取值然后判断是否为空.但是打印res时

// 将.then(res=> res.json()) 替换成下面
.then(res => {
   console.log(res);
   let arrayBuffer = res.json();
   let json = res.json();
   return res.json();
})

body: ReadableStream
         locked: true
         [[Prototype]]: ReadableStream
bodyUsed: true
headers: Headers
[[Prototype]]: Headers
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: ""http://localhost:5069/api/handle-data"
[[Prototype]]: Response

官方:FetchAPI提供了一个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);
      })
    })
  }
}

bodystreamalreadyread说明流只能读取一次,body是一个ReadableStream数据流,必须先读取流才能看到数据,那就看一下是否还能转换成其他格式的数据.查找MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#body

还原现场

简单封装fetch获取json或空数据

let checkStatus = res => {
  if (res.status >= 200 && res.status < 300) return res;
  else {
    let err = new Error(res.statusText);
    err.response = res;
    throw err;
  }
}
let parseJson = res => {
  let data = res.text();
  return data.then(r => {
    if (r.length === 0) return null;
    else return JSON.parse(r);
  })
}
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(checkStatus).then(parseJson).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(checkStatus).then(parseJson).then(res => {
        resolve(res);
      }).catch(e => {
        console.error("请求失败了,详细信息:" + JSON.stringify(e));
        reject(e);
      })
    })
  }
}

后端没有做统一的返回数据格式约定,直接使用.net中的ActionResult结构返回,.net封装的应该都是很好用的????

/// 
/// 模拟处理数据
/// 
/// 
[HttpPost("handle-data")]
public ActionResult HandleData(string mockData)
{
    // 业务逻辑
    // ......
    
    // 处理完成,直接告诉浏览器我Ok了, 状态200
    return Ok();
}

这样写同样报错

文章为作者独立观点，不代表股票交易接口观点