vue3 全局绑定$http请求

最新推荐文章于 2024-04-27 02:15:09 发布

Lucky_zss

最新推荐文章于 2024-04-27 02:15:09 发布

阅读量237

点赞数 1

文章标签： http 网络协议网络

本文链接：https://blog.csdn.net/zss_base/article/details/137541179

版权

main.js


import http from './utils/http'


import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

import App from './App.vue'
import router from './router'



const app = createApp(App)
// 全局绑定http请求
app.config.globalProperties.$http = http

页面获取实例

const {appContext}  =  getCurrentInstance()
console.log(appContext);
const globalProxy = appContext.config.globalProperties



使用全局绑定的$http
const onFinish = (values: any) => {
  const { username, password } = formState;

  globalProxy.$http.post('http://localhost:5000/api/v1/login',{username:username,password:password}).then((res)=>{
    console.log(res);
    if(res.data.code === 0){
      localStorage.setItem('userInfo',JSON.stringify(res.data.data))
      globalProxy.$message.success({
        content:'登录成功',
        duration:2,
        onClose:()=>{
           router.push("/");
        }
      })
    }else{
      globalProxy.$message.error({
        content:res.data.msg,
        duration:3,
        onClose:()=>{
          formRef.value.resetFields()
        }
      });
      
    }
    
  })
}