您好,登錄后才能下訂單哦!
這篇文章主要介紹了Fetch怎么使用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇Fetch怎么使用文章都會(huì)有所收獲,下面我們一起來看看吧。
fetch號(hào)稱是AJAX的替代品,是在ES6出現(xiàn)的,使用了ES6中的promise對(duì)象。Fetch是基于promise設(shè)計(jì)的。Fetch的代碼結(jié)構(gòu)比起ajax簡單多了,參數(shù)有點(diǎn)像jQuery ajax。但是,一定記住fetch不是ajax的進(jìn)一步封裝,而是原生js,沒有使用XMLHttpRequest對(duì)象。
ajax
使用步驟
1.創(chuàng)建XmlHttpRequest對(duì)象
2.調(diào)用open方法設(shè)置基本請(qǐng)求信息
3.設(shè)置發(fā)送的數(shù)據(jù),發(fā)送請(qǐng)求
4.注冊(cè)監(jiān)聽的回調(diào)函數(shù)
5.拿到返回值,對(duì)頁面進(jìn)行更新
//1.創(chuàng)建Ajax對(duì)象 if(window.XMLHttpRequest){ var oAjax=new XMLHttpRequest(); }else{ var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連接服務(wù)器(打開和服務(wù)器的連接) oAjax.open('GET', url, true); //3.發(fā)送 oAjax.send(); //4.接收 oAjax.onreadystatechange=function (){ if(oAjax.readyState==4){ if(oAjax.status==200){ //alert('成功了:'+oAjax.responseText); fnSucc(oAjax.responseText); }else{ //alert('失敗了'); if(fnFaild){ fnFaild(); } } } };
fetch
特點(diǎn)
1、第一個(gè)參數(shù)是URL:
2、第二個(gè)是可選參數(shù),可以控制不同配置的 init 對(duì)象
3、使用了 JavaScript Promises 來處理結(jié)果/回調(diào):
fetch(url).then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e))
更酷的一點(diǎn) 你可以通過Request構(gòu)造器函數(shù)創(chuàng)建一個(gè)新的請(qǐng)求對(duì)象,你還可以基于原有的對(duì)象創(chuàng)建一個(gè)新的對(duì)象。 新的請(qǐng)求和舊的并沒有什么不同,但你可以通過稍微調(diào)整配置對(duì)象,將其用于不同的場景。例如:
var req = new Request(URL, {method: 'GET', cache: 'reload'}); fetch(req).then(function(response) { return response.json(); }).then(function(json) { insertPhotos(json); });
上面的代碼中我們指明了請(qǐng)求使用的方法為GET,并且指定不緩存響應(yīng)的結(jié)果,你可以基于原有的GET請(qǐng)求創(chuàng)建一個(gè)POST請(qǐng)求,它們具有相同的請(qǐng)求源。代碼如下:
// 基于req對(duì)象創(chuàng)建新的postReq對(duì)象 var postReq = new Request(req, {method: 'POST'});
fetch和ajax 的主要區(qū)別
1、fetch()返回的promise將不會(huì)拒絕http的錯(cuò)誤狀態(tài),即使響應(yīng)是一個(gè)HTTP 404或者500
2、在默認(rèn)情況下 fetch不會(huì)接受或者發(fā)送cookies
關(guān)于“Fetch怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“Fetch怎么使用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。