ajax
1.是XMLHTTPRequest的一個實例ajax
2.只有當狀態爲200或者304時纔會請求成功json
3.格式零散，容易出現回調地獄的問題跨域
fetch
1.fetch是基於promise實現的，也能夠結合async/awaitpromise
2.fetch請求默認是不帶cookie的，須要設置fetch（URL，{credentials:’include’})。 瀏覽器
Credentials有三種參數：same-origin，include，*服務器
3.服務器返回400 500 狀態碼時並不會reject，只有網絡出錯致使請求不能完成時，fetch纔會被rejectcookie
4.全部版本的 IE 均不支持原生 Fetch網絡
5.fetch是widow的一個方法app
簡單例子：框架
fetch(url).then(function (response) { return response.json() //執行成功第一步 }).then(function (returnedValue) { //執行成功的第二步 }).catch(function (err) { //中途的任何地方出錯 都會在這裏被捕獲到 })
注意：
fetch 的第二參數中
一、默認的請求爲get請求 能夠使用method:post 來進行配置
二、第一步中的 response有許多方法 json() text() formData()
三、Fetch跨域的時候默認不會帶cookie 須要手動的指定 credentials:'include'
使用fetch以後獲得的是一個promise對象 在這個promise對象裏邊再定義執行成功的時候是什麼。下面是正確的fetch的使用方法
var promise=fetch('http://localhost:3000/news', { method: 'get' }).then(function(response) { return response.json() }).catch(function(err) { // Error :( }); promise.then(function (data) { console.log(data) }).catch(function (error) { console.log(error) })
//練習一, 使用get 和post方式獲取數據 //將事件放在組件外部 function getRequest(url) { var opts = { method:"GET" } fetch(url,opts) .then((response) => { return response.text(); //返回一個帶有文本的對象 }) .then((responseText) => { alert(responseText) }) .catch((error) => { alert(error) }) }
//Post方法, 須要請求體body /* * FromData * 主要用於序列化表單以及建立與表單格式相同的數據 * * var data = new FormData(); * data.append("name","hello"); * append方法接收兩個參數,鍵和值(key,value),分別表示表單字段的名字 和 字段的值,可添加多個 * * 在jQuery中,"key1=value1&key2=valu2" 做爲參數傳入對象框架,會自動分裝成FormData形式 * 在Fetch 中,進行post進行post請求,須要自動建立FormData對象傳給body * * */ function postRequest(url) { //將"key1=value1&key2=valu2" 形式封裝整FromData形式 let formData = new FormData(); formData.append("username","hello"); formData.append("password","1111aaaa"); var opts = { method:"POST", //請求方法 body:formData, //請求體 headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, } fetch(url,opts) .then((response) => { //你能夠在這個時候將Promise對象轉換成json對象:response.json() //轉換成json對象後return，給下一步的.then處理 return response.text }) .then((responseText) => { alert(responseText) }) .catch((error) => { alert(error) }) }
fetch和ajax 的主要區別
一、fetch()返回的promise將不會拒絕http的錯誤狀態，即便響應是一個HTTP 404或者500
二、在默認狀況下 fetch不會接受或者發送cookies
使用fetch開發項目的時候的問題
一、全部的IE瀏覽器都不會支持 fetch()方法
二、服務器端返回 狀態碼 400 500的時候 不會reject