vue3+vite 封装axios请求

安装axios

npm install axios

创建axios实例

/utils/request

import axios from "axios";
const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API as string,//接口统一域名
  timeout: 6000, //设置超时
  headers: {
    'Content-Type': 'application/json;charset=UTF-8;',
  }
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;

    return response.data;
  },
  (error) => {
    /* Message({
      message: '服务器调用错误',
      type: 'error',
      duration: 5 * 1000
    }) */
    console.log("服务器调用错误");

    return Promise.reject(error);
  }
);
export default service;

封装请求接口

utils/home.ts

import request from '@/utils/request'
export class Home {
  /*搜索*/
  async getCurriculumsList(data:any) {
    let requestData: any = await request({
      url: "/api/xxxxxx",
      method: 'POST',
      data: data
    })
    return requestData
  }

}

 

vue中调用

home.vue

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import { Home } from "@/utils/home";
export default defineComponent({
  name: 'home',
  components: {},
  setup() {
    const home = new Home();
    const state = reactive({
      data: {}
    });
    // 页面加载时
    onMounted(() => {
      home.homeList().then(res => {
        console.log(res)
      });
    });
    return {
      ...toRefs(state),
    };
  }
})
</script>

---

参考文章：vue3+vite 封装axios请求 - 简书