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

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

前置条件

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

1. 安装了 Node.js 和 npm。
2. 基本了解 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 获取的动态数据。

解释代码

1. 模板部分（template）:

   • 使用 v-if 指令条件性地渲染内容。<div v-if="loading"> 仅在加载数据时显示。
   • 展示错误信息时使用 <div v-if="error">{{ error }}</div>。
   • 使用 v-if 指令检查数据是否存在，并使用 v-for 指令循环渲染数据列表。

2. 数据部分（data）:

   • 定义了三个数据属性：data 用于存储从 API 获取的数据，loading 表示加载状态，error 用于存储错误信息。

3. 生命周期钩子（created）:

   • 在组件创建时，调用 fetchData 方法获取数据。

4. 方法部分（methods）:

   • fetchData 方法使用了 async/await 语法进行异步数据请求。
   • 使用 Axios 的 get 方法发送 HTTP GET 请求以获取数据。
   • 请求成功时将响应数据存储到 data 属性中。
   • 请求失败时，将错误信息存储到 error 属性。
   • 最后，无论请求成功或失败，都将 loading 设置为 false 以停止加载状态。

总结

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

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