Vue3引入axios并进行请求处理

1、增加utils目录，并在其它增加一个index.js，详细内容如下：

const baseurl = "http://localhost";

const supportqr = "https://u.wechat.com/EJgrltya_TQ4yOdxXneOoeY";

const api = {

getverify: baseurl + "/base/index/verify",

dologin: baseurl + "/base/index/chklogin",

};

export default { baseurl, supportqr, api };

2、修改main.js，大致内容如下：

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import axios from "axios";

import VueAxios from "vue-axios";

import Layui from "@layui/layui-vue";

import "@layui/layui-vue/lib/index.css";

import http from "./utils/index";

const app = createApp(App);

app.use(VueAxios, axios, http).use(Layui).use(router);

app.provide("axios", axios);

app.provide("http", http);

app.mount("#app");

3、在相应的Vue页面中添加如下代码：

import { ref, reactive, inject, onMounted, onUnmounted } from "vue";

import { useRouter } from "vue-router"

import { layer } from "@layui/layer-vue";

const router = useRouter();

const axios = inject("axios");

const http = inject("http");

4、在该页面定义方法并调用

const loginSubmit = async () => {

loging.value = true;

await axios.post(http.api.dologin, loginForm).then((data) => {

var res = data.data;

layer.msg(res.msg, { icon: res.code == 0 ? 6 : 5 }, function () {

loging.value = false;

});

if (res.code == 0) {

localStorage.setItem("uid", res.data.uid);

localStorage.setItem("token", res.data.token);

router.push({ path: "/Main" });

}

});

return false;

};