Fetch 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest实现的,Fetch提供了一个更好的替代方法
Fetch api 是基于 Promise 设计,使用了Promises 来处理结果/回调。旧浏览器不支持 Promise,需要使用 polyfill es6-promise 。
fetch("http://192.168.43.169:8099/someInfo",{
method: 'post',
})
.then(res=>{
console.log(response) // 包含响应结果的promise,只是一个 HTTP 响应,而不是真的JSON
return response.json();
})
.then(res=>{
console.log(res) //js格式的json对象
})
async await实现更方便
const fetchRequest = async () => {
let response = await fetch("http://192.168.43.169:8099/teacher/resume", {
method: 'post',
})
let data = await response.json()
console.log(data); //js格式的json对象
}
fetchRequest()
属性:
方法:处理包含返回结果的promise对象的数据
例如 response.json()
处理包含json结果的promise对象
创建request对象
request = new Request()
属性:
let request = new Request("http://192.168.43.169:8099/teacher/resume",{
method: 'post',
headers: new Headers({
'Content-Type': 'text/plain'
})
})
fetch(request)
.then(res=>{
console.log(res);
return res.json();
})
.then(res=>{
console.log(res)
})
创建header对象
let headers = new Headers();
headers方法:
设置header通过属性或者方法都可以
属性形式:传一个多维数组或者对象字面量
Header = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
方法形式:
var Header = new Headers();
Header.append("Content-Type", "text/plain");
Header.append("Content-Length", content.length.toString());
Header.append("X-Custom-Header", "ProcessThisImmediately");
传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。
fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。
当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。
Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。
fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送
fetch:一个获取资源的接口,类似于ajax,是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容,提供了对 Request 和 Response 对象的通用定义
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源
最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现
在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题
对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?在本文中,我将列出9个最常见的Fetch API请求
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!