用vue.js和Axios獲取第三方API的數據

>本教程演示了使用vue.js和《紐約時報》 API構建一個簡單的新聞應用程序。 該應用顯示頂級新聞文章，並允許按類別進行過濾。

>>先決條件：>）和基本vue.js知識。 npm i -g yarn

密鑰步驟：

1. 項目設置：使用VITE創建VUE 3項目：。 導航到項目目錄（）並安裝依賴項（yarn create @vitejs/app vue-news-app --template vue）。 cd vue-news-app> yarn install

2. api鍵：

   >從其註冊頁面獲取紐約時報API密鑰。

>
3. >樣式：

   安裝尾風CSS：。初始化尾風：。安裝線路夾插件：。配置yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest（請參閱原始詳細信息）並創建npx tailwindcss init -p（請參閱原始詳細信息）。 yarn add @tailwindcss/line-clamp tailwind.config.js index.css

應用程序佈局：創建

，和組件（請參閱原始代碼）。更新Layout.vue用於使用這些組件。 Header.vue Footer.vue App.vue

>數據處理：創建

（可選，用於初始測試）。 創建，和src/posts.json>組件（請參閱原始代碼）。更新NewsCard.vue包括這些組件。 NewsList.vue> NewsFilter.vue App.vue

4. 安裝axios：。 將您的API鍵存儲在>文件中（例如，）。 更新yarn add axios使用Axios從NYTIMES API獲取數據（有關詳細代碼，請參見原始代碼）。 這包括錯誤處理和數據轉換。 修改.env以觸發API調用（有關更改，請參見原始）。 VITE_NYT_API_KEY=YOUR_API_KEY App.vue NewsFilter.vue

   最終觸摸：
（可選）添加加載指示器或其他增強功能。

5. 示例api調用：

>

<code>https://api.nytimes.com/svc/topstories/v2/arts.json?api-key=YOUR_API_KEY
https://api.nytimes.com/svc/topstories/v2/home.json?api-key=YOUR_API_KEY</code>

完整代碼：在GitHub上可用（原始鏈接提供）。 還提供了一個stackblitz演示（功能有限）（原始提供的鏈接）。

>

常見問題解答：（有關vue.js上的詳細常見問題，請參見原始，從API和JSON獲取數據，以及vue.js中的API調用的最佳實踐）

）

此重寫的響應在簡化語言和結構的同時維護核心信息，使其更簡潔，更容易遵循。 圖像URL被保留。

以上是用vue.js和Axios獲取第三方API的數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！