【学习总结|DAY06】DAY05前端Web-Vue/Ajax基础知识应用练习二：使用 Vue.js 和 Axios 获取文章数据

最新推荐文章于 2025-12-11 20:14:34 发布

原创最新推荐文章于 2025-12-11 20:14:34 发布 · 612 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #vue.js #ajax #javascript

练习描述：使用 Vue.js 结合 Axios 来从 API 获取文章数据。

一、主要代码：

<script type="module">
        /* 导入 Vue 3 和 Axios */
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        /* 定义 Vue 实例对象 */
        createApp({
            data() {
                return {
                    articles: [], // 存放文章数据
                    errorMessage: '' // 存放错误信息
                };
            },
            methods: {
                async fetchArticles() {
                    this.errorMessage = ''; // 清空之前的错误信息
                    try {
                        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
                        this.articles = response.data; // 获取文章数据
                    } catch (error) {
                        this.errorMessage = '获取文章出错: ' + error.message; // 处理错误
                    }
                }
            }
        }).mount("#app");

二、代码解释

1. Vue 应用的创建

createApp({
    data() {
        return {
            articles: [], // 存放文章数据
            errorMessage: '' // 存放错误信息
        };
    },
    // ...
});

DiffCopyInsert

在这段代码中，我们使用 createApp 创建了一个 Vue 应用。在 data 函数中，定义了两个响应式数据：

articles: 用于存储从 API 获取的文章数据，初始为空数组。
errorMessage: 用于存放可能发生的错误信息，初始为空字符串。

2. 定义方法

接下来，我们为 Vue 应用定义了一个名为 fetchArticles 的异步方法：

methods: {
    async fetchArticles() {
        this.errorMessage = ''; // 清空之前的错误信息
        try {
            const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
            this.articles = response.data; // 获取文章数据
        } catch (error) {
            this.errorMessage = '获取文章出错: ' + error.message; // 处理错误
        }
    }
}

DiffCopyInsert

fetchArticles 方法详解

清空错误信息: 在调用该方法时，首先将 errorMessage 清空，以确保前一次的错误不会影响当前的反馈。
发送请求: axios.get 用于向指定的 API 发送 GET 请求。这里，我们使用的是一个公共的 JSON Placeholder API，它提供了一些示例数据。
处理响应: 如果请求成功，响应的数据将被赋值给 articles，即将获取到的文章数据存储在 articles 数组中。
错误处理: 如果请求失败，catch 块会捕获错误并将错误信息赋值给 errorMessage，这样用户能够了解到问题所在。

3. 如何使用该代码

本段代码可以嵌入到一个 Vue 应用中的组件中，结合 Vue 的模板语法，你可以在页面上展示获取到的文章数据，并在请求失败时显示错误信息。

例如，你可以在模板中使用 v-for 指令来循环遍历 articles 并展示：

<div v-if="errorMessage">{{ errorMessage }}</div>
<div v-for="article in articles" :key="article.id">
    <h2>{{ article.title }}</h2>
    <p>{{ article.body }}</p>
</div>

三、效果展示

点击按钮获取数据