JavaScript中如何利用fetch實現(xiàn)異步請求

這篇文章主要講解了“JavaScript中如何利用fetch實現(xiàn)異步請求”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript中如何利用fetch實現(xiàn)異步請求”吧！

三沙網站建設公司創(chuàng)新互聯(lián),三沙網站設計制作，有大型網站制作公司豐富經驗。已為三沙近千家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站建設要多少錢，請找那個售后服務好的三沙做網站的公司定做！

Ajax請求

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

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實現(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對象，表示等待Promise resolve()才會繼續(xù)下去執(zhí)行，如果Promise被reject()或拋出異常則會被外面的try...catch捕獲。

使用fetch

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

  • 語法簡潔，更加語義化    基于標準的Promise實現(xiàn)，支持async/await    同構方便

    • 但是也有它的不足

    • fetch請求默認是不帶cookie的，需要設置fetch(url, {credentials: 'include'})    服務器返回400,500這樣的錯誤碼時不會reject,只有網絡錯誤這些導致請求不能完成時，fetch才會被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

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

      options（可選）

      一個配置項對象，包括所有對請求的設置。可選的參數(shù)有：

      method: 請求使用的方法，如 GET、POST。

      headers: 請求的頭信息，形式為 Headers 對象或 ByteString。

      body: 請求的 body 信息：可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。

      mode: 請求的模式，如 cors、 no-cors 或者 same-origin。

      credentials: 請求的 credentials，如 omit、same-origin 或者 include。

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

      response

      一個 Promise，resolve 時回傳 Response 對象：

      屬性：

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

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

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

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

      url (String) - 請求的地址

      方法：

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

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

      blob() - 生成一個Blob

      arrayBuffer() - 生成一個ArrayBuffer

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

      其他方法：

      clone()

      Response.error()

      Response.redirect()

      response.headers

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

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

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

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

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

      delete(name) - 刪除header的信息

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

      使用實例

      //獲取css里ul的id屬性 let uldom = document.getElementById("students"); //單獨創(chuàng)建一個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();

      結合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文件內容如下：

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

      運行后結果是：

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

感謝各位的閱讀，以上就是“JavaScript中如何利用fetch實現(xiàn)異步請求”的內容了，經過本文的學習后，相信大家對JavaScript中如何利用fetch實現(xiàn)異步請求這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

文章名稱：JavaScript中如何利用fetch實現(xiàn)異步請求
網站URL：http://muchs.cn/article20/iheojo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、品牌網站建設、域名注冊、虛擬主機、網站改版、定制開發(fā)

廣告

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

成都網頁設計公司