JavaScript中怎么利用fetch實(shí)現(xiàn)異步請(qǐng)求-創(chuàng)新互聯(lián)

JavaScript中怎么利用fetch實(shí)現(xiàn)異步請(qǐng)求，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

為石鼓等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及石鼓網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都做網(wǎng)站、石鼓網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

Ajax請(qǐng)求

普通的Ajax請(qǐng)求，用XHR發(fā)送一個(gè)json請(qǐng)求一般是這樣的：

var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.responseType = 'json'; xhr.onload = function(){    console.log(xhr.response); }; xhr.onerror = function(){    console.log("error") } xhr.send();

使用fetch實(shí)現(xiàn)的方式：

fetch(url).then(function(response){    return response.json(); }).then(function(data){    console.log(data) }).catch(function(e){    console.log("error") })    

也可以用async/await的方式

try{    let response = await fetch(url);    let data = await response.json();    console.log(data); } catch(e){    console.log("error") }

用了await后，寫異步代碼感覺像同步代碼一樣爽。await后面可以跟Promise對(duì)象，表示等待Promise resolve()才會(huì)繼續(xù)下去執(zhí)行，如果Promise被reject()或拋出異常則會(huì)被外面的try...catch捕獲。

使用fetch

fetch的主要優(yōu)點(diǎn)是

• 語法簡(jiǎn)潔，更加語義化    基于標(biāo)準(zhǔn)的Promise實(shí)現(xiàn)，支持async/await    同構(gòu)方便

但是也有它的不足




• fetch請(qǐng)求默認(rèn)是不帶cookie的，需要設(shè)置fetch(url, {credentials: 'include'})    服務(wù)器返回400,500這樣的錯(cuò)誤碼時(shí)不會(huì)reject,只有網(wǎng)絡(luò)錯(cuò)誤這些導(dǎo)致請(qǐng)求不能完成時(shí)，fetch才會(huì)被reject.

fetch語法：




fetch(url, options).then(function(response) {  // handle HTTP response }, function(error) {  // handle network error })




具體參數(shù)案例：




//兼容包 require('babel-polyfill') require('es6-promise').polyfill() import 'whatwg-fetch' fetch(url, {  method: "POST",  body: JSON.stringify(data),  headers: {    "Content-Type": "application/json"  },  credentials: "same-origin" }).then(function(response) {  response.status     //=> number 100–599  response.statusText //=> String  response.headers    //=> Headers  response.url        //=> String  response.text().then(function(responseText) { ... }) }, function(error) {  error.message //=> String })




參數(shù)說明




url

定義要獲取的資源。這可能是：一個(gè) USVString 字符串，包含要獲取資源的 URL。一個(gè) Request 對(duì)象。

options（可選）




一個(gè)配置項(xiàng)對(duì)象，包括所有對(duì)請(qǐng)求的設(shè)置?？蛇x的參數(shù)有：




method: 請(qǐng)求使用的方法，如 GET、POST。




headers: 請(qǐng)求的頭信息，形式為 Headers 對(duì)象或 ByteString。




body: 請(qǐng)求的 body 信息：可能是一個(gè) Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對(duì)象。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。




mode: 請(qǐng)求的模式，如 cors、 no-cors 或者 same-origin。




credentials: 請(qǐng)求的 credentials，如 omit、same-origin 或者 include。




cache: 請(qǐng)求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。




response




一個(gè) Promise，resolve 時(shí)回傳 Response 對(duì)象：




屬性：




status (number) - HTTP請(qǐng)求結(jié)果參數(shù)，在100–599 范圍




statusText (String) - 服務(wù)器返回的狀態(tài)報(bào)告




ok (boolean) - 如果返回200表示請(qǐng)求成功則為true




headers (Headers) - 返回頭部信息，下面詳細(xì)介紹




url (String) - 請(qǐng)求的地址




方法：




text() - 以string的形式生成請(qǐng)求text




json() - 生成JSON.parse(responseText)的結(jié)果




blob() - 生成一個(gè)Blob




arrayBuffer() - 生成一個(gè)ArrayBuffer




formData() - 生成格式化的數(shù)據(jù)，可用于其他的請(qǐng)求




其他方法：




clone()




Response.error()




Response.redirect()




response.headers




has(name) (boolean) - 判斷是否存在該信息頭




get(name) (String) - 獲取信息頭的數(shù)據(jù)




getAll(name) (Array) - 獲取所有頭部數(shù)據(jù)




set(name, value) - 設(shè)置信息頭的參數(shù)




append(name, value) - 添加header的內(nèi)容




delete(name) - 刪除header的信息




forEach(function(value, name){ ... }, [thisContext]) - 循環(huán)讀取header的信息




使用實(shí)例






//獲取css里ul的id屬性 let uldom = document.getElementById("students"); //單獨(dú)創(chuàng)建一個(gè)json文件，獲取地址 let url = "data.json"; function main(){    fetch(url).then(respone=>{        return respone.json();    }).then(students=>{        let html = ``;        for(let i=0, l=students.length; i<l; i++){            let name = students[i].name;            let age = students[i].age;            html += `                <li>姓名：${name}，年齡：${age}</li>                `        }        uldom.innerHTML = html;    }); } main();




結(jié)合await最終代碼




let uldom　=　document.getElementById("students"); let url　=　"data.json"; async function main(){    let respone = await fetch(url);    let students = await respone.json(); let html　=``; for(let i=0, l=students.length; i<l; i++){    let name　=　students[i].name;    let age　=　students[i].age;    html　+= `    <li>姓名：${name}，年齡：${age}</li> ` } uldom.innerHTML　=　html; } main();




data.json文件內(nèi)容如下：




[    {"name":"張三","age":"3"},    {"name":"李萬","age":"1"},    {"name":"王二","age":"4"},    {"name":"二狗","age":"3"},    {"name":"狗蛋","age":"5"},    {"name":"牛娃","age":"7"} ]




運(yùn)行后結(jié)果是：




姓名：張三，年齡：3 姓名：李萬，年齡：1 姓名：王二，年齡：4 姓名：二狗，年齡：3 姓名：狗蛋，年齡：5 姓名：牛娃，年齡：7

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

本文名稱：JavaScript中怎么利用fetch實(shí)現(xiàn)異步請(qǐng)求-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://muchs.cn/article24/pgice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、電子商務(wù)、企業(yè)建站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站排名、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)