网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的API在使用需要配置域名白名单。

官方文档

如果发起请求就调用我们这个uni.request(OBJECT)

发送get请求

<template><div><view><button @click="sendReq">发送get请求</button></view></div>
</template>

这里的sendReq就是来配置发送请求的

里面定义一个方法

sendReq(){uni.request({     })
}

首先可以配置一个url

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址

这里就是我们要请求的接口地址

拿我这边随便接的地址

sendReq(){uni.request({url:"http://localhost:8080/selectUser?id=0"})
}

还有一个最重要的:

参数名	类型	必填	默认值	说明	平台差异说明
success	Function	否		收到开发者服务器成功返回的回调函数

success就是我们请求成功后会触发的回调函数

里面的参数有一个res

sendReq(){uni.request({url:"http://localhost:8080/selectUser?id=0",success(res){console.log(res)//打印一下我们回调函数传过来的值}})
}

其他可以参考官方文档

data:

要想从回调函数里面拿到传过来的值，那你必须得清楚this:

success()回调函数里的this是undefind

如果在回调函数里把能获取到的res.data的值给外部想进来的this.name是不太现实的(报错name is undefind)

但是在点击事件里,在uni.request外你去尝试一下输出一下:

console.log(this)

我这里出来的结果是VueComponent的实例对象,那我们把这个this赋给一个变量that让它进入回调函数里面把里面获取到的res.data.name(我数据库里面的是name,不清楚可以直接console.log(res)或console.log(res.data)查看里面的值)

要知道VueComponent实例对象就是Vue实例对象的孪生兄弟中的弟弟，VueComponent实例对象对比Vue实例对象就是少一个确定为那个容器服务的el(或者说是$mount)和data只能写成函数式，所以Vue实例对象也是有_data的，里面存的就是组件中的data里的属性。所以我们只要在回调函数里面写成:

that._data.name = res.data.name

这样VueComponent里面的data就是传过来属性的值;

整体回调函数:

sendReq(){// console.log(this)//VueComponent实例对象let that = thisuni.request({url:"http://localhost:8080/selectUser?id=0",success(res){console.log(res)console.log(res.data.name)//console.log(this)//undefined//console.log(that)//VueComponent实例对象that._data.name = res.data.name},})
}

这个案例的.vue文件

<template><div><view><h2>名字:{{name}}</h2><button @click="sendReq">发送get请求</button></view></div>
</template><script>export default{name: "req",components:{},data() {return {name: 'request拿到的名字'}},methods: {sendReq(){// console.log(this)//VueComponent实例对象let that = thisuni.request({url:"http://localhost:8080/selectUser?id=1",success(res){console.log(res)console.log(res.data.name)// text = res.data.name//console.log(this)//undefined//console.log(that)//VueComponent实例对象that._data.name = res.data.name},})}},}
</script><style scoped></style>

uniapp 网络请求 get请求相关推荐

封装uniapp网络请求, 统一管理接口和怎么使用(完整版)
在项目开发的过程中,请求网络接口获取数据是我们前端开发人员经常需要做的工作,我们知道接口会有很多很多,我们不可能在每一个页面中发起每一个请求的时候都重复的去写那些一样的网络请求代码,那样不仅看起来很冗 ...
uni-app开发微信小程序真机调试请求超时请求被拒绝
uni-app开发微信小程序真机调试请求超时&请求被拒绝小程序开发真机调试问题一.问题描述二.解决一.请求被拒绝二.请求超时一.问题描述在利用uni-app开发小程序时,写好的程 ...
摘要: Nginx 网络多并发请求的TCP网络参数做简单说明。
摘要: Nginx 网络多并发请求的TCP网络参数做简单说明. 需要修改/etc/sysctl.conf来更改内核参数 #原有字段 net.ipv4.tcp_syncookies = 1 #新增字段 ...
爬虫实战学习笔记_6 网络请求request模块：基本请求方式+设置请求头+获取cookies+模拟登陆+会话请求+验证请求+上传文件+超时异常
1 requests requests是Python中实现HTTP请求的一种方式,requests是第三方模块,该模块在实现HTTP请求时要比urlib.urllib3模块简化很多,操作更加人性化. ...
网络请求 get 请求时, 如果参数中的字符带有+号
网络请求 get 请求时, 如果参数中的字符带有+号, 今天前端在调用我的API时, 发现有个参数一直没法通过我后台的验证, 但是在前端查看时, 该参数结构又没有什么异常, 又是一番查找, 直到在后端 ...
4.网络爬虫—Post请求(实战演示)
网络爬虫-Post请求实战演示 POST请求 GET请求 POST请求和GET请求的区别获取二进制数据爬[百度官网](https://www.baidu.com/)logo实战发送post请求 ...
使用招商银行一卡通网上银行转账时老提示时间错误或网络错误：请求被重发
国庆了回家了想转点钱给另一张卡使用招商银行一卡通网上银行转账时老提示时间错误或网络错误:请求被重发后来咨询了银行按银行提示步骤重新登录后(注意:服务器要选具体服务器[深圳/南京服务器]) ...
uni-app进阶之https请求方式/状态管理【day11】
uni-app进阶之https请求方式传统HTTP存在安全问题: 1.如果明文用于通信,则内容可能被窃听: 2.如果未验证通信方的身份,通信方的身份可能被伪装: 3.无法证明消息的完整性,消息可能被 ...
Linux C/C++ 开发（学习笔记十一）：TCP服务器（并发网络网络编程一请求一线程）
Linux C/C++ 开发(学习笔记十一 ):TCP服务器(并发网络网络编程一请求一线程) 一.TCP服务器(一请求一线程) 的原理二.完整代码三.测试四.补充一.TCP服务器(一请求一线 ...
【已解决】（uni-app）IOS 端 H5 应用无法发起请求，请求状态码为0，错误描述为request:fail
[已解决](uni-app)IOS 端 H5 应用无法发起请求,请求状态码为0,错误描述为request:fail 目录 [已解决](uni-app)IOS 端 H5 应用无法发起请求,请求状态码为0 ...

uniapp 网络请求 get请求

网络请求

其他可以参考官方文档

uniapp 网络请求 get请求相关推荐

最新文章

热门文章