造車兩年股價跌六成，小米的估值邏輯變了嗎？
如果從小米官宣造車后的首個交易日起持有小米集團(tuán)的股票，那么截至2023年上半年最后一個交易日，投資者將浮虧59.16%，同區(qū)間的恒生科技指數(shù)跌幅為52.78%
當(dāng)涉及前端網(wǎng)絡(luò)請求時，有許多工具/技術(shù)可供選擇,包括 Fetch、Axios、Ajax 和 XHR 等。這些技術(shù)在發(fā)送和處理HTTP請求方面提供了不同的功能和方法。本文將深入探討這些技術(shù)的特點(diǎn)、優(yōu)勢和用法，幫你更好地理解并選擇最適合項(xiàng)目需求的技術(shù)。
Fetch、Axios、Ajax 和XHR都是前端用于發(fā)送HTTP請求的工具或技術(shù)：
下面就來看看這些技術(shù)都是怎么用的，以及都有什么特點(diǎn)！
XMLHttpRequest 是一個內(nèi)置的 JavaScript 對象，XMLHttpRequest（XHR）對象用于與服務(wù)器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下，更新頁面的局部內(nèi)容。
XMLHttpRequest 在 AJAX 編程中被大量使用。盡管名稱包含XML，XMLHttpRequest 也可以用于獲取任何類型的數(shù)據(jù)，而不僅僅是 XML。它甚至支持 HTTP 以外的協(xié)議（包括 file:// 和 FTP）。
XMLHttpRequest 存在一些缺點(diǎn)：
使用 XMLHttpRequest 發(fā)送請求的步驟如下：
let xhr = new XMLHttpRequest();xhr.open('GET', 'https://example.com/api/data', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { // 請求成功，處理響應(yīng) console.log(xhr.responseText); } else { // 請求失敗 console.error('請求失敗'); } }};xhr.send();完整代碼如下：
var xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { // 請求成功，處理響應(yīng) console.log(xhr.responseText); } else { // 請求失敗 console.error('請求失敗'); } }};xhr.send();這里創(chuàng)建了一個XMLHttpRequest對象，并使用open()方法設(shè)置了一個GET請求類型和URL。然后，通過監(jiān)聽onreadystatechange事件來判斷請求的狀態(tài)并處理響應(yīng)。當(dāng)readyState為4時，表示請求已完成，此時可以通過status屬性判斷請求是否成功（200表示成功）。如果成功，可以通過responseText屬性獲取服務(wù)器返回的數(shù)據(jù)進(jìn)行處理。如果失敗，將到控制臺輸出錯誤信息。
XMLHttpRequest 的 open() 方法用于初始化一個請求。open() 方法接受三個必填參數(shù)和一個可選參數(shù)，它們是：
xhr.open("GET", "https://example.com/api/data", true);xhr.open("GET", "https://example.com/api/data", true);javascriptCopy Codexhr.open("GET", "https://example.com/api/data", true);xhr.open("GET", "https://example.com/api/data", true, "username");xhr.open("GET", "https://example.com/api/data", true, "username", "password");綜合起來，open() 方法的完整語法如下：
xhr.open(method, url, async, username, password);可以使用 setRequestHeader() 方法設(shè)置 XMLHttpRequest 的請求頭。這個方法接受兩個參數(shù)：頭字段的名稱和值。
xhr.setRequestHeader("Content-Type", "application/json");xhr.setRequestHeader("Authorization", "Bearer token123");這里使用 setRequestHeader() 方法設(shè)置了兩個請求頭：Content-Type 和 Authorization。第一個參數(shù)是頭字段的名稱，第二個參數(shù)是頭字段的值。
可以使用 getResponseHeader() 方法或者 getAllResponseHeaders() 方法來獲取 XMLHttpRequest 的響應(yīng)頭。
const contentType = xhr.getResponseHeader("Content-Type");這里使用 getResponseHeader() 方法獲取了名為 Content-Type的響應(yīng)頭字段的值。
const headers = xhr.getAllResponseHeaders();這里使用 getAllResponseHeaders() 方法獲取了所有響應(yīng)頭信息，并將其存儲在名為 headers 的變量中。
這里返回的 headers 是一個包含所有響應(yīng)頭信息的字符串。該字符串中每一行表示一個響應(yīng)頭字段，具有以下形式：
HeaderName: HeaderValue例如，如果響應(yīng)頭中包含 Content-Type 和 Authorization 字段，那么返回的 headers 字符串可能如下所示：
Content-Type: application/jsonAuthorization: Bearer token123可以使用適當(dāng)?shù)姆椒ǎㄈ缱址馕觯⑦@個字符串進(jìn)行進(jìn)一步處理，以獲取特定的響應(yīng)頭字段的名稱和值。
注意，要在調(diào)用 open() 方法之后、發(fā)送請求之前使用 setRequestHeader() 方法來設(shè)置請求頭，以確保設(shè)置能夠生效。同樣，要在接收到響應(yīng)之后才能使用 getResponseHeader() 或 getAllResponseHeaders() 來獲取響應(yīng)頭信息。
上面示例中的 readyState 是 XMLHttpRequest 對象的一個屬性，用于表示請求的狀態(tài)。該屬性有以下五種可能的取值：
通常情況下，我們主要關(guān)注 readyState 為 4 的狀態(tài)，即請求完成狀態(tài)。在這個狀態(tài)下，我們可以通過檢查 status 屬性來獲取請求的結(jié)果（比如響應(yīng)狀態(tài)碼），并通過 responseText 或 responseXML 屬性來獲取服務(wù)器返回的數(shù)據(jù)。
注意，readyState 屬性是只讀的，我們不能直接修改它的值。它會在請求過程中自動更新，我們可以通過監(jiān)聽 readystatechange 事件來進(jìn)行相應(yīng)的處理。
status 是 XMLHttpRequest 對象的一個屬性，用于表示 HTTP 狀態(tài)碼。 HTTP 狀態(tài)碼是服務(wù)器對請求處理的結(jié)果進(jìn)行響應(yīng)的標(biāo)準(zhǔn)化數(shù)字代碼。常見的一些 HTTP 狀態(tài)碼包括：
在使用 XMLHttpRequest 發(fā)送請求后，可以通過檢查 status 屬性來獲取服務(wù)器對請求的響應(yīng)狀態(tài)碼，并根據(jù)不同的狀態(tài)碼進(jìn)行相應(yīng)的處理。
XMLHttpRequest (XHR) 對象具有以下常用的事件屬性：
xhr.onreadystatechange = () => { if(xhr.readyState === 4) { // 請求已完成 if(xhr.status === 200) { // 請求成功 } else { // 請求失敗 } } else { // 請求進(jìn)行中 }};xhr.onload = () => { // 獲取和處理響應(yīng)數(shù)據(jù) const responseData = JSON.parse(xhr.responseText); // 其他操作...};xhr.onerror = () => { // 處理錯誤邏輯};xhr.onprogress = (event) => { // 處理進(jìn)度邏輯};xhr.ontimeout = () => { // 處理超時邏輯};responseType 是 XMLHttpRequest 對象的屬性，用于指定響應(yīng)的數(shù)據(jù)類型。它決定了如何解析從服務(wù)器返回的響應(yīng)數(shù)據(jù)。 常見的 responseType 值包括：
xhr.responseType = "";xhr.responseType = "text";xhr.responseType = "json";xhr.responseType = "document";xhr.responseType = "arraybuffer";xhr.responseType = "blob";通過設(shè)置不同的 responseType 值，可以根據(jù)需要獲取不同類型的響應(yīng)數(shù)據(jù)。注意，在設(shè)置 responseType 之前，最好在調(diào)用 open 方法之后、發(fā)送請求之前設(shè)置，以確保設(shè)置生效。
AJAX（Asynchronous JavaScript and XML，異步 JavaScript 和 XML）是一種使用現(xiàn)有的網(wǎng)頁技術(shù)來創(chuàng)建異步請求和更新頁面內(nèi)容的方法。Ajax 本身不是一種技術(shù)，而是一種將一些現(xiàn)有技術(shù)結(jié)合起來使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 對象。
當(dāng)使用結(jié)合了這些技術(shù)的 Ajax 模型以后，網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個頁面。這使得程序能夠更快地回應(yīng)用戶的操作。Ajax 最吸引人的特性是它的“異步”性質(zhì)，這意味著它可以與服務(wù)器通信、交換數(shù)據(jù)并更新頁面，而無需刷新頁面。
Ajax 是一種使用瀏覽器提供的 XMLHttpRequest 對象實(shí)現(xiàn)的技術(shù)，用于在不刷新整個頁面的情況下進(jìn)行異步請求和更新頁面內(nèi)容。可以說 Ajax 是基于瀏覽器提供的 XMLHttpRequest 對象來實(shí)現(xiàn)的。
以下是基于原生 JavaScript 的 AJAX 請求代碼示例：
// 創(chuàng)建 XMLHttpRequest 對象const xhr = new XMLHttpRequest();// 指定請求的方法和 URLxhr.open('GET', 'api_url', true); // 第三個參數(shù) true 表示異步請求// 設(shè)置請求頭（如果需要）xhr.setRequestHeader('Content-Type', 'application/json'); // 根據(jù)實(shí)際需求設(shè)置請求頭// 注冊一個回調(diào)函數(shù)來處理響應(yīng)xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); // 處理響應(yīng)數(shù)據(jù) // 在這里執(zhí)行相應(yīng)的操作 console.log(response); }};// 發(fā)送請求xhr.send();雖然 AJAX 是一種強(qiáng)大的技術(shù)，但相對于 Axios 和 Fetch API，它有以下一些缺點(diǎn)：
Fetch 是一種用于進(jìn)行網(wǎng)絡(luò)請求的現(xiàn)代 JavaScript API。它提供了一種簡單、靈活且功能強(qiáng)大的方式，用于從服務(wù)器獲取資源并處理響應(yīng)。
Fetch API 在瀏覽器中原生支持，并且以 Promise 為基礎(chǔ)，使得異步請求更加直觀和易用。使用 Fetch API，可以執(zhí)行各種類型的請求（如 GET、POST、PUT、DELETE 等），發(fā)送請求時可以設(shè)置請求頭、請求參數(shù)，以及處理響應(yīng)數(shù)據(jù)。
與傳統(tǒng)的 AJAX 相比，F(xiàn)etch API 具有以下優(yōu)點(diǎn)：
Fetch API 提供了一個全局的 fetch() 方法，該方法提供了一種簡單、邏輯的方式來通過網(wǎng)絡(luò)異步獲取資源。
fetch() 方法的語法如下：
fetch(url, options) .then(response => { // 在這里處理響應(yīng) }) .catch(error => { // 在這里處理錯誤 });這里有兩個參數(shù)：
注意，fetch()默認(rèn)使用的是 GET 請求，如果需要使用其他方法（如 POST、PUT 等），需要通過 options 參數(shù)進(jìn)行設(shè)置。
fetch() 方法返回一個 Promise 對象，可以使用 .then() 方法來處理成功的響應(yīng)，使用 .catch() 方法來處理錯誤的情況。
options 對象包含的屬性如下：
{ method: 'POST', // *GET, POST, PUT, DELETE等 mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'Content-Type': 'application/json' }, redirect: 'follow', // manual, *follow, error referrerPolicy: 'no-referrer', // no-referrer, *client body: JSON.stringify(data) // body 數(shù)據(jù)類型必須與 "Content-Type" 請求頭匹配}一旦獲取到響應(yīng)（Response），返回的對象包含以下屬性：
我們可以使用 response.type 來確定響應(yīng)的類型，并根據(jù)不同的類型采取相應(yīng)的處理方法：
fetch(url) .then(response => { // 檢查響應(yīng)狀態(tài)碼 if (!response.ok) { throw new Error('Network response was not ok'); } // 定義一個響應(yīng)類型與解析方法的映射關(guān)系 const responseTypes = new Map([ ['json', () => response.json()], ['text', () => response.text()], ['formData', () => response.formData()], ['blob', () => response.blob()], ['arrayBuffer', () => response.arrayBuffer()] ]); // 根據(jù)響應(yīng)類型選擇相應(yīng)的解析方法 const parser = responseTypes.get(response.type); if (parser) { return parser(); } else { throw new Error('Unsupported response type'); } }) .then(data => { // 處理數(shù)據(jù) console.log(data); }) .catch(error => { // 處理錯誤情況 console.error('Error:', error); });Response 對象提供了 5 個方法，用于從 HTTP 響應(yīng)中獲取不同類型的數(shù)據(jù)：
這些方法返回一個 Promise，當(dāng)解析完成時，Promise 將被解析為相應(yīng)的數(shù)據(jù)類型。
fetch 函數(shù)的請求頭包含在發(fā)起 HTTP 請求時發(fā)送給服務(wù)器的信息，用于傳遞額外的參數(shù)和配置。可以使用 headers 對象來設(shè)置和操作請求頭。常見的請求頭字段包括：
在 fetch 函數(shù)中可以通過第二個參數(shù)進(jìn)行配置，其中可以指定請求頭：
fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token123' }}) .then(response => { // 處理響應(yīng) }) .catch(error => { // 處理錯誤 });響應(yīng)頭是服務(wù)器在響應(yīng) HTTP 請求時發(fā)送給客戶端的頭部信息。可以通過 Response 對象的 headers 屬性訪問響應(yīng)頭。常見的響應(yīng)頭字段包括：
在處理 fetch 返回的 Response 對象時，可以通過調(diào)用 response.headers.get('Header-Name') 方法來獲取特定的響應(yīng)頭字段的值。
fetch(url) .then(response => { const contentType = response.headers.get('Content-Type'); // 其他處理邏輯 }) .catch(error => { // 處理錯誤 });除了可以使用 catch() 來處理錯誤之外，與使用其他異步操作一樣，我們也可以使用 async/await 來處理異步請求，使代碼更加簡潔和易讀：
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (response.ok) { const data = await response.json(); console.log(data); // 處理解析后的數(shù)據(jù) } else { throw new Error('請求失敗'); } } catch (error) { console.log(error); // 處理錯誤 }}fetchData();在標(biāo)準(zhǔn)的 Fetch API 中，沒有提供直接取消 Fetch 請求的內(nèi)置方法。但是，可以使用以下方法來模擬或?qū)崿F(xiàn)取消 Fetch 請求的效果。
使用 AbortController 和 AbortSignal：這是一種較新的瀏覽器特性，用于生成可以取消請求的信號。可以創(chuàng)建一個 AbortController對象，然后將其關(guān)聯(lián)到 Fetch 請求中，當(dāng)需要取消請求時，調(diào)用 AbortController 的 abort()方法：
// 創(chuàng)建 AbortController 和關(guān)聯(lián)的 signalconst abortController = new AbortController();const signal = abortController.signal;// 發(fā)起 Fetch 請求，并將 signal 傳遞給 fetch 函數(shù)fetch(url, { signal }) .then(response => { // 處理響應(yīng) }) .catch(error => { if (error.name === 'AbortError') { // 請求已被取消 } else { // 處理其他錯誤 } });// 當(dāng)需要取消請求時，調(diào)用 abort() 方法abortController.abort();目前，主流瀏覽器都支持 Fetch API：
圖片
Axios 是一個基于 Promise 網(wǎng)絡(luò)請求庫，用于在瀏覽器和 Node.js 中進(jìn)行 HTTP 請求。在服務(wù)端它使用原生 node.js http 模塊, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests。Axios 是目前最流行的 HTTP 請求庫，其 npm 每周下載量達(dá)到了 4500w+。
Axios 庫具有以下特點(diǎn)：
可以通過以下命令來安裝 Axios：
// 使用 npm 安裝npm install axios// 使用 yarn 安裝yarn add axios下面來進(jìn)行一個簡單的 get 請求：
axios.get('https://api.example.com/data') .then(response => { // 處理成功響應(yīng) console.log(response.data); }) .catch(error => { // 處理錯誤 console.error(error); });這里使用 axios.get 方法發(fā)起了一個 GET 請求，并將請求的 URL 作為參數(shù)傳遞給該方法。然后使用 Promise 的 .then 方法處理成功響應(yīng)，并通過 response.data 獲取響應(yīng)數(shù)據(jù)。如果請求失敗，可以通過 Promise 的 .catch 方法捕獲錯誤。
axios 支持通過簡寫方式來執(zhí)行不同類型的請求：
對于這些方法，第一個參數(shù)是請求的 URL，config 和 data 分別是請求的配置項(xiàng)和請求參數(shù)，這兩個參數(shù)都是可選的。例如，下面是一個 post 請求：
const options = { headers: {'X-Custom-Header': 'value'}};axios.post('/save', { a: 10 }, options) .then(response => { // 處理成功響應(yīng) console.log(response.data); }) .catch(error => { // 處理錯誤 console.error(error); });當(dāng)作為第二個參數(shù)傳遞給 axios.post 函數(shù)時，Axios 會自動將 JavaScript 對象序列化為 JSON。 這樣就無需將 POST 正文序列化為 JSON。Axios 還會自動將 Content-Type 請求頭設(shè)置為 application/json。
在 Axios 中，可以使用 axios.all 和 axios.spread 來處理多個并發(fā)的請求：
const axios = require('axios');// 創(chuàng)建多個請求const request1 = axios.get('https://api.example.com/data1');const request2 = axios.get('https://api.example.com/data2');// 并發(fā)發(fā)送多個請求axios.all([request1, request2]) .then(axios.spread((response1, response2) => { // 處理各個請求的響應(yīng) console.log(response1.data); console.log(response2.data); })) .catch(error => { // 處理錯誤 console.error(error); });可以看到，在 .then 方法中使用了 axios.spread 函數(shù)將多個請求的響應(yīng)結(jié)果進(jìn)行解構(gòu)，通過多個參數(shù)分別接收各個請求的響應(yīng)。可以根據(jù)實(shí)際情況命名這些參數(shù)，并通過 response1.data、response2.data 等方式獲取各個請求的響應(yīng)數(shù)據(jù)。
在 Axios 中，可以使用 transformRequest 方法在請求發(fā)送之前對請求數(shù)據(jù)進(jìn)行轉(zhuǎn)換和處理，它是一個請求攔截器，是一個可選的函數(shù)。
transformRequest 函數(shù)接收兩個參數(shù)：requestData 和 requestHeaders。其中，requestData 是要發(fā)送的請求數(shù)據(jù)，requestHeaders 是要發(fā)送的請求頭信息。可以在 transformRequest 函數(shù)內(nèi)部對這些參數(shù)進(jìn)行修改，并將修改后的值返回。返回的結(jié)果將作為實(shí)際發(fā)送請求的數(shù)據(jù)。
axios({ url: 'https://api.example.com/data', method: 'post', data: { id: 12345, name: 'John Doe' }, transformRequest: (data, headers) => { // 對請求數(shù)據(jù)進(jìn)行轉(zhuǎn)換和處理 const modifiedData = { ...data }; // 復(fù)制原始數(shù)據(jù) // 修改數(shù)據(jù)或添加額外字段 modifiedData.extraField = 'Extra Value'; // 修改請求頭信息 headers['Content-Type'] = 'application/json'; return JSON.stringify(modifiedData); // 返回處理后的數(shù)據(jù) }}) .then(response => { // 處理成功響應(yīng) console.log(response.data); }) .catch(error => { // 處理錯誤 console.error(error); });這里使用 Axios 發(fā)起了一個 POST 請求。通過傳遞包含 transformRequest 函數(shù)的配置對象來定義請求。在 transformRequest 函數(shù)內(nèi)部，復(fù)制了原始的請求數(shù)據(jù) data，并進(jìn)行了一些修改和處理，如添加了額外的字段和修改了請求頭信息。最終，將修改后的數(shù)據(jù)以 JSON 字符串的形式返回。Axios 將使用 transformRequest 函數(shù)返回的結(jié)果作為實(shí)際發(fā)送請求的數(shù)據(jù)。
除了可以對請求進(jìn)行攔截之外，Axios 還支持對響應(yīng)進(jìn)行攔截，對響應(yīng)數(shù)據(jù)進(jìn)行轉(zhuǎn)換和處理。可以通過 transformResponse 響應(yīng)攔截器來實(shí)現(xiàn)。該函數(shù)接收一個參數(shù)：responseData，它是從服務(wù)器接收到的原始響應(yīng)數(shù)據(jù)。可以在 transformResponse 函數(shù)內(nèi)部對這個參數(shù)進(jìn)行修改，并將修改后的值返回。返回的結(jié)果將作為實(shí)際處理響應(yīng)的數(shù)據(jù)。
axios.get('https://api.example.com/data', { transformResponse: (data) => { // 對響應(yīng)數(shù)據(jù)進(jìn)行轉(zhuǎn)換和處理 const parsedData = JSON.parse(data); // 解析 JSON 字符串 // 修改數(shù)據(jù)或添加額外字段 parsedData.extraField = 'Extra Value'; return parsedData; // 返回處理后的數(shù)據(jù) }}) .then(response => { // 處理成功響應(yīng) console.log(response.data); }) .catch(error => { // 處理錯誤 console.error(error); });這里使用 Axios 發(fā)起了一個 GET 請求，并通過傳遞包含 transformResponse 函數(shù)的配置對象來定義請求。在 transformResponse 函數(shù)內(nèi)部，對從服務(wù)器接收到的響應(yīng)數(shù)據(jù) data 進(jìn)行了一些修改和處理，如解析 JSON 字符串，添加了額外的字段。最終將修改后的數(shù)據(jù)返回。
Axios 中，可以使用攔截器來攔截請求和響應(yīng)，并在其被發(fā)送或接收之前進(jìn)行一些額外的處理，可以通過 axios.interceptors 對象來添加攔截器。
// 添加請求攔截器axios.interceptors.request.use(config => { // 在發(fā)送請求之前做一些處理 console.log('請求攔截器'); // 修改請求配置 config.headers['Authorization'] = 'Bearer token'; return config;}, error => { // 處理請求錯誤 console.error('請求出錯：', error);});// 添加響應(yīng)攔截器axios.interceptors.response.use(response => { // 在接收到響應(yīng)數(shù)據(jù)之前做一些處理 console.log('響應(yīng)攔截器'); // 修改響應(yīng)數(shù)據(jù) response.data = { ...response.data, extraField: 'Extra Value' }; return response;}, error => { // 處理響應(yīng)錯誤 console.error('響應(yīng)出錯：', error);});// 發(fā)送請求axios.get('https://api.example.com/data') .then(response => { // 處理成功響應(yīng) console.log(response.data); }) .catch(error => { // 處理請求或響應(yīng)錯誤 console.error(error); });這里首先使用 axios.interceptors.request.use 方法添加了一個請求攔截器。該攔截器在發(fā)送請求之前被調(diào)用，并接收請求配置對象 config 作為參數(shù)。可以對請求配置進(jìn)行修改，如添加請求頭信息。最后，要確保返回修改后的配置對象。
接下來，使用 axios.interceptors.response.use 方法添加了一個響應(yīng)攔截器。該攔截器在接收到響應(yīng)數(shù)據(jù)之前被調(diào)用，并接收響應(yīng)對象 response 作為參數(shù)。可以對響應(yīng)數(shù)據(jù)進(jìn)行修改，如添加額外的字段。同樣，要確保返回修改后的響應(yīng)對象。
跨站請求偽造（簡稱 XSRF）是一種攻擊 Web 應(yīng)用的方法，其中攻擊者將自己偽裝成合法且受信任的用戶，以影響應(yīng)用程序與用戶瀏覽器之間的交互。 有很多方法可以執(zhí)行此類攻擊，包括 XMLHttpRequest。
幸運(yùn)的是，Axios 通過允許在發(fā)出請求時嵌入額外的身份驗(yàn)證數(shù)據(jù)來防止 XSRF。 這使得服務(wù)器能夠發(fā)現(xiàn)來自未經(jīng)授權(quán)的位置的請求。以下是使用 Axios 完成此操作的方法：
const options = { method: 'post', url: '/login', xsrfCookieName: 'XSRF-TOKEN', xsrfHeaderName: 'X-XSRF-TOKEN',};axios(options) .then(response => { // 處理成功響應(yīng) console.log(response.data); }) .catch(error => { // 處理請求錯誤 console.error(error); });這里有兩個 xsrf 相關(guān)的屬性：
Axios 的另一個有趣的功能是能夠監(jiān)控請求的進(jìn)度，這在下載或上傳大文件時特別有用，可以使用 onUploadProgress 和 onDownloadProgress 兩個配置選項(xiàng)來實(shí)現(xiàn)。
對于上傳進(jìn)度，可以使用 onUploadProgress 配置選項(xiàng)。它會在上傳數(shù)據(jù)時觸發(fā)，并提供關(guān)于上傳進(jìn)度的信息。
axios.post('/upload', data, { onUploadProgress: progressEvent => { const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`上傳進(jìn)度：${percentCompleted}%`); },}) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });這里發(fā)送了一個 POST 請求，在配置選項(xiàng)中使用了 onUploadProgress。當(dāng)數(shù)據(jù)上傳過程中觸發(fā)進(jìn)度事件時，回調(diào)函數(shù)會被執(zhí)行。在回調(diào)函數(shù)中，我們計(jì)算出了已上傳數(shù)據(jù)的百分比，并將其打印出來。
對于下載進(jìn)度，可以使用 onDownloadProgress 配置選項(xiàng)。它會在接收到響應(yīng)數(shù)據(jù)時觸發(fā)，并提供關(guān)于下載進(jìn)度的信息。
axios.get('/download', { onDownloadProgress: progressEvent => { const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`下載進(jìn)度：${percentCompleted}%`); },}) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });這里發(fā)送了一個 GET 請求，在配置選項(xiàng)中使用了 onDownloadProgress。當(dāng)數(shù)據(jù)下載過程中觸發(fā)進(jìn)度事件時，回調(diào)函數(shù)會被執(zhí)行。在回調(diào)函數(shù)中，我們計(jì)算出了已下載數(shù)據(jù)的百分比，并將其打印出來。
在 Axios 中，可以使用取消令牌（cancel token）來取消請求。取消令牌是一個對象，它表示一個具體的取消操作，并允許在需要時中止請求。
// 創(chuàng)建一個取消令牌源const CancelToken = axios.CancelToken;const source = CancelToken.source();// 發(fā)送請求axios.get('/api/data', { cancelToken: source.token}) .then(response => { console.log(response.data); }) .catch(error => { if (axios.isCancel(error)) { console.log('請求已被取消：', error.message); } else { console.error(error); } });// 取消請求source.cancel('取消請求的原因');這里，先創(chuàng)建了一個取消令牌源 source。然后，發(fā)送 GET 請求時將 cancelToken 配置選項(xiàng)設(shè)置為 source.token，即將取消令牌與該請求關(guān)聯(lián)起來。當(dāng)需要取消請求時，調(diào)用 source.cancel() 方法，并傳入取消請求的原因作為參數(shù)。
在請求的 .catch() 方法中，我們使用 axios.isCancel(error) 來判斷捕獲的錯誤是否是一個已取消的請求。如果是取消請求導(dǎo)致的錯誤，則會打印出 '請求已被取消' 的提示信息。否則，將打印出其他類型的錯誤。
可以使用 timeout 配置選項(xiàng)設(shè)置 Axios 請求的超時時間，這個選項(xiàng)指定了請求在多少毫秒后如果沒有得到響應(yīng)就會超時。
axios.get('/api/data', { timeout: 5000 // 設(shè)置超時時間為5秒}) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });發(fā)送了一個 GET 請求，并在配置選項(xiàng)中設(shè)置了 timeout 為 5000 毫秒（即 5 秒）。如果請求在 5 秒內(nèi)沒有得到響應(yīng)，就會觸發(fā)超時錯誤。在超時錯誤的情況下，請求會被自動取消，并且進(jìn)入 .catch() 分支。您可以根據(jù)需要進(jìn)行錯誤處理。
注意，如果不設(shè)置 timeout 選項(xiàng)，默認(rèn)情況下 Axios 請求是沒有超時限制的。
相對于 Fetch、XMLHttpRequest 和 Ajax，我還是更喜歡 Axios。它提供了簡潔易用的 API，統(tǒng)一的錯誤處理和攔截器支持，取消請求和超時處理功能，以及基于 Promise 的鏈?zhǔn)秸{(diào)用和跨瀏覽器兼容性。這些特性使得使用 Axios 更方便、高效，并提供更好的開發(fā)體驗(yàn)。
本文鏈接：http://www.www897cc.com/showinfo-26-5753-0.html前端請求大比拼：Fetch、Axios、Ajax、XHR
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號