作者:admin,发布日期:2021-06-20
阅读:368;评论: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/, ""),
      },
    },
  },

位置参考以下图片:

Snipaste_2021-06-20_11-19-27.jpg

测试

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

<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>

Snipaste_2021-06-20_11-18-25.jpg

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

评论区

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。