????优质资源分享????
| ???? Python实战微信订餐小程序 ???? | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| ????Python量化交易实战???? | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
一直以来在简单的场景中经常使用fetch代替第三方请求库,fetch是JavaScript的原生函数,简单、高效、快速、稳定、可定制等等诸多优点。一直也是用着很是舒服，直到有一天它竟然报错了。
什么是Fetch?
官方: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);
})
})
}
}
这样的封装貌似也没什么问题????。
后端没有做统一的返回数据格式约定,直接使用.net中的ActionResult结构返回,.net封装的应该都是很好用的????
///
/// 模拟处理数据
///
///
[HttpPost("handle-data")]
public ActionResult HandleData(string mockData)
{
// 业务逻辑
// ......
// 处理完成,直接告诉浏览器我Ok了, 状态200
return Ok();
}
此时前端在处理完成后,控制台面板中Network中也显示post成功返回200了,但是在Console中却有一条红色报错信息
请求失败了,详细信息:{}
看到报错位置竟然是post中的catch,可明明在Network中看到返回200了啊,稍作镇静之后就意识到应该就是返回时数据处理报错了,在resolve上面打印也没走这个逻辑,那就是上一层.then有问题。
// 将.then(res=> res.json()) 替换成下面
.then(res => {
console.log(res.json());
return res.json();
})
这样写同样报错
可以看到时解析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
而且还有一条报错信息
Uncaught (in promise) TypeError: Failed to execute "json" on "Response": body stream already read
bodystreamalreadyread说明流只能读取一次,body是一个ReadableStream数据流,必须先读取流才能看到数据,那就看一下是否还能转换成其他格式的数据.查找MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#body
Body类定义了以下方法以获取body内容。这些方法都会返回一个被解析后的Promise对象和数据。Request.arrayBuffer/Response.arrayBufferRequest.blob/Response.blobRequest.formData/Response.formDataRequest.json/Response.jsonRequest.text/Response.text
可知有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);
})
})
验证结果正确,一切又回到了正常。
简单封装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);
})
})
}
}
嗯,前端能处理的问题就不麻烦后端了????
fetch返回的是数据流,最终是什么格式数据需要我们自己判断使用,arrayBuffer/blob/formData/json/text这些格式都有其使用场景,前端er不要将思维只限定在了json哦。
文章为作者独立观点，不代表观点
相关文章
股民评论