API的使用 · 前端知識備忘錄

[TOC] ## 介紹 Web開發人員可以做的最強大的事情之一是從服務器獲取數據并在其站點上創造性地顯示它。在許多情況下，服務器僅存在于該特定站點。服務器可以包含博客帖子，用戶數據，游戲的高分或其他任何內容。在其他情況下，服務器是一種開放服務，向想要使用它的任何人（即天氣數據或股票價格）提供數據。在任何一種情況下，訪問然后使用該數據的方法基本相同。 ## 獲取數據那么我們如何實際將API中的數據導入我們的代碼？幾年前，在代碼中訪問API數據的主要方法是使用`XMLHttpRequest`。此功能仍可在所有瀏覽器中使用，但不幸的是，使用它并不是特別好。語法如下所示： ~~~javascript // Just getting XHR is a mess! if (window.XMLHttpRequest) { // Mozilla, Safari, ... request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } // Open, send. request.open('GET', 'https://url.com/some/url', true); request.send(null); ~~~ 哎喲。那很痛苦。開發人員感到不得不寫出這些東西的痛苦，開始編寫第三方庫來處理這個并使其更容易使用。一些比較流行的圖書館是[請求](https://github.com/request/request)，[axios](https://github.com/mzabriskie/axios)和[superagent](https://github.com/visionmedia/superagent)，所有這些都有自己的優點和缺點。然而，最近，Web瀏覽器已經開始實現一個新的本機函數來發出HTTP請求，這就是我們現在要使用和堅持的那個。見面： ~~~javascript // URL (required), options (optional) fetch('https://url.com/some/url') .then(function(response) { }).catch(function(err) { // Error :( }); ~~~ 如果您忘記了，請向上滾動并查看如何使用XHR執行相同的操作。當你欣賞漂亮和干凈的代碼是如何，注意`.then()`和`.catch()`功能存在。你還記得那些是什么嗎？（PROMISES！） ## CORS 在我們開始將它放入代碼之前的附注。出于安全原因，默認情況下，瀏覽器將HTTP請求限制為外部源（這正是我們在此嘗試執行的操作）。我們需要做很少的設置才能完成抓取工作。了解這一點現在已超出我們的范圍，但如果您想了解一下這個[維基百科文章](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)是一個不錯的起點。無論您是否繞道而行，了解Cross Origin資源共享（CORS）的所有內容，修復工作都很簡單。使用fetch，您可以輕松地為選項提供JavaScript對象。它就在URL作為fetch函數的第二個參數之后： ``` fetch('url.url.com/api',{ mode:'cors' }) ``` `{mode: 'cors'}`如上所示，簡單地添加URL后，將解決我們現在遇到的問題。但是，在將來，您可能希望進一步了解此限制的含義。 ## 我們開工吧現在，我們將把所有這些保存在一個HTML文件中。因此，繼續創建一個空白圖像標記和正文中的空腳本標記。 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="#"> <script> </script> </body> </html> ~~~ 在腳本標記中，讓我們首先選擇圖像并將其分配給變量，以便我們可以在從Giphy API收到URL后更改URL。 ~~~html <script> const img = document.querySelector('img') </script> ~~~ 使用上面的URL添加fetch也相對簡單： ~~~html <script> const img = document.querySelector('img') fetch('https://api.giphy.com/v1/gifs/translate?api_key=111111&s=cats', {mode: 'cors'}) .then(function(response) { console.log(response.json()) }) </script> ~~~ 您現在應該能夠在瀏覽器中打開HTML文件，并且當您在頁面上看不到任何內容時，您*應該*在控制臺中記錄一些內容。整個過程中最棘手的部分是破譯如何從服務器的響應中獲取所需的數據。在這種情況下，檢查瀏覽器的控制臺將顯示返回的是*另一個*Promise ...獲取我們需要另一個`.then()`函數的數據。 ~~~html <script> const img = document.querySelector('img') fetch('https://api.giphy.com/v1/gifs/translate?api_key=bb2006d9d3454578be1a99cfad65913d&s=cat', {mode: 'cors'}) .then(function(response) { return response.json() }) .then(function(response) { console.log(response) }) </script> ~~~ 為了獲得數據，我們需要向下鉆取對象的層，直到找到我們想要的東西！ ~~~html <script> const img = document.querySelector('img') fetch('https://api.giphy.com/v1/gifs/translate?api_key=111111&s=cats', {mode: 'cors'}) .then(function(response) { return response.json() }) .then(function(response) { console.log(response.data.images.original.url) }) </script> ~~~ 現在運行該文件應記錄圖像的URL。剩下要做的就是將頁面上的圖像源設置為我們剛剛訪問過的URL： ~~~html <script> const img = document.querySelector('img') fetch('https://api.giphy.com/v1/gifs/translate?api_key=111111&s=cats', {mode: 'cors'}) .then(function(response) { return response.json() }) .then(function(response) { img.src = response.data.images.original.url }) </script> ~~~ 如果一切順利，每次刷新時都應該在頁面上看到一個新圖像！