vue3 请求登录接口+请求拦截器

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
import qs from "qs" 
const app = createApp(App)

// 挂载全局对象
app.config.globalProperties.$http = axios 
axios.defaults.baseURL = "http://bufantec.com/api/"

//请求拦截器
axios.interceptors.request.use(config => {
    if (config.method?.toLocaleLowerCase() == "post") {
        config.data = qs.stringify(config.data)
    }
    return config;
}, err => {
    return Promise.reject(err);
})

app.use(store).use(router).mount('#app')

<template>
  <div>账号：<input type="text" v-model="params.userName"></div>
  <div>密码：<input type="password" v-model="params.password"></div>
  <button @click="doLogin">登录</button>
  <hr>
  <p>{{ params }}</p>
</template>

<script>
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    // console.log('proxy', proxy.$http)

    const params = ref({
      userName: "",
      password: ""
    })

    function doLogin() {
      // console.log('账号密码', params.value);
      proxy.$http.post("test/user/doLogin", params.value).then(res => {
        console.log("登录：", res);
      })
    }

    return {
      params,
      doLogin
    }
  }
}
</script>