vue3 整合 axios

Vue 3 与 Axios 的整合使用

Vue.js 是一个用于构建用户界面的渐进式框架，而 Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。将这两个强大的工具结合使用，可以有效地处理 API 请求和响应数据，提高开发效率。本文将详细介绍如何在 Vue 3 中整合 Axios，并通过示例帮助你快速上手。

1. 安装 Axios

首先，你需要在你的 Vue 3 项目中安装 Axios。在项目的根目录中打开终端，执行以下命令：

npm install axios

安装完成后，Axios 就被成功添加到你的项目中。

2. 创建 Axios 实例

为了更好地管理 API 请求，我们可以创建一个 Axios 实例。这使得我们能够集中配置请求的基本信息，比如基础 URL、请求头和超时时间等。

在你的 src 目录下创建一个名为 axiosInstance.js 的文件，并写入以下代码：

// src/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: ' // 这里替换为你的 API 基础 URL
  timeout: 10000, // 设置请求超时时间为 10 秒
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在请求发送之前做某件事，例如添加 token
    const token = localStorage.getItem('token'); // 假设 token 存储在 localStorage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据做某些处理
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

这里我们设置了基本的 HTTP 请求配置，并添加了请求和响应拦截器，以便在请求中自动带上 token，并处理响应数据的格式。

3. 在 Vue 3 组件中使用 Axios

在 Vue 3 中，你可以在组件的 setup 函数中使用 Axios。这里我们提供一个示例组件，展示了如何发起 GET 请求和 POST 请求。

<template>
  <div>
    用户信息
    <button @click="fetchUserData">获取用户数据</button>
    <pre v-if="userData">{{ userData }}</pre>

    <h2>更新用户信息</h2>
    <form @submit.prevent="updateUserData">
      <input v-model="newUserData.name" placeholder="姓名" />
      <input v-model="newUserData.email" placeholder="邮箱" />
      <button type="submit">更新信息</button>
    </form>
  </div>
</template>

<script>
import axiosInstance from '@/axiosInstance';

export default {
  data() {
    return {
      userData: null,
      newUserData: {
        name: '',
        email: '',
      },
    };
  },
  methods: {
    async fetchUserData() {
      try {
        const response = await axiosInstance.get('/user'); // 替换为你的 API 路径
        this.userData = response; // 将获取的用户数据存入 userData
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    },
    async updateUserData() {
      try {
        await axiosInstance.put('/user', this.newUserData); // 替换为你的 API 路径
        alert('更新成功');
      } catch (error) {
        console.error('更新用户数据失败:', error);
      }
    },
  },
};
</script>

代码解释

• 数据绑定：使用 v-model 双向绑定用户输入的数据。
• GET 请求：fetchUserData 方法通过 Axios 的 get 方法获取用户数据。
• POST 请求：updateUserData 方法通过 Axios 的 put 方法更新用户信息。

4. 响应处理

在真实开发中，你可能还需要对响应数据进行进一步处理。你可以在响应拦截器中统一处理错误或转化数据格式。

错误处理表格

错误代码	说明	处理建议
400	请求参数错误	提示用户检查输入
401	未授权	跳转到登录页面
404	请求的资源未找到	显示404页面或提示
500	服务器内部错误	显示友好的错误提示

示例：扩展错误处理

在 axiosInstance.js 的响应拦截器中，你可以添加更详细的错误处理逻辑：

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    const status = error.response ? error.response.status : null;
    switch (status) {
      case 400:
        alert('请求参数错误，请检查输入！');
        break;
      case 401:
        alert('未授权，请登录后重试！');
        break;
      case 404:
        alert('请求的资源未找到！');
        break;
      case 500:
        alert('服务器内部错误，请稍后再试！');
        break;
      default:
        alert('发生未知错误！');
    }
    return Promise.reject(error);
  }
);

5. 总结

在这篇文章中，我们介绍了如何在 Vue 3 中整合 Axios，创建 Axios 实例，以及在组件内部使用 Axios 发起 HTTP 请求。通过这种方式，你可以高效地处理 API 请求，并灵活地管理请求参数和响应数据。我们也探讨了错误处理的重要性，并提供了一些简单的示例。

通过掌握这些基本概念后，你可以根据自己的需求对 Axios 进行更深层次的自定义和扩展。希望这篇文章能够帮助你快速上手 Vue 3 和 Axios 的使用，让你的前端开发之路更加顺畅！