vue3监听和不能使用this问题，uniapp封装请求

http.js

// 格式化日期函数
export function request(method,url, data) {
    const urls = "http://183.6.96.231:29101";
	const username = uni.getStorageSync('username');
	const token = uni.getStorageSync('token');
   	uni.showLoading({
   		title:'加载中...'
   	});
	const t = Date.parse(new Date()) / 1000;//时间戳
   	return new Promise((resolve, reject) => {
   		uni.request({
   			method: method,
   			url: urls+url+"?t="+t,
   			data: data,
			header: {
				'token': token,
				'user': username,
			},
   			async: false,
   			success(res) {
				uni.hideLoading()
   				resolve(res)
				if(res.data.code == 2006){
					uni.reLaunch({
						url: '/pages/login/login'
					});
					console.log("效验失败，重新登录")
					return true
				}
   			},
   			fail(err) {
   				reject(err);
   				uni.showToast({
   					title: '请求失败',
   					icon: 'none',
   					duration: 1500,
   				})
   				uni.hideLoading()
   			}
   		})
   	})
}

// 导出函数
// export default {request};

main.js

import App from './App'

// #ifndef VUE3
// import Vue from 'vue'
// import './uni.promisify.adaptor'
// Vue.config.productionTip = false
// App.mpType = 'app'

// import store from "./store/index.js"
// Vue.prototype.$store = store
// import {createSSRApp} from 'vue'
// import Vuex from "vuex";

// const app = new Vue({
//   ...App,
//   store
// })
// app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import uviewPlus from '@/uni_modules/uview-plus'
import store from "./store/index.js"
// 全局引入
// import tabbar from '@/components/tabbar.vue';
import {request} from '@/utils/http.js'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  app.use(uviewPlus)
  // app.component('tabbar', tabbar)
  app.config.globalProperties.$http = request
  return {
    app
  }
}
// #endif

1、使用

<template>
	<view style="width: 650rpx;margin-left: 50rpx;margin-top: 30vh;">
		<view class="uni-list-cell-db">
			<u-picker :show="show" :columns="options" @confirm="confirm" @cancel="cancel"></u-picker>
			<view @click="show = true">
				<u-input v-model="form.db" placeholder="套装" border="surround" :readonly="true"></u-input>
			</view>
		</view>
		<view style="margin-top: 20rpx;">
			<u-input v-model="form.user" placeholder="账号" border="surround" clearable></u-input>
		</view>
		<view style="margin-top: 20rpx;">
			<u-input v-model="form.pwd" placeholder="密码" border="surround" clearable password></u-input>
		</view>
		<view style="margin-top: 20rpx;">
			<u-button @click="submit" type="primary" text="确定登录"></u-button>
		</view>
	</view>
</template>

<script setup>
import {ref,reactive,getCurrentInstance,watch} from 'vue';
	//this更会为proxy
	const { proxy } = getCurrentInstance();
	// console.log(proxy.$store.state.tabbar)
	const options = reactive([['wbrj_123']]);
	const show = ref(false)
	const form = reactive({
		'db': 'wbrj_123',
		'user': 'admin',
		'pwd': '123456'
	})
	// 监听对象使用reactive
	watch(form,(newValue,oldValue)=>{
	  console.log(form);
	})
	
	// 监听字符串，可以使用ref
	const dade = ref(0)
	watch(dade,(newValue,oldValue)=>{
	  console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
	})
	
	// 点击登录
	const submit = ()=>{
		proxy.$http("POST", "/main/admin/login", form.value).then(req => {
			if (req.data.code == 2000) {
				// console.log(req.data.data)
				uni.setStorageSync('username', req.data.data.username);
				uni.setStorageSync('token', req.data.data.token);
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		})
	}
	const dbClick = ()=>{
		show.value = true
	}
	
	// 点击确定
	const confirm = (e)=>{
		form.value.db = e.value[0]
		show.value = false
	}
	// 点击关闭
	const cancel = (e)=>{
		show.value = false
	}
	
	
</script>


<style scoped lang="scss">
	.u-card-wrap {
		background-color: #000;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>