微信小程序如何调用API实现数据请求-wx.request()

前言
微信小程序不存在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即可。
如图登录官网,登录,接着点击箭头,进入下一页面。

点击创建接口。

更新数据,创建属于自己的数据即可。

一可预览效果,复制链接到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)
}
})
}
点击按钮如果出现下面的错误,那是因为要到详情按钮中,给个地方打个勾即可。

找到下方打钩即可。

点击按钮,即可查看,请求数据效果出现了。

结语
- 你完成了吗?是不是,很容易呢?是不是很简单呢?
微信小程序如何调用API实现数据请求-wx.request()的更多相关文章
- 微信小程序填坑之路其一:wx.request发送与服务端接受
一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 微信小程序前端与myeclipse的数据交换过程(SSH)
这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...
- 微信小程序添加外部地图服务数据
先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...
- 微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
随机推荐
- CentOS6.5搭建OpenVas完全搭建手册(搭建过程总结及小记)
一.OpenVAS 介绍 1.关于OpenVAS OpenVAS(Open Vulnerability Assessment System)是一套开源的漏洞扫描系统,早期Nessus 是其中一个最流行 ...
- 请求不同域的数据方法:requests Jsonp cors
在需要访问不同域的接口的数据的时候,一般有两种方式: 第一种: 使用requests模块,在业务逻辑中直接访问别的域的接口,获取数据,然后将返回的数据显示到前端页面上; 这个时候,数据访问的流程是: ...
- Junit介绍以及使用
在介绍junit之前,把一些知识点提前了解一下 单元测试是一个对单一实体(类或方法)的测试. 测试用例(Test Case)是为某个特殊目标而编制的一组测试输入.执行条件以及预期结果,以便测试某个程序 ...
- 教女朋友写第一个php
1 首先 下载xampp 软件.按默认安装好之后 在电脑的右下角的箭头里能发现一个橘色的小图标 双击它 启动阿帕奇和mysql 会变绿 2 打开 C:\xampp\apache 文件夹 找到httpd ...
- Data Persistence
[Data Persistence] 1.构建环境. cd /home/ubuntu/contracts mkdir addressbook cd addressbook touch addressb ...
- Http的缓存机制
最近参加一个面试,被面试官问到http的缓存机制,发现自己并不熟悉,于是这篇博客诞生了. HTTP是超文本传输协议,从万维网服务器传输文本到本地浏览器的传送协议,基于TCP/IP通信协议传递数据 HT ...
- 图片识别文字, OCR
文章引用自: https://www.cnblogs.com/stone_w/archive/2011/10/08/2202397.html 方式一.Asprise-OCR的使用. Asprise-O ...
- 一个域名下多个Vue项目
公司写的网站要英文和中文的,所以就写了两个项目,都是用vue写的单页面项目,但是域名只有一个,所以就想把两个vue项目合并到一个域名下面.思考:vue的页面都是单页面应用,说白了就是一个index.h ...
- linux/windows转mac的习惯设置
外接键盘 常用快捷键设置 中英文快捷键名都重新设置一遍 使用ctrl替代command(对 内置 键盘操作) https://jingyan.baidu.com/article/6f2f55a1465 ...
- vue 总结
VUE总结 双花括号{{}} 01.index.hmlt main.js 内存的数据可以更改 v-model 双休数据绑定 代码: <!DOCTYPE html> <html lan ...