ToB企服应用市场:ToB评测及商务社交产业平台

标题: 利用Vue 3和Axios从第三方API获取异步数据并展示 [打印本页]

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

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

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

创建一个新的 Vue 3 项目

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

npm install -g @vue/cli

复制代码

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

vue create vue-axios-demo

复制代码

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

cd vue-axios-demo

复制代码

安装 Axios

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

npm install axios

复制代码

项目布局

项目标基础布局如下：

vue-axios-demo
├── node_modules
├── public
├── src
│ ├── assets
│ ├── components
│ ├── views
│ ├── App.vue
│ ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

复制代码

创建组件

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

<template>
<div class="data-fetcher">
<h1>Data from Third-Party API</h1>
<div v-if="loading">Loading...</div>
<div v-if="error">{{ error }}</div>
<ul v-if="data">
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'DataFetcher',
data() {
return {
data: null,
loading: true,
error: null,
};
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
try {
const response = await axios.get('https://api.exapmle.com/data'); // 替换为实际API地址
this.data = response.data;
} catch (err) {
this.error = 'Failed to load data';
} finally {
this.loading = false;
}
},
},
};
</script>
<style scoped>
.data-fetcher {
padding: 20px;
}
.loading {
font-size: 1.5em;
color: #666;
}
.error {
color: red;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #f4f4f4;
margin: 10px 0;
padding: 10px;
border-radius: 4px;
}
</style>

复制代码

更新主应用组件

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

<template>
<div id="app">
<DataFetcher />
</div>
</template>
<script>
import DataFetcher from './components/DataFetcher.vue';
export default {
name: 'App',
components: {
DataFetcher,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

复制代码

运行项目

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

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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)