Fetch API

了解所有關於 Fetch API 的知識，這是一種基於 Promise 的異步網路請求的現代方法。 介紹 Fetch API 使用 Fetch 捕捉錯誤 Response 物件 Metadata headers status statusText url 內容主體 Request 物件 請求標頭 POST 請求 如何取消 Fetch 請求 尋找更多資訊？ 介紹 Fetch API 自從 IE5 在1998年釋出以來，我們在瀏覽器中有使用 XMLHttpRequest (XHR) 這個選項進行異步網路請求。 在幾年之後，GMail 和其他豐富的應用程式廣泛使用它，使得這種方法變得非常受歡迎，甚至需要一個名稱，AJAX。 直接使用 XMLHttpRequest 一直都很麻煩，所以通常會被某些庫抽象化，而 jQuery 就有其自己的相關幫助方法： jQuery.ajax() jQuery.get() jQuery.post() 它們對於使得這一切變得更加容易特別有著巨大的影響，尤其是在保證它們在舊版瀏覽器上的兼容性方面。 Fetch API 就是一種現代化的異步網路請求方法，並使用 Promises 作為其基礎。 Fetch 在主要的瀏覽器上有著良好的支援，除了 IE。 由 GitHub 提供的 polyfill https://github.com/github/fetch 讓我們可以在任何瀏覽器上使用 fetch。 使用 Fetch 開始使用 Fetch 發送 GET 請求非常簡單：...

XMLHttpRequest（XHR）的引入是Web平台的重大胜利。让我们看看它是如何工作的。 介紹 一個XHR請求的例子 附加的open()參數 onreadystatechange 中止XHR請求 與jQuery的比較 與Fetch的比較 跨網域請求 使用XHR上傳文件 介紹 在2000年代中期，網絡瀏覽器中引入XMLHttpRequest（XHR）是Web平台的重大突破。讓我們看看它是如何工作的。 許多現在看起來很正常的東西，在當時看起來就像來自未來。例如，我談論的GMail或Google Maps在很大程度上都依賴於XHR。 XHR是在九十年代由Microsoft發明的，由於所有瀏覽器在2002年至2006年期間都實現了它，它成為事實上的標准。W3C於2006年將XMLHttpRequest標准化。 就像在Web平台上有時會發生的情況一樣，最初有一些不一致之處，這使得在不同的瀏覽器中使用XHR變得非常不同。 像jQuery這樣的庫通過提供一個易於使用的抽象層，受到開發人員的歡迎，這反過來又幫助傳播了這項技術。 一個XHR請求的例子 以下代碼創建一個XMLHttpRequest（XHR）請求對象，並附加一個在onreadystatechange事件上響應的回調函數。 xhr連接的設置為向https://yoursite.com發送GET請求，並使用send()方法開始： const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4) { xhr.status === 200 ? console.log(xhr.responseText) : console.error('error') } } xhr.open('GET', 'https://yoursite.com') xhr.send() 附加的open()參數 在上面的例子中，我們只傳遞了方法和URL給請求。 我們還可以指定其他HTTP方法-（get，post，head，put，delete，options）。 其他參數讓您可以指定一個標誌，如果將其設置為false，則可以使請求同步進行，並為HTTP驗證指定一組憑據： open(method, url, asynchronous, username, password) onreadystatechange onreadystatechange在XHR請求期間多次被調用。我們明確忽略除readyState === 4以外的所有狀態，這意味著請求已完成。 狀態有： 1（OPENED）：請求開始 2（HEADERS_RECEIVED）：已接收到HTTP標頭 3（LOADING）：響應開始下載 4（DONE）：響應已下載 中止XHR請求 可以通過在xhr對象上調用abort()方法來中止XHR請求。 與jQuery的比較 在使用jQuery時，這些代碼可以轉寫為： $.get('https://yoursite.com', data => { console....

我使用了一個很酷的應用程序Insomnia來測試API，它允許您對REST API或GraphQL API服務進行HTTP請求。 該應用程序具有一個很好的按鈕，可以生成代碼以從應用程序複製API請求，您可以在其中以可視化方式設計所有請求數據。 在內部，他們使用了httpsnippet，這是一個使用JavaScript編寫的多語言和庫的HTTP請求片段生成器。這是一個非常酷的項目。 無論如何，導出的代碼片段有幾個，我想展示不同庫中相同的API調用。 首先，這是API調用的描述。我向 api.randomservice.com 網站發送一個POST請求（這是我隨便想出的一個隨機URL）到 /dog 端點。 我向該端點發送一個帶有2個屬性的對象： { name: 'Roger', age: 8 } 作為JSON編碼。 我還傳遞了一個 content-type 以將內容設置為 application/json，並且還傳遞了一個 authorization 標頭，以使用通過API儀表板分配給我的Bearer令牌對請求進行身份驗證。 XHR 第一個代碼示例是使用XHR（可在瀏覽器中原生支持）和在Node.js中使用xmlhttprequest庫： const data = JSON.stringify({ name: 'Roger', age: 8 }); const xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.addEventListener('readystatechange', function() { if (this.readyState === this.DONE) { console.log(this.responseText); } }); xhr.open('POST', 'https://api.randomservice.com/dog'); xhr.setRequestHeader('content-type', 'application/json'); xhr.setRequestHeader('authorization', 'Bearer 123abc456def'); xhr.send(data); Fetch API 然後，我們使用Fetch API進行相同的代碼片段，這也是另一個在瀏覽器中原生可用且可以在Node.js中使用node-fetch的API： fetch('https://api.randomservice.com/dog', { method: 'POST', headers: { 'content-type': 'application/json', authorization: 'Bearer 123abc456def' }, body: JSON....

以簡單易懂的方式解釋如何使用Fetch API將文件上傳到服務器上。 有一個看似簡單的任務有時會讓人花上幾個小時在網上進行研究：將文件上傳到服務器。 在這篇教程中，我將向您解釋如何使用fetch來實現這樣的功能。 給定一個包含文件輸入字段的表單： <input type="file" id="fileUpload" /> 我們在其上附加一個change事件處理程序： document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 然後我們在handleImageUpload()函數中處理大部分的邏輯： const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) } 在這個例子中，我們向/saveImage端點發送POST請求。 我們初始化一個名為formData的新的FormData對象，並將上傳的文件附加到其中。如果我們有多個文件輸入元素，將會有多個append()調用。 第二個then()中的data變量將包含JSON解析後的返回數據。我假設你的服務器會以JSON格式作為響應返回。 參考 如何在服務器端處理上傳的圖片