[Vue3] 在Vue3中封装axios

作者：admin，发布日期：2021-06-20
阅读：2025；评论：0

写在开头

vue3中新增了Composition Api，可以使用setup()函数来对组件进行初始化，但是在setup()函数中是无法直接获取的this的，这也就意味着我们无法通过this.$axios的方式来调用axios，在这里我们将对其进行封装，把接口统一抽离成一个文件 ，方便开发以及后期的维护。

安装axios

yarn add axios

配置

在src/utils下创建request.js，对axios进行配置

import axios from "axios";

// 初始化一些参数
const service = axios.create({
  baseURL: "/api",
});
// 下面可以添加拦截器

export default service;

然后在同目录下新建api.js，里面写上我们用到的接口

import service from "./request";

export function getPhysicalServer(id) {
  return service.get("/physicalServers/get", {
    params: {
      id,
    },
  });
}

一般为了解决跨域问题，我们还要配置开发代理服务器，在vite.config.js中配置以下内容

  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8080/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

位置参考以下图片：

测试

编写一个组件，获取内容后输出到控制台

<template>this is a home page</template>

<script>
import { defineComponent } from "vue";
import { getPhysicalServer } from "../utils/api";

export default defineComponent({
  setup() {
    getPhysicalServer(2).then((res) => {
      console.log(res.data);
    });
  },
});
</script>

可以发现，数据获取成功，表明代码可用