利用Vue 3和Axios从第三方API获取异步数据并展示

在前端开发中，从第三方 API 获取数据并动态展示黑白常常见且重要的需求之一。今天我们将深入探讨怎样利用 Vue 3 和 Axios 从第三方 API 获取异步数据并将其展示在页面上。通过这个例子，你将了解怎样在 Vue 3 中集成 Axios，怎样进行异步请求，以及怎样动态地将数据绑定到模板以实现实时内容更新。
前置条件

在开始之前，请确保你已经具备以下条件：

• 安装了 Node.js 和 npm。
  
• 基本了解 Vue.js 和 JavaScript。
  

创建一个新的 Vue 3 项目

起首，我们需要创建一个新的 Vue 3 项目。假如你还没有安装 Vue CLI，可以利用以下下令进行安装：

1. npm install -g @vue/cli

复制代码

安装完成后，利用以下下令创建一个新的 Vue 项目：

1. vue create vue-axios-demo

复制代码

选择默认配置或根据需求自界说配置。创建项目后，进入项目目录：

1. cd vue-axios-demo

复制代码

安装 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发出 HTTP 请求。我们需要在项目中安装 Axios：

1. npm install axios

复制代码

项目布局

项目标基础布局如下：

1. vue-axios-demo
2. ├── node_modules
3. ├── public
4. ├── src
5. │   ├── assets
6. │   ├── components
7. │   ├── views
8. │   ├── App.vue
9. │   ├── main.js
10. ├── .gitignore
11. ├── babel.config.js
12. ├── package.json
13. ├── README.md
14. └── vue.config.js

复制代码

创建组件

在 src/components 目录下创建一个新的组件文件 DataFetcher.vue，这个组件将用于从第三方 API 获取数据并展示。
文件内容如下：

1. <template>
2.   <div class="data-fetcher">
3.     <h1>Data from Third-Party API</h1>
4.     <div v-if="loading">Loading...</div>
5.     <div v-if="error">{{ error }}</div>
6.     <ul v-if="data">
7.       <li v-for="item in data" :key="item.id">{{ item.name }}</li>
8.     </ul>
9.   </div>
10. </template>
12. <script>
13. import axios from 'axios';
15. export default {
16.   name: 'DataFetcher',
17.   data() {
18.     return {
19.       data: null,
20.       loading: true,
21.       error: null,
22.     };
23.   },
24.   created() {
25.     this.fetchData();
26.   },
27.   methods: {
28.     async fetchData() {
29.       try {
30.         const response = await axios.get('https://api.exapmle.com/data'); // 替换为实际API地址
31.         this.data = response.data;
32.       } catch (err) {
33.         this.error = 'Failed to load data';
34.       } finally {
35.         this.loading = false;
36.       }
37.     },
38.   },
39. };
40. </script>
42. <style scoped>
43. .data-fetcher {
44.   padding: 20px;
45. }
47. .loading {
48.   font-size: 1.5em;
49.   color: #666;
50. }
52. .error {
53.   color: red;
54. }
56. ul {
57.   list-style-type: none;
58.   padding: 0;
59. }
61. li {
62.   background: #f4f4f4;
63.   margin: 10px 0;
64.   padding: 10px;
65.   border-radius: 4px;
66. }
67. </style>

复制代码

更新主应用组件

如今，我们需要将创建的 DataFetcher 组件添加到我们的主应用组件 App.vue 中。
更新 src/App.vue 文件如下：

1. <template>
2.   <div id="app">
3.     <DataFetcher />
4.   </div>
5. </template>
7. <script>
8. import DataFetcher from './components/DataFetcher.vue';
10. export default {
11.   name: 'App',
12.   components: {
13.     DataFetcher,
14.   },
15. };
16. </script>
18. <style>
19. #app {
20.   font-family: Avenir, Helvetica, Arial, sans-serif;
21.   -webkit-font-smoothing: antialiased;
22.   -moz-osx-font-smoothing: grayscale;
23.   text-align: center;
24.   color: #2c3e50;
25.   margin-top: 60px;
26. }
27. </style>

复制代码

运行项目

一切就绪之后，可以运行项目，查看效果：

1. npm run serve

复制代码

打开浏览器，访问 http://localhost:8080，你应该会看到从第三方 API 获取的动态数据。
解释代码

• 模板部门（template）:
  
  
  
  • 利用 v-if 指令条件性地渲染内容。<div v-if="loading"> 仅在加载数据时体现。
    
  • 展示错误信息时利用 <div v-if="error">{{ error }}</div>。
    
  • 利用 v-if 指令检查数据是否存在，并利用 v-for 指令循环渲染数据列表。
    
  
  
• 数据部门（data）:
  
  
  
  • 界说了三个数据属性：data 用于存储从 API 获取的数据，loading 表示加载状态，error 用于存储错误信息。
    
  
  
• 生命周期钩子（created）:
  
  
  
  • 在组件创建时，调用 fetchData 方法获取数据。
    
  
  
• 方法部门（methods）:
  
  
  
  • fetchData 方法利用了 async/await 语法进行异步数据请求。
    
  • 利用 Axios 的 get 方法发送 HTTP GET 请求以获取数据。
    
  • 请求乐成时将响应数据存储到 data 属性中。
    
  • 请求失败时，将错误信息存储到 error 属性。
    
  • 最后，无论请求乐成或失败，都将 loading 设置为 false 以停止加载状态。
    
  
  

总结

通过本文，我们实现了利用 Vue 3 和 Axios 从第三方 API 获取异步数据并展示。在前端开发中，把握从 API 获取数据并渲染到页面黑白常重要的技能。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。