Vue3 Axios封装

在Vue3项目中，Axios是一个非常流行的用于处理HTTP请求的库。为了更好地管理和组织我们的代码，封装Axios是一种常见的做法，这样不仅可以提高代码的可重用性，还能够方便后期的维护。本文将详细介绍如何在Vue3中封装Axios，并提供实际的代码示例。

一、安装Axios

首先，我们需要在Vue3项目中安装Axios。可以使用npm或yarn进行安装。打开终端，在项目根目录下执行以下命令：

npm install axios

或

yarn add axios

二、创建Axios封装文件

接下来，在src目录下创建一个名为http.js的文件，这个文件将负责我们的Axios封装。在里面，我们将配置Axios的默认参数（如基础URL、请求超时等）和请求拦截器、响应拦截器来统一处理请求和响应。

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

// 创建Axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的API基础URL
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
instance.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);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据进行处理
    return response.data; // 只返回数据部分
  },
  error => {
    // 统一处理错误
    return Promise.reject(error.response ? error.response.data : error);
  }
);

// 导出封装的Axios实例
export default instance;

三、在Vue组件中使用Axios

现在，我们可以在Vue组件中使用这个封装好的Axios实例了。以下是一个简单的示例，展示如何在Vue组件中进行GET和POST请求。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="fetchData">获取数据</button>
    <button @click="sendData">发送数据</button>
  </div>
</template>

<script>
import http from '../http'; // 导入封装的Axios实例

export default {
  data() {
    return {
      title: 'Axios封装示例',
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await http.get('/data'); // 替换为你的API接口
        console.log('获取的数据:', response);
      } catch (error) {
        console.error('获取数据时出错:', error);
      }
    },
    async sendData() {
      try {
        const response = await http.post('/data', { name: 'Vue3' }); // 替换为你的API接口
        console.log('发送的数据:', response);
      } catch (error) {
        console.error('发送数据时出错:', error);
      }
    },
  },
};
</script>

<style scoped>
/* 添加样式 */
</style>

四、总结

通过以上步骤，我们在Vue3项目中成功地封装了Axios，使得网络请求的管理变得更加高效。这种封装不仅能够让我们集中配置各种请求参数，还能统一处理请求和响应，提升代码的可读性和可维护性。通过使用拦截器，我们还可以轻松处理身份验证、错误提示等全局需求。

在实际开发中，开发者可以根据项目的需要，进一步扩展和优化Axios的封装逻辑，比如添加更多的请求与响应拦截器，处理不同的HTTP状态码，或是集成其他的工具库，如Vuex等。总之，Axios封装是一个提升开发效率的好方法，值得在每个项目中进行实践。