安基網 首頁 腳本 JavaScript 查看內容

舍棄ajax,使用fetch發起后端請求

2019-12-13 09:12| 投稿: xiaotiger |來自: 互聯網


免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!

摘要: 什么是fetchfetch是一種HTTP數據請求的方式,是XMLHttpRequest的一種替代方案。fetch不是ajax的進一步封裝,而是原生js。Fetch函數就是原生js,沒有使用XMLHttpRequest對象。Fetch相比Ajax有什么優勢?XMLHttpRequest 是一個設計粗糙的 API,不符合關注分離(Separation of Concerns)的原則,配置和調 ...

什么是fetch

fetch是一種HTTP數據請求的方式,是XMLHttpRequest的一種替代方案。fetch不是ajax的進一步封裝,而是原生js。Fetch函數就是原生js,沒有使用XMLHttpRequest對象。

Fetch相比Ajax有什么優勢?

XMLHttpRequest 是一個設計粗糙的 API,不符合關注分離(Separation of Concerns)的原則,配置和調用方式非;靵y,而且基于事件的異步模型寫起來也沒有現代的 Promise,generator/yield,async/await 友好!

Fetch 的出現就是為了解決 XHR 的問題,拿例子說明:

使用 XHR 發送一個 JSON 請求一般是這樣:

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
console.log(xhr.response);
};

xhr.onerror = function() {
console.log("Oops, error");
};

xhr.send();

使用 Fetch 后,頓時看起來好一點

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

使用 ES6 的 箭頭函數 后:·

//code from http://caibaojian.com/fetch-ajax.html
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

使用 async await 之后:

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

Fetch 優點主要有:·

  1. 語法簡潔,更加語義化
  2. 基于標準 Promise 實現,支持 async/await
  3. 同構方便,使用 isomorphic-fetch

語法

1、第一個參數是url
2、第二個是可選參數,可以控制不同配置的 init 對象

Promise fetch(url[, init]);

url

定義要獲取的資源。這可能是:

  • 一個 USVString 字符串,包含要獲取資源的 URL。一些瀏覽器會接受 blob: data: 作為 schemes.
  • 一個 Request 對象。

init 可選

一個配置項對象,包括所有對請求的設置?蛇x的參數有:

  • 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。為了在當前域名內自動發送 cookie , 必須提供這個選項, 從 Chrome 50 開始, 這個屬性也可以接受 FederatedCredential 實例或是一個 PasswordCredential 實例。
  • cache: 請求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
  • redirect: 可用的 redirect 模式: follow (自動重定向), error (如果產生重定向將自動終止并且拋出一個錯誤), 或者 manual (手動處理重定向). 在Chrome中,Chrome 47之前的默認值是 follow,從 Chrome 47開始是 manual。
  • referrer: 一個 USVString 可以是 no-referrer、client或一個 URL。默認是 client。
  • referrerPolicy: 指定了HTTP頭部referer字段的值?赡転橐韵轮抵唬 no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
  • integrity: 包括請求的 subresource integrity 值 ( 例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

eg:

fetch和ajax 的主要區別

1、fetch() 返回的 promise 將不會拒絕http的錯誤狀態,即響應是一個HTTP 404或者 500 時并不會 reject,只有網絡錯誤這些導致請求不能完成時,fetch 才會被 reject。
2、在默認情況下 fetch不會接受或者發送cookies

瀏覽器兼容性


目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微軟也考慮在未來的版本中支持Fetch。

fetch 在移動端使用是基本上是沒有問題的,但是如果您需要在IE8+的瀏覽器使用,則你需要引入 polyfill 庫。

polyfill 傳送門: https://github.com/taylorhakes/promise-polyfill

或者使用 fetch.js 兼容到 ie9+

fetch.js 傳送門 :https://github.com/github/fetch



小編推薦:欲學習電腦技術、系統維護、網絡管理、編程開發和安全攻防等高端IT技術,請 點擊這里 注冊賬號,公開課頻道價值萬元IT培訓教程免費學,讓您少走彎路、事半功倍,好工作升職加薪!

本文出自:https://www.toutiao.com/a6769394315979391501/

免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!


鮮花

握手

雷人

路過

雞蛋

相關閱讀

最新評論

 最新
返回頂部
洗衣店赚钱联系澳洁 排列五开奖号码走势图 排列五随机选号 快乐十分任三口诀 双码走十六打一数字 极速赛车手急速赛车 江西福彩快3和值走势图 大乐透中奖站点怎么查 贵州快3开奖视频 线上赌钱登录 北京11选5最新开奖走势图