vue3 axios二次封装使用

在Vue3中，对axios进行二次封装的步骤如下：

1. 首先，你需要在你的项目中安装axios。可以使用以下命令进行安装：npm i axios -S。

2. 在Vue项目中，新建一个文件夹，例如utils，然后在该文件夹下新建一个js文件，例如request.js。

3. 在request.js文件中，导入axios和Vue，并且进行axios的二次封装。

   import axios from "axios";
   import Vue from "vue";

   // 对axios进行二次封装
   const request = axios.create({
     baseURL: "http://localhost:8080", // 设置默认请求域名
     timeout: 5000, // 设置请求超时时间，请求5秒还没完成就返回失败
   });

   // 对请求进行拦截，添加加载提示
   request.interceptors.request.use(function (config) {
     Vue.$toast.show("加载中...", 5000); // 显示加载提示
     return config;
   });

   // 对响应进行拦截，关闭加载提示
   request.interceptors.response.use(
     function (res) {
       Vue.$toast.hide(); // 请求结束，关闭加载提示
       return res;
     },
     function (err) {
       Vue.$toast.hide();
       return err;
     }
   );

   export default request;

4. 然后，你可以在Vue组件中使用封装后的axios实例来发送请求了。

   import request from "@/utils/request";

   // 在某个方法中发送请求
   request.get("/api/data")
     .then(response => {
       // 处理响应数据
     })
     .catch(error => {
       // 处理错误
     });