使用NestJS和Prisma構建REST API：身份驗證
我們先來看一個簡單的 JavaScript 對象，它的格式和 JSON 很相似。通過這個對象，我們可以更容易理解如何從 API 中提取數(shù)據(jù)。
API（應用程序接口）是兩個程序或應用程序之間的橋梁。它允許不同的程序互相發(fā)送數(shù)據(jù)。
例如，如果我是一個應用程序的設計師，想讓其他開發(fā)者可以訪問我的應用數(shù)據(jù)，我會創(chuàng)建一個接口，讓其他應用程序通過這個接口來獲取或操作我的數(shù)據(jù)。
我將使用 WhereTheISS.at 提供的 API，它返回當前 國際空間站的經(jīng)緯度，并包含其它信息如 高度、速度 等。我們將僅僅展示經(jīng)緯度，并使用 Leaflet.js 庫將其顯示在地圖上。
在進行這項工作之前，我們需要了解 JSON（JavaScript Object Notation），它是一種用于存儲和交換數(shù)據(jù)的格式，易于人類閱讀和編寫，也便于機器解析。
我們先來看一個簡單的 JavaScript 對象，它的格式和 JSON 很相似。通過這個對象，我們可以更容易理解如何從 API 中提取數(shù)據(jù)。
例如：
let position = {
latitude: -45,
longitude: 112
};現(xiàn)在，讓我們編寫代碼，通過 fetch() 函數(shù)從 WhereTheISS.at API 獲取數(shù)據(jù)。數(shù)據(jù)返回后，我們將其轉(zhuǎn)換為 JSON 格式，提取 latitude 和 longitude，并顯示在網(wǎng)頁上。
let position = {
latitude: -45,
longitude: 112
};
console.log(position);
我們將通過以下 API 端點來獲取 國際空間站的實時位置：
https://api.wheretheiss.at/v1/satellites/25544首先，了解 API 文檔是非常重要的。文檔中會描述如何訪問不同的端點，獲得相應的數(shù)據(jù)。這里我們看到，API 沒有要求身份驗證，適合新手使用。
通過這個 API，我們獲取的數(shù)據(jù)是 JSON 格式的。為了解析 JSON 數(shù)據(jù)，我們需要將其轉(zhuǎn)換成 JavaScript 對象，才能從中提取信息。
當數(shù)據(jù)被成功獲取并轉(zhuǎn)換成 JSON 后，我們可以提取 latitude 和 longitude 并在網(wǎng)頁中展示它們。
document.getElementById('lat').textContent = latitude;
document.getElementById('lon').textContent = longitude;在接下來的步驟中，我將使用 Leaflet.js 庫將這些經(jīng)緯度數(shù)據(jù)標注在地圖上，從而直觀地展示國際空間站的實時位置。
當我們請求 API 返回的 JSON 數(shù)據(jù)時，可能會看到無格式的原始數(shù)據(jù)。為了更好地閱讀和理解，可以使用瀏覽器插件來格式化這些數(shù)據(jù)。
我將編寫一個異步函數(shù)來獲取數(shù)據(jù)，并通過 async/await 語法確保我們的數(shù)據(jù)獲取順利進行。
通過 JavaScript 解構賦值，我們可以將返回的數(shù)據(jù)中的 latitude 和 longitude 提取到單獨的變量中，方便后續(xù)處理。
const { latitude, longitude } = data;
我們將在網(wǎng)頁上創(chuàng)建 HTML 元素來顯示 latitude 和 longitude。每次頁面刷新時，都會從 API 獲取最新數(shù)據(jù)。
< h1>Where is the ISS? < /h1 >
< p > Latitude: < span id="lat" > < /span > < /p >
< p > Longitude: < span id="lon" > < /span > < /p >接下來，我將實現(xiàn)將這些數(shù)據(jù)繪制在地圖上，并使用定時器每隔一定時間更新這些數(shù)據(jù)。你也可以嘗試為這個項目增加更多功能，如顯示 速度 或添加其它 API。
到目前為止，我們已經(jīng)成功地從外部 API 獲取數(shù)據(jù)，并將其顯示在網(wǎng)頁上。接下來，我們將進一步拓展這個項目，展示如何在地圖上實時顯示國際空間站的位置。
原文引自YouTube視頻：https://www.youtube.com/watch?v=uxf0–uiX0I
