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视频教程！
相关推荐：
php公益培训视频教程
AJAX在线手册
以上就是Ajax 和 fetch是什么？二者有什么区别？的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：Ajax 与 fetch是啥？二者有啥区别？