本文给大家介绍Ajax 和 fetch是什么?Ajax 和 fetch之间的区别?,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
回顾XMLHttpRequest
传统的Ajax指的是XMLHttpRequest(XHR):var xhr = new XMLHttpRequest()
1.第一个要调用的方法是open(),open不会真的发送请求xhr.open("get",url,false)
//三个参数:请求方法,请求路径(相对于当前页面),是否异步请求
2.第二个要调用的方法是send(),send中发送请求xhr.send(null)
//参数:请求发送的主体数据
收到响应后,返回的数据会自动填充xhr对象responseText:作为响应主体被返回的文本
responseXML:XML DOM文档
status:响应的HTTP状态
statusText:HTTP状态说明
发送异步请求的时候,我们通常检测XHR对象的readyStatus取值:
0:未初始化,未调用open()方法
1:启动:调用open,未调用send
2:发送:调用send,但是未收到响应
3:接受:接受到部分数据
4:完成:已经接收到所以数据了
load事件
onload事件处理程序会接受到一个event对象,而起target属性就指向XHR对象实例,因而可以访问到XHR对象的所以方法和属性。
XMLHttpRequest没有关注分离(Separation of Concerns)的原则,配置调用非常混乱。
通常的写法如下:var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();
fetch登场
目前fetch的版本支持详情如下 https://caniuse.com/#search=fetch
fetch 语法
fetch的API是基于promise设计的fetch(url, init).then(function(response) { ... });
init可选的配置对象,包括所有对请求的设置:method:请求的方法,GET POST等
headers:请求的头信息,形式为 Headers 对象或 ByteString。 body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode:请求的模式,见下文
credential:默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。
omit: 从不发送cookies.
same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.
include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.
cache:请求的cache模式:default,no-store,no-cache,force-cache,only-if-cache
Response Metadata
上例子中,可以看到response被转换为json,如果我们需要过去response的其他元信息,我们可以通过以下的方式:fetch('./test.json').then(function(response) {
console.log(response.headers.get('Content-Type'));//application/json
console.log(response.headers.get('Date'));//Wed, 5 Sep 2018 09:33:44 GMT
console.log(response.status);//200
console.log(response.statusText);//ok
console.log(response.type);//basic
console.log(response.url)//http://localhost:63342/Apple/test/test.json
})
response.headers的方法:has(name) (boolean)-判断是否存在该头部信息
get(name) (string)-获取头部信息
getAll(name) (Array)-获取所有的头部信息
set(name, value)- 设置信息头的参数
append(name, value)- 添加header内容
delete(name)- 删除header的信息
forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息
Response Type
上例子中,可以看到console.log(response.type);//basic为basic。
当我们发送一个fetch请求的时候,response可能的返回值类型有"basic", "cors" or "opaque". 这些types是为了
指示资源的来源,并可用于告诉你应如何处理响应对象。如果请求和资源是同源的,那么请求是basic类型,那么我们毫无限制的查看响应中的任何内容
如果请求和资源是不同源的,并且返回一个CORs header的头部,那么请求是cors类型。basic和cors响应基本相同。但是cors会限制你查看header中“Cache-Control”,“Content-Language”,“Content-Type”,“Expires”,“Last-Modified”和`Pragma`的属性。
如果请求和资源是不同源的,并且不返回一个CORs header头部,那么请求是opaque类型。opaque类型的响应,我们不能过读取任何的返回值或者查看请求状态,这意味着我们无法只知道请求是成功还是失败。
你可以定fetch请求的模式,以便于解析一些模式,如下:
same-origin--同源请求才能成功,其他请求都会被拒绝
cors允许请求同源和其带有合适的CORs头部的其他源
cors-with-forced-preflight--发送真实的请求之前,需要一个预检验
no-cors--旨在向没有CORS header的其他源发出请求并产生不透明opaque的响应,但如上所述,目前在窗口全局范围内这是不可能的。
要定义模式,请在fetch请求中添加选项对象作为第二个参数,并在该对象中定义模式:fetch('./test.json',{mode:'cors'})
.then(function(response) {
console.log(response);
return response.json();
})
.then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
fetch基于Promise的调用链
Promise的一个重要特征是链式调用。 对于fetch,这允许你通过fetch请求共享逻辑fetch('./test.json')
.then((response)=>{
if(response.status>=200||response.status<300){
return Promise.resolve(response);
}
else {
return Promise.reject(new Error(response.statusText))
}
})
.then((response)=>response.json())
.then((data)=>{
console.log("Response successful json data",data);
})
.catch((e)=>{
console.log("Oops, error",e);
});
首先定义关于status的方法去检验请求是否成功,并且返回Promise.resolve(response)和Promise.reject(response)来处理下一步的逻辑。
这样做的好处在于能够使得代码更好的维护,可读和测试
Post 请求
对于一个web应用,需要通过POST请求和在请求体中添加一些参数去请求API并不罕见fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar'
})
.then(json)
.then(function (data) {
console.log('Response successful json data', data);
})
.catch(function (error) {
console.log('"Oops, error', error);
});
关于取消fetch()请求-abort/timeOut
目前没有方法去取消fetch请求,但是可以设置一个timeout选项https://github.com/whatwg/fetch/issues/20
首先实现一个abort功能,fetch返回的是一个promise对象,那么需要在abort后达到出入reject Promise的目的var abort_fn = null;
var abort_promise = new Promise((resolve,reject)=>{
abort_fn=()=>{
reject("abort promise")
}
})
可以通过调用abort_fn来触发abort_promise的reject
fetch返回的promise,称为fetch_promise,那么现在有两个promise:abort_promise和 fetch_promise
由于每个promise都有reject和resolve回调绑定到哪个promise上呢?
可以采样Promise.race方法
Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。const p = Promise.race([p1, p2, p3]);
//上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
基于Promise.race的特点,实现方案如下const p = Promise.race([
fetch_promise,
abort_promise
]);
p
.then(console.log)
.catch(console.error);
实现代码_fetch=(fetch_promise,timeout)=>{
var abort_fn = null;
var abort_promise = new Promise((resolve,reject)=>{
abort_fn=()=>{
reject("abort promise")
}
})
//在这里使用Promise.race
var p = Promise.race([
abort_promise,
fetch_promise
])
setTimeout(()=>{
abort_fn();
},timeout)
return p;
}
_fetch(fetch('./test.json'),5000)
.then((res)=>{
console.log(res)
},(err)=>{
console.log(err)
})
fetch PK Ajax
fetch规范和Ajax主要有两个方式的不同:当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。fetch(url, {credentials: 'include'})
omit: 从不发送cookies.
same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.
include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问AJAX视频教程!
相关推荐: