如何使用浏览器对网络请求编辑重发(Edit and Resent) 以及： fetch API 中 ReadablleStream 的打印方法

需求

上网用F12分析一个请求，调用的事服务端的一个数据接口。
想修改请求参数(请求头、请求体，请求URL和方法)，来获取我想要的数据。

两种方式。

• 火狐浏览器 F12自带的编辑重发功能。

• 对单个请求 copy as fetch 然后在控制台编辑参数后发送，获取响应。

火狐浏览器-编辑重发(Edit and Resent)

可以编辑地内容：请求方法，请求URL，请求头(包含cookie等信息)，请求体

fetch API

• 操作

如图：
然后到console粘贴，编辑代码即可(需要了解 fetch API)

fetch(url, options);

对以上代码进行修改：

fetch(url, options)
  .then(function(response) {
    return response.json();
  })
  .then(funciton(myJson) {
    console.log("响应数据(响应体)为：", myJson.body);
  });

• 详细解析

注意Object.prototype.toString.call(varName)可以返回该变量的类型(比typeof和instanceof更准确、好用)

以下代码中：
response是响应内容
response.body是响应体，但在F12 console中不可视(因为类型特殊，是 ReadableStream类型)。

而第二个then()中的入参myJson就是整个响应对象(的JSON格式)。
通过myJson再去拿myJson.body就是响应数据。

var url = "xxx";
var options = "xxx";

fetch(url, options)
  .then(funciton(response) {
    console.log(Object.prototype.toString.call(response));		// [object Response]
    console.log(Object.prototype.toString.call(response.body));	// [object ReadableStream]
    var myJson = response.json();
    console.log(Object.prototype.toString.call(myJson));		// [object Promise]
    return myJson;
  })
  .then(function(myJson) {
  	console.log(Object.prototype.toString.call(myJson));		// [object Object]
    console.log(myJson);	// 这个myJson就是服务器返回的响应，是一个JSON对象。
  });

注意看各个对象的类型。

response.json() 读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 JSON 格式的 Promise 对象。

• ReadableStream

刚开始我的写法是这样：

var url = "xxx;
var options = "xxx";

fetch(url, options)
  .then(funciton(response) {
    console.log(response);
    console.log(response.body);
  })

response可以打印出来，但是其中的response.body的类型是ReadableStream类型。
他也正好是响应体response body，可是直接打印是打印不出来的。

迂回。

直接将 Response response 转换格式。
然后其中的 response.body 自然可视。

可转换的格式有：

response.json()
response.text()
response.blob()
response.formData()

Links

fetch API https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
Response 类型 https://developer.mozilla.org/zh-CN/docs/Web/API/Response