uniApp- uni.request的使用——以及箭头函数和普通函数的坑

<tr v-for="(item, index) in filteredData" :key="index" @click="goDetail(item)">
				<td>{{item.id}}</td>
				<td>
					<div class="main">{{item.text}}</div>
				</td>
				<td>{{item.applicant}}</td>
				<td>{{item.date}}</td>
			</tr>

这是前台渲染的代码。

	onShow(res) {
axios.get("https://mock.mengxuegu.com/mock/642f630132affa39a121cd8d/example/ctss").then(res => {
			this.tableData = res.data.data;
		 	console.log(this.tableData);
		 })
	},

需要修改的是这串代码；

因为如果在uniApp中使用axios，会产生跨域或者配置等各种问题，所以综合分析以后，我打算将这串代码修改为用uni.request这个uni自带的api解决问题。

其实原本修改的方向很简单，但是我的出发点上来就错了。

	onShow(res) {
		uni.request({
			method: 'GET',
			url: 'https://mock.mengxuegu.com/mock/642f630132affa39a121cd8d/example/ctss',
			success: (res){
				this.tableData = res.data.data;
				console.log(this.tableData);
			}
		})
		
	},

乍一看没什么问题。并且调试也并不报错。但是就是前台获取不到tableDta的数据。

console.log(this.tableData)可以将GET到的数组打印到终端，但是始终没法渲染给前台。

为什么？

始终找不到原因就只能一个地方一个地方地试。是tableData的值给不到前端吗？

我直接把全局变量tableData设置成了[1]。结果前台渲染成功，console.log(this.tableData)返回渲染了[1]，之后我又把console.log()这个命令放到了onShow(res)的第一行命令，同样也返回正确。

终于，当我把这个命令再塞回success中，前台获取不到了。

chartGPT关于函数和箭头函数的区别是这样回答的：

 没错，箭头函数！

我如果使用普通函数的话，按理来说，获取到的数据还需要用return返回到前端。

如此，还不如让我直接=>一下，

修改代码：

	onShow(res) {
		uni.request({
			method: 'GET',
			url: 'https://mock.mengxuegu.com/mock/642f630132affa39a121cd8d/example/ctss',
			success: (res) => {
				this.tableData = res.data.data;
				console.log(this.tableData);
			}
		})
	},

搞定。完美渲染。

Vue3中的很多Api可以在UniApp中使用，但是打包成.apk之后，编译并不通用！

如果想在UniApp中使用更多的Vue3的Api，还需要根据实际情况，进行打包的配置处理。