用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中文网其他相关文章！