一加Ace2 Pro官宣：普及16G內(nèi)存 引領(lǐng)24G
一加官方今天繼續(xù)為本月發(fā)布的新機(jī)一加Ace2 Pro帶來(lái)預(yù)熱，公布了內(nèi)存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領(lǐng)，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請(qǐng)期待。”同時(shí)
因?yàn)锳xios的易于使用，所以有些開(kāi)發(fā)人員比起內(nèi)置的API，更喜歡Axios。
但許多人高估了這個(gè)庫(kù)。
fetch() API不但完全能夠重現(xiàn)Axios的關(guān)鍵功能，而且還有隨時(shí)可用于所有現(xiàn)代瀏覽器中的獨(dú)特優(yōu)勢(shì)。
在本文中，我將按照基本語(yǔ)法、向后兼容性、響應(yīng)超時(shí)、自動(dòng)JSON數(shù)據(jù)轉(zhuǎn)換、HTTP攔截器、下載進(jìn)度、同時(shí)請(qǐng)求這些方面來(lái)比較fetch()和Axios，看看它們?nèi)绾螆?zhí)行任務(wù)。
希望在本文結(jié)束時(shí)，大家對(duì)這兩個(gè)API有了更深入的了解。
在我們深入研究Axios更高級(jí)地功能之前，先與fetch()進(jìn)行基本語(yǔ)法的比較。
下面是Axios如何將帶有自定義請(qǐng)求頭的[POST]請(qǐng)求發(fā)送到指定URL的代碼：
// axiosconst url = 'https://jsonplaceholder.typicode.com/posts'const data = { a: 10, b: 20,};axios .post(url, data, { headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", }, }) .then(({data}) => { console.log(data);});與fetch()版本進(jìn)行比較：
// fetch()const url = "https://jsonplaceholder.typicode.com/todos";const options = { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", }, body: JSON.stringify({ a: 10, b: 20, }),};fetch(url, options) .then((response) => response.json()) .then((data) => { console.log(data); });注意：
Axios的主要賣點(diǎn)之一是其廣泛的瀏覽器支持。
即使是像IE11這樣的舊瀏覽器也可以毫無(wú)問(wèn)題地運(yùn)行Axios。這是因?yàn)樗澈笫褂昧薠MLHttpRequest。
而fetch()僅支持Chrome 42+，F(xiàn)irefox 39+，Edge 14+和Safari 10.3+。
如果你使用Axios的唯一原因是向后兼容性，那么實(shí)際上并不需要HTTP庫(kù)。而且，你可以將fetch()與polyfill一起使用，在不支持fetch()的web瀏覽器上實(shí)現(xiàn)類似的功能。
要使用fetch() polyfill，可以通過(guò)npm命令進(jìn)行安裝，如下所示：
npm install whatwg-fetch --save然后，提出如下請(qǐng)求：
import 'whatwg-fetch'window.fetch(...)謹(jǐn)記，在有些舊瀏覽器中，可能還需要promise polyfill。
在Axios中設(shè)置超時(shí)的簡(jiǎn)單性，是一些開(kāi)發(fā)人員比f(wàn)etch()更喜歡Axios的原因之一。
在Axios中，你可以使用配置對(duì)象的timeout屬性來(lái)設(shè)置請(qǐng)求中止之前的毫秒數(shù)。
例如：
axios({ method: 'post', url: '/login', timeout: 4000, // 4 seconds timeout data: { firstName: 'David', lastName: 'Pollock' }}).then(response => {/* handle the response */}).catch(error => console.error('timeout exceeded'))Fetch()通過(guò)AbortController接口提供類似的功能。
不過(guò)，它的代碼不如Axios版本簡(jiǎn)單：
const controller = new AbortController();const options = { method: 'POST', signal: controller.signal, body: JSON.stringify({ firstName: 'David', lastName: 'Pollock' })}; const promise = fetch('/login', options);const timeoutId = setTimeout(() => controller.abort(), 4000);promise .then(response => {/* handle the response */}) .catch(error => console.error('timeout exceeded'));代碼使用AbortController.abort()構(gòu)造函數(shù)創(chuàng)建AbortController對(duì)象，它允許我們稍后中止請(qǐng)求。
Signal是AbortController的只讀屬性，提供了一種與請(qǐng)求通信或中止請(qǐng)求的方法。
如果服務(wù)器在4秒內(nèi)沒(méi)有響應(yīng)，則調(diào)用controller.abort()，終止操作。
如前所述，Axios在發(fā)送請(qǐng)求時(shí)會(huì)自動(dòng)字符串化數(shù)據(jù)（當(dāng)然你也可以覆蓋默認(rèn)行為并定義不同的轉(zhuǎn)換機(jī)制）。
但是，當(dāng)使用fetch()時(shí)，你必須手動(dòng)執(zhí)行此操作。
比較：
// axiosaxios.get('https://api.github.com/orgs/axios') .then(response => { console.log(response.data); }, error => { console.log(error); });// fetch()fetch('https://api.github.com/orgs/axios') .then(response => response.json()) // one extra step .then(data => { console.log(data) }) .catch(error => console.error(error));自動(dòng)轉(zhuǎn)換數(shù)據(jù)是一個(gè)不錯(cuò)的功能，但同樣，這不是你不能用fetch()做的事情。
Axios的主要功能之一是它能夠攔截HTTP請(qǐng)求。
當(dāng)你需要檢查或更改從應(yīng)用程序到服務(wù)器的HTTP請(qǐng)求時(shí)，使用HTTP攔截器非常方便，從服務(wù)器到應(yīng)用程序亦是如此（例如，日志記錄、身份驗(yàn)證或重試失敗的HTTP請(qǐng)求）。
使用攔截器就不必為每個(gè)HTTP請(qǐng)求編寫(xiě)單獨(dú)的代碼。
在你想要為處理請(qǐng)求和響應(yīng)設(shè)置全局策略時(shí)，HTTP攔截器非常有用。
以下是在Axios中聲明請(qǐng)求攔截器的方法：
axios.interceptors.request.use(config => { // log a message before any HTTP request is sent console.log('Request was sent'); return config;});// sent a GET requestaxios.get('https://api.github.com/users/sideshowbarker') .then(response => { console.log(response.data); });上面的代碼中，axios.interceptors.request.use（）方法用于定義發(fā)送HTTP請(qǐng)求之前要運(yùn)行的代碼。而axios.interceptors.response.use（）用于攔截來(lái)自服務(wù)器的響應(yīng)。
假設(shè)存在網(wǎng)絡(luò)錯(cuò)誤，那么通過(guò)響應(yīng)偵聽(tīng)器，可以重試相同的請(qǐng)求。
默認(rèn)情況下，fetch()不提供攔截請(qǐng)求的方法，但它的解決方法也并不復(fù)雜。
那就是覆蓋全局fetch()方法并定義自己的攔截器，如下所示：
fetch = (originalFetch => { return (...arguments) => { const result = originalFetch.apply(this, arguments); return result.then(console.log('Request was sent')); };})(fetch);fetch('https://api.github.com/orgs/axios') .then(response => response.json()) .then(data => { console.log(data) });進(jìn)度條在加載時(shí)非常有用，尤其是對(duì)于互聯(lián)網(wǎng)速度較慢的用戶。
以前，JavaScript程序員使用XMLHttpRequest.onprogress回調(diào)處理程序來(lái)實(shí)現(xiàn)進(jìn)度指示器。
Fetch API沒(méi)有onprogress處理程序。事實(shí)上，它通過(guò)響應(yīng)對(duì)象的body屬性來(lái)提供ReadableStream的實(shí)例。
以下示例表明如何使用ReadableStream在圖像下載期間為用戶提供即時(shí)反饋：
index.html<!-- Wherever you html is --> <div id="progress" src="">progress</div> <img id="img">script.js'use strict'const element = document.getElementById('progress');fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg') .then(response => { if (!response.ok) { throw Error(response.status+' '+response.statusText) } // ensure ReadableStream is supported if (!response.body) { throw Error('ReadableStream not yet supported in this browser.') } // store the size of the entity-body, in bytes const contentLength = response.headers.get('content-length'); // ensure contentLength is available if (!contentLength) { throw Error('Content-Length response header unavailable'); } // parse the integer into a base-10 number const total = parseInt(contentLength, 10); let loaded = 0; return new Response( // create and return a readable stream new ReadableStream({ start(controller) { const reader = response.body.getReader(); read(); function read() { reader.read().then(({done, value}) => { if (done) { controller.close(); return; } loaded += value.byteLength; progress({loaded, total}) controller.enqueue(value); read(); }).catch(error => { console.error(error); controller.error(error) }) } } }) ); }) .then(response => // construct a blob from the data response.blob() ) .then(data => { // insert the downloaded image into the page document.getElementById('img').src = URL.createObjectURL(data); }) .catch(error => { console.error(error); })function progress({loaded, total}) { element.innerHTML = Math.round(loaded/total*100)+'%';}在Axios中實(shí)現(xiàn)進(jìn)度指示器更簡(jiǎn)單，尤其是在使用Axios進(jìn)度條模塊時(shí)。
首先，包含以下樣式和腳本：
// the head of your HTML <link rel="stylesheet" type="text/css" />// the body of your HTML <img id="img" /> <button onclick="downloadFile()">Get Resource</button> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script>// add the following to customize the style<style> #nprogress .bar { background: red !important; } #nprogress .peg { box-shadow: 0 0 10px red, 0 0 5px red !important; } #nprogress .spinner-icon { border-top-color: red !important; border-left-color: red !important; }</style>然后像這樣實(shí)現(xiàn)進(jìn)度條：
<script type="text/javascript"> loadProgressBar(); function downloadFile() { getRequest( "https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg" ); } function getRequest(url) { axios .get(url, { responseType: "blob" }) .then(function (response) { const reader = new window.FileReader(); reader.readAsDataURL(response.data); reader.onload = () => { document.getElementById("img").setAttribute("src", reader.result); }; }) .catch(function (error) { console.log(error); }); } </script>代碼使用FileReaderAPI異步讀取下載的圖像。
readAsDataURL方法以Base64編碼字符串的形式返回圖像的數(shù)據(jù)，然后將其插入到img標(biāo)記的src屬性中以顯示圖像。
為了同時(shí)發(fā)出多個(gè)請(qǐng)求，Axios提供axios.all()方法。
只需將請(qǐng)求數(shù)組傳遞給此方法，然后使用axios.spread()將響應(yīng)數(shù)組的屬性分配給單獨(dú)的變量：
axios.all([ axios.get('https://api.github.com/users/iliakan'), axios.get('https://api.github.com/users/taylorotwell')]).then(axios.spread((obj1, obj2) => { // Both requests are now complete console.log(obj1.data.login + ' has ' + obj1.data.public_repos + ' public repos on GitHub'); console.log(obj2.data.login + ' has ' + obj2.data.public_repos + ' public repos on GitHub');}));也可以使用內(nèi)置的Promise.all()方法獲得相同的結(jié)果。
將所有fetch請(qǐng)求作為數(shù)組傳遞給Promise.all()。接著使用async函數(shù)處理響應(yīng)，如下所示：
Promise.all([ fetch('https://api.github.com/users/iliakan'), fetch('https://api.github.com/users/taylorotwell')]).then(async([res1, res2]) => { const a = await res1.json(); const b = await res2.json(); console.log(a.login + ' has ' + a.public_repos + ' public repos on GitHub'); console.log(b.login + ' has ' + b.public_repos + ' public repos on GitHub');}).catch(error => { console.log(error);});Axios在緊湊的軟件包中提供了一個(gè)易于使用的API，可滿足大多數(shù)HTTP通信需求。
而web瀏覽器提供的fetch()方法則能完全重現(xiàn)Axios庫(kù)的主要功能。
所以，是否加載客戶端HTTP API取決于你是否習(xí)慣使用內(nèi)置API。
編程快樂(lè)！
本文鏈接：http://www.www897cc.com/showinfo-26-77835-0.htmlAxios vs. fetch()：哪個(gè)最適合 HTTP 請(qǐng)求？
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)