本文给大家介绍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 ajaxfetch规范和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视频教程！
相关推荐：
php公益培训视频教程
ajax在线手册
以上就是ajax 和 fetch是什么？二者有什么区别？的详细内容。