微信小程序如何调用API实现数据请求-wx.request()
2023-09-11 14:16:53 时间
前言
微信小程序不存在ajax
,那么它是如何实现数据请求功能的呢?微在信中提供了API
的调用wx.request(OBJECT)
,这个是很不错的。下面就讲一下如何请求数据,简单到不行。
wx.request
看文档时,提供了示例模板如下:
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
}
})
如何调取数据这是个难题,但是要模拟调用是有可能的。因为有个网址:https://easy-mock.com/ ,提供了模拟数据的请求。那么我们先来模拟一下数据吧,到时,复制链接给模板中的网址即可。
如图登录官网,登录,接着点击箭头,进入下一页面。
点击创建接口。
更新数据,创建属于自己的数据即可。
一可预览效果,链接复制到url
模板中。
接着我们打开微信小程序的开发工具,在界面中添加按钮请求即可。
<button type='primary' bindtap='send'>请求数据</button>
在接着js
文件中添加事件。
//send
send: function(){
wx.request({
url: '复制的链接', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data)
}
})
}
点击按钮如果出现下面的错误,那是因为要到详情按钮中,给个地方打个勾即可。
找到下方打钩即可。
点击按钮,即可查看,请求数据效果出现了。
结语
- 你完成了吗?是不是,很容易呢?是不是很简单呢?
相关文章
- [转] 关于微信小程序、H5、公众号、APP跳转问题
- 微信小程序 - 分包加载(分包使用)
- 微信小程序 - tabbar动态更换图标以及文字
- 微信小程序 - 文字换行问题
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
- 微信小程序 - 最好用的多选功能,列表点击选中并且高亮显示(支持全选 / 反选,回显设置默认选择数据的功能,点击选中并改变样式,点击选中并高亮显示效果)详细教程功能源码组件插件
- 微信小程序 - 页面触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据(高效自动判断分页懒加载是否继续请求接口数据,超详细触底请求后端示例教程)
- 微信小程序 - wx:if 判断一个数组中是否为空(判断是否有数据)
- 微信小程序 - 每隔一段时间请求后端接口获取最新数据,页面每隔一段时间就触发一个函数(实时刷新数据,页面每隔 N 秒自动请求接口数据)让页面每隔一段时间就请求一次接口,详细示例教程可运行示例
- 微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数(页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容)
- 微信小程序 - form表单提交时拿到用户输入的所有数据(bindsubmit)
- Vue - PC 端列表下拉页面触底加载分页数据,监听浏览器屏幕触底事件,类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现懒加载效果)
- JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目
- 微信小程序如何调用API实现数据请求-wx.request()
- 微信小程序通过api接口将json数据展现到小程序示例
- 微信小程序组件 滚动导航
- 【微信小程序/实现】wx:for实现数组循环插入数据,显示到页面中
- 【微信小程序】WXSS模板样式
- 微信小程序-提示“不在以下 request 合法域名列表中”
- 微信小程序使用wx.request封装fromdata数据进行文件上传
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 表情消息
- 微信小程序 不同页面间数据传递
- 微信小程序 调试 不明数据
- 微信小程序学习第8天——自定义组件的数据监听器Observer小案例