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)
}
})