vue3axios封装与使用

Vue3Axios 是针对 Vue3.x 版本封装的 Axios 库，可以更方便地在 Vue3.x 项目中使用 Axios 进行网络请求。下面我将介绍如何使用 Vue3Axios 进行封装和使用。

## 安装

首先需要安装 Vue3Axios 和 Axios 库：

npm install vue3-axios axios --save

## 封装

在 src 目录下新建一个 api 目录，用于存放我们的接口请求。在该目录下新建一个 index.js 文件，用于封装 Axios。

import axios from "axios";

// 创建 Axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 如果返回的状态码不是 200，说明接口有问题
    if (res.code !== 200) {
      console.log(res.message); // 弹出错误信息
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  error => {
    // 处理响应错误
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

export default service;

这里使用了 Axios 的拦截器，用于处理请求和响应的错误，如果返回的状态码不是 200，则弹出错误信息，否则返回响应的数据。

## 使用

在需要使用接口请求的组件中引入封装好的 Axios：

import request from "@/api/index.js";

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      request({
        url: "/list",
        method: "get",
        params: {
          page: 1,
          limit: 10
        }
      }).then(response => {
        this.list = response.data;
      });
    }
  }
};

这里使用了封装好的 Axios 进行了一个 GET 请求，并将返回的数据绑定到了组件的 list 数据中。

至此，Vue3Axios 的封装和使用就介绍完了。