Vue 3与Axios集成：RESTful API数据获取与错误处理

Vue 3 是一个现代化的前端框架，而 Axios 是一个基于 Promise 的 HTTP 客户端，它允许我们轻松地与 RESTful API 进行交互。在本文中，我们将探讨如何将 Vue 3 和 Axios 集成起来，实现从 RESTful API 获取数据以及处理错误的功能。

1. 环境准备

首先，确保你的开发环境已经安装了 Node.js 和 npm/yarn。然后创建一个新的 Vue 3 项目：

npm install -g @vue/cli
vue create vue-axios-demo

进入项目目录并安装 Axios：

cd vue-axios-demo
npm install axios

2. 使用 Axios 获取数据

2.1 创建服务层

为了保持代码的清晰和可维护性，我们可以创建一个专门的服务文件来封装 Axios 请求。在 src 目录下创建一个名为 api.js 的文件：

import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com', // 替换为你的API地址
    timeout: 1000,
    headers: {'Content-Type': 'application/json'}
});

export default {
    getPosts() {
        return apiClient.get('/posts');
    },
    getPost(id) {
        return apiClient.get(`/posts/${id}`);
    }
}

2.2 在组件中使用服务

接下来，在 Vue 组件中使用这个服务。例如，在 Home.vue 中获取所有帖子：

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import api from '@/api.js';

export default {
  data() {
    return {
      posts: []
    };
  },
  async created() {
    try {
      const response = await api.getPosts();
      this.posts = response.data;
    } catch (error) {
      console.error('There was an error fetching the posts!', error);
    }
  }
};
</script>

3. 错误处理

在实际应用中，网络请求可能会失败。我们需要优雅地处理这些错误，并给用户提供友好的反馈。

3.1 全局错误拦截器

Axios 提供了拦截器功能，可以用来统一处理请求和响应。我们在 api.js 中添加错误拦截器：

apiClient.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            // 服务器返回了状态码，但不是2xx范围
            console.error('Error:', error.response.data);
            console.error('Status Code:', error.response.status);
        } else if (error.request) {
            // 请求已发出，但没有收到响应
            console.error('No response received:', error.request);
        } else {
            // 设置请求时发生了一些事情，触发了错误
            console.error('Error', error.message);
        }
        return Promise.reject(error);
    }
);

3.2 组件级错误处理

除了全局错误处理，我们还可以在组件内进行更具体的错误处理。例如，在 Home.vue 中显示错误消息：

<template>
  <div>
    <h1>Posts</h1>
    <p v-if="error">{{ error }}</p>
    <ul v-else>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import api from '@/api.js';

export default {
  data() {
    return {
      posts: [],
      error: ''
    };
  },
  async created() {
    try {
      const response = await api.getPosts();
      this.posts = response.data;
    } catch (error) {
      this.error = 'An error occurred while fetching the posts.';
    }
  }
};
</script>

4. 流程图：数据获取与错误处理流程

以下是数据获取与错误处理的整体流程图：

sequenceDiagram
    participant User
    participant VueComponent
    participant Axios
    participant API

    Note over User,VueComponent: 页面加载
    VueComponent->>Axios: 调用getPosts()
    Axios->>API: 发送GET请求
    alt 请求成功
        API-->>Axios: 返回数据
        Axios-->>VueComponent: 更新posts数组
        VueComponent-->>User: 渲染帖子列表
    else 请求失败
        API-->>Axios: 返回错误信息
        Axios-->>VueComponent: 触发catch块
        VueComponent-->>User: 显示错误信息
    end