API

了解這個由 Next.js 提供的強大技術，用於在 Next.js 應用程序中創建 API 端點。 除了創建頁面路由（意味著頁面作為 Web 頁面提供給瀏覽器），Next.js 還可以創建API 路由。 這是一個非常有趣的功能，因為這意味著 Next.js 可以用於創建存儲在 Next.js 中並通過 fetch 請求傳輸 JSON 的數據的前端。 API 路由位於 /pages/api/ 文件夾下，並且與 /api 端點相映射。 這個功能在創建應用程序時非常有用。 在這些路由中，我們編寫的是 Node.js 代碼（而不是 React 代碼）。這是一個範式轉變，你從前端轉向後端，但非常平滑。 假如你有一個 /pages/api/comments.js 文件，它的目標是以 JSON 的形式返回博客文章的評論。 假如你有一個存儲在 comments.json 文件中的評論列表： [ { "comment": "第一條" }, { "comment": "好文章" } ] 下面是一個示例代碼，返回評論列表給客戶端： import comments from './comments.json' export default (req, res) => { res.status(200).json(comments) } 它將在 /api/comments URL 上聽取 GET 請求，你可以使用瀏覽器來調用它：...

使用地理定位 API 我們可以向瀏覽器請求使用者的位置座標。 瀏覽器提供了一個 navigator.geolocation 對象，通過這個對象我們可以執行所有的地理定位操作。 由於安全性考慮，地理定位 API 只在使用 HTTPS 服務的頁面上可用，並且在所有現代瀏覽器上都可用。 navigator.geolocation 由於 window 是全局對象，我們可以直接訪問 navigator 而無需指定 window.navigator。 瀏覽器提供的 window.navigator 屬性指向一個名為 Navigator 對象 的容器對象，它使我們能夠使用許多 Web 平台 API。 geolocation 對象提供了以下方法： getCurrentPosition() watchPosition() clearWatch() 第一個方法用於獲取當前的位置座標。當我們第一次調用此方法時，瀏覽器會自動要求用戶允許我們訪問此信息。以下是在 Chrome、Firefox 和 Safari 上展示此界面的示例： 此操作只需在每個來源上執行一次。您可以更改您的決定，並撤消權限決策。以下示例演示如何在 Chrome 上進行更改： 一旦授予此權限，我們就可以繼續操作。 獲取使用者的位置 讓我們從以下示例代碼開始： navigator.geolocation.getCurrentPosition(() => {}) 應該會彈出權限窗格，請允許權限。 請注意，我傳遞了一個空的箭頭函數（arrow function），因為該函數需要一個回調函數。 此函數接收一個包含實際位置信息的 Position 對象： navigator.geolocation.getCurrentPosition(position => { console.log(position) }) 此對象具有2個屬性： coords，一個 Coordinates 對象 timestamp，獲取位置時的 UNIX 時間戳 Coordinates 對象具有幾個定義位置的屬性： accuracy，位置測量值的精確度，以米為單位。 altitude，測量的高度值。 altitudeAccuracy，高度測量精確度，以米為單位。 heading，設備行進的方向。以度為單位表示（0 = 北，90 = 東，180 = 南，270 = 西）。 latitude，測量的緯度值。 longitude，測量的經度值。 speed，設備行進的速度，以米/秒為單位。 根據不同的實現和設備，其中一些屬性可能為 null。例如，在我的 MacBook Air 上運行的 Chrome 上，我只獲得了 accuracy、latitude 和 longitude 的值。...

我有一個循環，在該循環中我想要調用一個API多次，例如500次。 API實現了速率限制，即使沒有實現，很快地發送這麼多請求也是不友善的。 所以我想要減慢循環的速度。那該怎麼做？ 事實上，這是相當簡單的，一旦你設置了一個sleep()函數，你就不需要進行更改： const sleep = (milliseconds) => { return new Promise(resolve => setTimeout(resolve, milliseconds)) } 然後你可以在每次迭代中調用await sleep(1000)來暫停1秒，像這樣： const list = [1, 2, 3, 4] const doSomething = async () => { for (const item of list) { await sleep(1000) console.log('🦄') } } doSomething()

學習使用廣播頻道 API 進行一對多通訊的基礎知識 通道訊息 API 是一個很好的方式，可以從視窗發送訊息到 iframe，從視窗發送訊息到 Web Worker 等等。 廣播頻道 API 可以用於發送一對多訊息，同時與多個實體進行通訊。 你可以通過初始化一個 BroadcastChannel 物件來開始： const channel = new BroadcastChannel('thechannel'); 要在頻道上發送訊息，可以使用 postMessage() 方法： channel.postMessage('嘿！'); 訊息可以是以下任何支援的值： 所有的基元類型，除了符號類型 數組 物件字面量 字串、日期、正則表達式 物件 Blob、File、FileList 物件 ArrayBuffer、ArrayBufferView 物件 FormData 物件 ImageData 物件 Map 和 Set 物件 要從頻道接收訊息，可以監聽 message 事件： channel.onmessage = (event) => { console.log('接收到的訊息：', event.data); }; 除了發送訊息的來源外，此事件將針對所有聽眾觸發。 你可以使用以下方法關閉頻道： channel.close();