为何无法调用我封装的函数？
common/Function.js 文件代码
const BASE_URL = `http://localhost:9090`
export const request = (options) => { // {url: '', method: '', data: {}}
return new Promise((resolve, reject) => {
uni.request({
url: options.url,
method: options.method || 'GET',
header: {token: uni.getStorageSync('user') ? uni.getStorageSync('user').token : ''},
data: options.data || {},
success: (res) => {
const data = res.data
if (data.code === '401') { // 401表示无权限
uni.navigateTo({
url: '/pages/login/login'
})
return
} else if(data.code !== '200') {
uni.showToast({
icon: 'error',
title: '操作错误'
})
}
resolve(data)
},
fail: (error) => {
uni.showToast({
icon: 'error',
title: '系统错误'
})
reject(error)
}
})
})
}
main.js文件代码
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
import {request} from "/common/Function.js";
Vue.prototype.request=request
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
//设置全局变量，页面调用方法如下：
// console.log(this.$baseUrl);
Vue.prototype.$baseUrl = "http://localhost/app/1.asp"//设置全局变量
index.vue 文件的代码
<template> <view>
<view class="box1">
<view class="box4" style="text-align:center">
<view class="box2" style="height: 40rpx;background: #C6FFC6;"><text Selection space="ensp" >借用登记</text></view>
<view class="box3" style="height: 40rpx;background: #00CCFF;"><text Selection space="ensp">搜索查找</text></view>
</view>
</view>
<view v-for="(item,index,l11_30) in a2 " class="box1" :key="index" :style="item.l11_30==true?'background-color:#FFB9DC':'background-color:#CCCCCC'" @click="jyjsbj(item.l11_1)">
<view class="box4">
<view class="box2"><text Selection space="ensp">借用时间：{{item.l11_4}} </text></view>
<view class="box3"><text Selection space="ensp">记单人：{{item.l11_14}}</text></view>
</view>
<view class="box4">
<view class="box2"><text Selection space="ensp">借用人：{{item.l11_10}} </text></view>
<view class="box3"><text Selection space="ensp">借用教室：{{item.l11_11}}</text></view>
</view>
<view class="box4">
<view class="box2"><text Selection space="ensp">借用周：{{item.l11_17}} </text></view>
<view class="box3"><text Selection space="ensp">借用星期：{{item.l11_15}}</text></view>
</view>
<view class="box4">
<view class="box2" style="width:100%;"><text Selection space="ensp" >借用课次：{{item.l11_18}} </text></view>
</view>
<view class="box4">
<view class="box3"><text Selection space="ensp">借用时间段：{{item.l11_12}}</text></view>
</view>
<view class="box4">
<view class="box2" style="width:100%;"><text Selection space="ensp">备注：{{item.l11_8}} </text></view>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
a2:[],
a3: {id1:'2',id2:'addoil'},
page:1,
postData:[],
}
},
methods:{ // methods包裹函数
//点击事件
jyjsbj(e){
uni.navigateTo({
url: '/pages/jsjy_1/index?id='+e
});
},
getData(){
//开始请求服务器数据开始
uni.request({
url:this.$baseUrl,
data: {
id1:'2',
id2:'addoil',
page:this.page,
},
method: 'post',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
this.a2=[...this.a2,...res.data],
console.log(this.a2)
}
})
//开始请求服务器数据结束
},
// 触底的事件
onReachBottom() {
console.log('到底了')
if (this.page<11) { //只允许查询10页数据
this.page ++ // 让页码值自增 +1
this.getData() //调用加载数据方法
}
else
{
uni.showModal({
content: '目前只允许查询10页数据！' ,
showCancel: false
})
}
//this.queryObj.pagenum += 1
},
// 监听页面加载
onShow: function() {
this.request({ url:'http://localhost/app/1.asp',method: 'POST', data: this.a3}).then(res => {console.log(res)})
}
}
</script>
<style>
@import url('/style/style1.css');
</style>
出现下面的报错信息
vendor.js?t=wechat&s=1675290873893&v=0370c81b8eff0377ed9406ead7b2d02a:3963 [Vue warn]: Error in onShow hook: "TypeError: this.request is not a function"
TypeError: this.request is not a function
