本文要跟大家介紹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的版本支援詳情如下https://caniuse.com/#search=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被轉換為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, 值)- 設定訊息頭的參數
## append(name, 值)- 新增header內容
delete(name)- 刪除header的資訊
#forEach(function(value, name){ ... }, [thisContext]) - 循環讀取header的資訊
為basic。 當我們發送一個fetch請求的時候，response可能的回傳值類型有"basic", "cors" or "opaque". 這些
是為了指示資源的來源，並可用來告訴你應如何處理回應對象。
如果请求和资源是不同源的，并且返回一个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");
});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)来处理下一步的逻辑。
这样做的好处在于能够使得代码更好的维护，可读和测试
对于一个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请求，但是可以设置一个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规范和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视频教程！
相关推荐：
以上是Ajax 和 fetch是什麼？二者有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
