uniapp发起数据请求并存储数据

最新推荐文章于 2025-10-27 11:52:11 发布

原创最新推荐文章于 2025-10-27 11:52:11 发布 · 5k 阅读

15 ·

CC 4.0 BY-SA版权

uniapp 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在uniapp中发起数据请求，包括在页面渲染时的请求和通过事件触发的请求，同时讲解了跨域处理及数据存储方法。

uniapp发起数据请求并存储数据

1.对接口进行数据请求：
a.在页面第一次渲染时，在script的computed属性中：

mounted() {
	uni.request({
		method: "post",
		url: "/api/queryAll",
		header: {
			'Content-Type': 'application/json'
		},
		success: (res) => {
			console.log(res);
		},
		fail:(err)=>{
			console.log(err)
		}
	});
}

b.利用事件触发请求，在script的methods中：

methods: {
	uni.request({
		method: "post",
		url: "/api/selectIt",
		header: {
			'Content-Type': 'application/json',
			'token':uni.getStorageSync('token')    // 如果需要传递token，将token放入请求头，在最初登录时，将接口返回的token进行保存
		},
		data: {
			num: this.getnum,  // post请求传递的参数
			people_num: this.totalp					
		},
		success: (res) => {	
			if(res.data.code === 200){
				uni.navigateTo({
					url: '../index/index'  //请求成功后跳转页面（非tabbar页面）
				});				
			}
		},
		fail:(err)=>{
			console.log(err)
		}
	});
}

2.对请求进行跨域处理：
打开manifest.json文件，点击源码视图，在最后的h5中配置：

"h5" : {
	  "devServer": {  
		  "port": 8080,  
		  "disableHostCheck": true,  
		  "proxy": {  
			  "/api": { 
				   "target": "http://localhost:4000",  //这个是我们要访问的接口前缀
				 "changeOrigin": true,  
				 "secure": false,
				 "pathRewrite": {  
					 "^/api": "/"  
					}  
				}			 
			}  
		}  
    }

3.uniapp自带的setStorage和getStorage的使用：

uni.setStorage会把返回的数据以键值对的形式保存

uni.setStorage({
	key: ' key'，  // 键名
	data: data,    // 键值
	success: function() {
		console . log( ' success ')
	}
})

使用uni.getStorage获取键值：

const data = uni . getStorage({
	key: " loginData
	success: (res) => {
		data = res.data
		console.log(data)
	}
})