vue3 axios封装

在Vue 3中使用Axios进行网络请求的封装可以按照以下步骤进行：

1. 首先，在你的项目中安装Axios。你可以使用npm或者yarn进行安装：

npm install axios

或者

yarn add axios

2. 创建一个`api.js`文件或者类似的命名文件，用于封装Axios请求。在该文件中，你可以定义各种请求方法，例如`get`、`post`、`put`、`delete`等。

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://your-api-url.com', // 设置接口的基本地址
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头类型
  },
});

export default {
  get(url, params) {
    return api.get(url, { params });
  },
  
  post(url, data) {
    return api.post(url, data);
  },
  
  put(url, data) {
    return api.put(url, data);
  },
  
  delete(url) {
    return api.delete(url);
  },
};

3. 在需要发送网络请求的Vue组件中导入封装好的`api.js`文件，并使用相关的请求方法发送请求。

import api from './api.js';

export default {
  methods: {
    async fetchData() {
      try {
        const response = await api.get('/your-api-endpoint');
        // 处理请求成功的响应数据
        console.log(response.data);
      } catch (error) {
        // 处理请求失败的错误
        console.error(error);
      }
    },
  },
};

这样就完成了Vue 3中使用Axios进行网络请求的封装。你可以根据实际需求进一步扩展API封装，例如添加拦截器、处理请求错误等。