如何使用 JavaScript 連接到 API
使用 JavaScript 的很大一部分是知道如何連接到 API。作為一個初出茅廬的開發人員，您可能在某些時候被告知“玩弄一些 API！”了解它們是什麼以及如何與它們一起工作。如果您曾經查看過 API 的文檔並且不知道從哪裡開始或該做什麼而感到沮喪，那麼這篇文章就是為您準備的。
我們將使用純 JavaScript 製作一個非常簡單的 Web 應用程序，該應用程序將從 API 檢索信息並將其顯示在頁面上。不會有服務器、依賴項、構建工具或其他任何東西來進一步混淆初學者已經很難和令人困惑的話題。
- 查看演示應用
- GitHub 上的源代碼
先決條件
- HTML 和 CSS 的基本知識。
- JavaScript 語法和數據類型的基本知識。
- 使用 JSON 和 JavaScript 對象的基本知識。這篇簡短的文章將徹底清除它。
我們將在此過程中介紹的所有其他內容。
目標
我們將從頭開始編寫這個簡單的 Web 應用程序，它連接到 Studio Ghibli API，使用 JavaScript 檢索數據，並將其顯示在網站的前端。這不是 旨在成為有關 API 或 REST 的廣泛資源 - 只是啟動和運行的最簡單示例，您可以在未來構建它。我們將學習：
- 什麼是 Web API。
- 了解如何使用 HTTP 請求
GET使用 JavaScript - 如何使用 JavaScript 創建和顯示 HTML 元素。
它看起來像這樣：
讓我們開始吧。
快速概覽
API 代表應用程序接口，可以定義為各種軟件組件之間的一組通信方法。換句話說，API 允許軟件與另一個軟件進行通信。
我們將特別關注 Web API，它允許 Web 服務器與第三方軟件進行交互。在這種情況下，Web 服務器正在使用 HTTP 請求 與公開可用的 URL endpoint 通信 包含 JSON 數據。如果現在這令人困惑，那麼到文章末尾才有意義。
您可能熟悉 CRUD 的概念 應用程序，代表創建、讀取、更新、刪除。任何編程語言都可用於通過各種方法製作 CRUD 應用程序。 Web API 使用與 CRUD 動詞對應的 HTTP 請求。
| 動作 | HTTP 方法 | 說明 |
|---|---|---|
| 創建 | POST | 創建一個新資源 |
| 讀取 | GET | 檢索資源 |
| 更新 | PUT /PATCH | 更新現有資源 |
| 刪除 | DELETE | 刪除資源 |
設置
我們的目標是什麼？我們想要獲取所有吉卜力工作室電影的數據，並在網格中顯示標題和描述。對於一些背景知識，吉卜力工作室是一個日本動畫工作室，製作了幾部電影，例如千與千尋，我的朋友克雷格啟發我以它作為例子。
我們將首先創建一個 index.html 文件在新目錄中。該項目將僅包含 index.html , style.css , 和 scripts.js 在最後。這個 HTML 框架只是鏈接到一個 CSS 和 JavaScript 文件，加載一個字體，並包含一個帶有 root 的 div ID。這個文件是完整的，不會改變。我們將使用 JavaScript 從這裡添加所有內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ghibli App</title>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script src="scripts.js"></script>
</body>
</html>由於本文關注的是 API 和 JavaScript 的概念，因此我不會解釋 CSS 的工作原理。我們將創建一個 style.css 將用於創建網格。為簡潔起見，我只包括了最相關的結構 CSS 如下，但您可以在此處複製完整的 CSS 代碼。
style.css#root {
max-width: 1200px;
margin: 0 auto;
}
.container {
display: flex;
flex-wrap: wrap;
}
.card {
margin: 1rem;
border: 1px solid gray;
}
@media screen and (min-width: 600px) {
.card {
flex: 1 1 calc(50% - 2rem);
}
}
@media screen and (min-width: 900px) {
.card {
flex: 1 1 calc(33% - 2rem);
}
}現在我們已經設置好了 HTML 和 CSS，所以你可以製作 scripts.js 我們將從那裡繼續。
連接到 API
讓我們看一下 Studio Ghibli API 文檔。創建此 API 是為了幫助開發人員學習如何使用 HTTP 請求與資源進行交互，這對我們來說是完美的。由於可以通過多種不同的方法訪問 API——JavaScript、PHP、Ruby、Python 等——大多數 API 的文檔並不傾向於給出如何連接的具體說明。
我們可以從這個文檔中看到，它告訴我們可以使用 curl 發出請求 或常規的 REST 調用，但我們可能還不知道該怎麼做。
獲取 API 端點
首先，讓我們滾動到電影部分。在右側你會看到 GET /films .它將向我們顯示 API 端點的 URL，https://ghibliapi.herokuapp.com/films。單擊該鏈接將顯示 JSON 格式的對像數組。
使用 HTTP 請求檢索數據
在我們嘗試將任何東西放在網站的前端之前，讓我們打開一個 API 連接。我們將使用 XMLHttpRequest 對象，這是一種打開文件並發出 HTTP 請求的方法。
我們將創建一個 request 變量並分配一個新的 XMLHttpRequest 反對它。然後我們將使用 open() 打開一個新連接 方法 - 在參數中，我們將請求的類型指定為 GET 以及 API 端點的 URL。請求完成，我們可以訪問 onload 中的數據 功能。完成後，我們將發送請求。
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
// Begin accessing JSON data here
}
// Send request
request.send()
或者，您可以使用 fetch API 和 async /await .
function getData() {
const response = await fetch('https://ghibliapi.herokuapp.com/films')
const data = await response.json()
}使用 JSON 響應
現在我們已經收到了來自 HTTP 請求的響應，我們可以使用它了。但是，響應是 JSON 格式的，我們需要將該 JSON 轉換為 JavaScript 對象才能使用它。
我們將使用 JSON.parse() 解析響應，並創建一個 data 包含所有 JSON 作為 JavaScript 對像數組的變量。使用 forEach() ，我們將通過控制台註銷每部電影的標題，以確保其正常運行。
// Begin accessing JSON data here
var data = JSON.parse(this.response)
data.forEach(movie => {
// Log each movie's title
console.log(movie.title)
})使用檢查 在 index.html 上 並查看控制台，您應該會看到 20 部 Ghibli 電影的標題。成功！
我們在這裡唯一缺少的是一些處理錯誤的方法。如果使用了錯誤的 URL，或者 URL 損壞並且沒有顯示任何內容怎麼辦？發出 HTTP 請求時，響應會返回 HTTP 狀態代碼。 404 是最著名的響應，意思是 Not Found , 和 200 好的 是一個成功的請求。
讓我們將代碼包裝在 if 中 語句，在 200-300 範圍內的任何響應上成功，如果請求失敗，則註銷錯誤。你可以把網址弄亂來測試錯誤。
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
data.forEach(movie => {
console.log(movie.title)
})
} else {
console.log('error')
}這是到目前為止的全部代碼。
腳本.js
var request = new XMLHttpRequest()
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
data.forEach(movie => {
console.log(movie.title)
})
} else {
console.log('error')
}
}
request.send()
我們已經成功使用了 GET 用於檢索（或使用）API 端點的 HTTP 請求，該端點由 JSON 格式的數據組成。但是，我們仍然卡在控制台中——我們想在網站的前端顯示這些數據，我們將通過修改 DOM 來實現。
顯示數據
為了在站點的前端顯示信息，我們將使用 DOM，它實際上是一個 API 本身，它允許 JavaScript 與 HTML 通信。如果您對 DOM 一點經驗都沒有，我為 DigitalOcean 寫了用 JavaScript 理解和修改 DOM，它將闡明 DOM 是什麼以及 DOM 與 HTML 源代碼有何不同。
最後，我們的頁面將包含一個徽標圖像，然後是一個包含多個卡片元素的容器 - 每部電影一個。每張卡片都有一個標題和一個段落，其中包含每部電影的標題和描述。看起來是這樣的，只加載了必要的 CSS：
如果您還記得，我們的 index.html 只有一個根 div - <div id="root"> 馬上。我們將使用 getElementById() 訪問它 .我們可以暫時刪除之前編寫的所有代碼，稍後我們將重新添加。
const app = document.getElementById('root')
如果你不是 100% 肯定 getElementById() 確實，取上面的代碼和 console.log(app) .這應該有助於澄清那裡實際發生的事情。
我們網站的第一件事是標誌，它是一個img 元素。我們將使用 createElement() 創建圖像元素 .
const logo = document.createElement('img')
一個空的 img 不好，所以我們設置 src logo.png 的屬性 . （在這裡找到）
logo.src = 'logo.png'
我們將創建另一個元素，一個 div 這次，設置 class container 的屬性 .
const container = document.createElement('div')
container.setAttribute('class', 'container')
現在我們有了一個 logo 和一個容器，我們只需要把它們放在網站上。我們將使用 appendChild() 將徽標圖像和容器 div 附加到應用根目錄的方法。
app.appendChild(logo)
app.appendChild(container)這是完整的代碼。
scripts.jsconst app = document.getElementById('root')
const logo = document.createElement('img')
logo.src = 'logo.png'
const container = document.createElement('div')
container.setAttribute('class', 'container')
app.appendChild(logo)
app.appendChild(container)保存後，在網站前端會看到如下內容。
元素<div id="root">
<img src="logo.png" />
<div class="container"></div>
</div>這只會在 Inspect 中可見 元素選項卡，不在 HTML 源代碼中，如我鏈接的 DOM 文章中所述。
現在我們要將之前的所有代碼粘貼回去。最後一步是把我們之前安慰出來的東西做成卡片元素。
將所有內容粘貼回去，但我們將只查看 forEach() 中的內容 .
data.forEach(movie => {
console.log(movie.title)
console.log(movie.description)
})
而不是 console.log ，我們將使用 textContent 將 HTML 元素的文本設置為來自 API 的數據。我正在使用 substring() 在 p 元素來限制描述並保持每張卡片的長度相等。
data.forEach(movie => {
// Create a div with a card class
const card = document.createElement('div')
card.setAttribute('class', 'card')
// Create an h1 and set the text content to the film's title
const h1 = document.createElement('h1')
h1.textContent = movie.title
// Create a p and set the text content to the film's description
const p = document.createElement('p')
movie.description = movie.description.substring(0, 300) // Limit to 300 chars
p.textContent = `${movie.description}...` // End with an ellipses
// Append the cards to the container element
container.appendChild(card)
// Each card will contain an h1 and a p
card.appendChild(h1)
card.appendChild(p)
})
我還將使用最好的 HTML 元素 marquee 將控制台錯誤替換為前端的錯誤 ！ （我只是為了好玩和示範的目的開個玩笑，實際上不要使用 marquee 在任何類型的實際應用中，或者在這裡認真對待我。）
const errorMessage = document.createElement('marquee')
errorMessage.textContent = `Gah, it's not working!`
app.appendChild(errorMessage)我們完成了！這是最終的 scripts.js 代碼。
scripts.jsconst app = document.getElementById('root')
const logo = document.createElement('img')
logo.src = 'logo.png'
const container = document.createElement('div')
container.setAttribute('class', 'container')
app.appendChild(logo)
app.appendChild(container)
var request = new XMLHttpRequest()
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
data.forEach(movie => {
const card = document.createElement('div')
card.setAttribute('class', 'card')
const h1 = document.createElement('h1')
h1.textContent = movie.title
const p = document.createElement('p')
movie.description = movie.description.substring(0, 300)
p.textContent = `${movie.description}...`
container.appendChild(card)
card.appendChild(h1)
card.appendChild(p)
})
} else {
const errorMessage = document.createElement('marquee')
errorMessage.textContent = `Gah, it's not working!`
app.appendChild(errorMessage)
}
}
request.send()有了完整的 CSS 樣式，最終產品就是這樣的。
同樣，這裡是實時應用程序和源代碼的鏈接。
- 查看演示應用
- GitHub 上的源代碼
結論
恭喜，您使用純 JavaScript 通過 HTTP 請求連接到 API。希望您對什麼是 API 端點、瀏覽器如何通過請求和響應與第三方 API 數據進行通信、如何將 JSON 解析為 JavaScript 理解的數組和對像以及如何完全使用 JavaScript 構建前端有更好的理解.
我們完成了這一切，而不必擔心 Node.js、npm、Webpack、React、Angular、構建工具、jQuery、Axios 和其他流行的開發術語、依賴項和框架，這些術語、依賴項和框架可能會讓您對幕後發生的事情感到困惑以最簡單的形式。
希望這篇文章對你有用，歡迎分享。
