微信小程序request请求实例,网络请求。
最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api。
官方参数说明如下
OBJECT参数说明:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 开发者服务器接口地址 |
data | Object、String | 否 | 请求的参数 |
header | Object | 否 | 设置请求的 header , header 中不能设置 Referer |
method | String | 否 | 默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
success | Function | 否 | 收到开发者服务成功返回的回调函数,res = {data: '开发者服务器返回的内容'} |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
最简单的用法如下(以POST请求为例)
bindSearchChange:function(e){
var keyword = e.detail.value;
wx.request({
url:'xxxxxxxxx',
data:{},
header: {'Content-Type': 'application/json'},
success: function(res) {
console.log(res)
}
})
}
下面我们把请求写在service文件下的http.js文件中,代码如下
var rootDocment = 'hxxxxx';//你的域名
function req(url,data,cb){
wx.request({
url: rootDocment + url,
data: data,
method: 'post',
header: {'Content-Type': 'application/json'},
success: function(res){
return typeof cb == "function" && cb(res.data)
},
fail: function(){
return typeof cb == "function" && cb(false)
}
})
} module.exports = {
req: req
}
其中module.exports是将req方法暴露出去使得别的文件中可以使用该方法,由于js函数是异步执行的,所以return 的是回调函数,而不是具体的数据
为了其他文件方便调用此方法,我们在根目录的app.js文件中将其注册成为全局函数,如下
//app.js
var http = require('service/http.js')
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
},
func:{
req:http.req
}
})
这时这个req就是全局的了,在调用时我们可以使用getApp.func.req()来调用,具体如下
var app = getApp()
Page({
data: { },
onLoad: function (opt) {
//console.log(opt.name)
app.func.req('/api/get_data',{},function(res){
console.log(res)
});
}
})
微信小程序提供了很多api,包括网络,媒体,数据等,也提供了很多组件,使开发小程序变得很方便。
微信小程序request请求实例,网络请求。的更多相关文章
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- 微信小程序之跳转、请求、带参数请求小例子
wx.request(OBJECT) wx.request发起的是 HTTPS 请求.一个微信小程序,同时只能有5个网络请求连接. 具体参数说明参看微信小程序官方文档-发起请求. 例: //当页面加载 ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- 微信小程序request请求的封装
目录 1,前言 2,实现思路 3,实现过程 3.1,request的封装 3.2,api的封装 4,实际使用 1,前言 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx. ...
- 微信小程序request同步请求
今天在搞微信小程序的时候顺手用了async,await死活不起作用,后来查了一下子,竟然不支持,那没办法就换了一种实现wx.request同步请求的方案 祭出promise来搞一搞,下面直接贴代码,简 ...
- 微信小程序request请求之GET跟POST的区别
1.GET 例子: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content ...
- 微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...
- 微信小程序开发中的http请求总结
在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
- 前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https
一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1 ...
随机推荐
- vs2019本地调试异步程序
1.vs2019创建一个webapi服务,启动本地webapi服务, 2.使用vs2019再打开一个相同的应用程序,并将异步程序所在的程序集设置为启动项,并启动,启动后点击调试->全部拆离 3. ...
- 阿里云虚拟主机申请免费SSL证书并成功开通Https访问
参考文档网址 https://baijiahao.baidu.com/s?id=1628343140232374972&wfr=spider&for=pc
- Laravel 6.X 数据库迁移 创建表 与 修改表
数据库迁移创建表 本篇文章中使用的是mysql数据库,其他数据库需要修改env文件和app配置,请其他地方搜索一下就会找到. 创建示例 1.创建users表: 命令行键入 php artisan ma ...
- VUE父子组件相互传值
passer.vue中代码 首先在文件中引入组件 import canvasDraw from '@/components/CanvasDraw/canvasDraw' 局部注册组件:componen ...
- 201771010131-王之泰 实验一 软件工程准备—<通读《现代软件工程—构建之法》后所思所想>周学习总结
项目 内容 作业所属课程 https://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/nwnu-daizh/p/12369881. ...
- 一份非常值得一看的Java面试题
包含的模块 本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Sprin ...
- Linux批量装机(PXE)!
一 .PXE 简介PXE:Pre-boot Excution Environment,预启动执行环境PXE 是由 Intel 公司开发的网络引导技术,工作在 Client/Server 模式,允许客户 ...
- 「ZJOI2011」最小割
「ZJOI2011」最小割 传送门 建出最小割树,然后暴力计算任意两点之间最小割即可. 多组数据记得初始化. 参考代码: #include <algorithm> #include < ...
- Unity的3种消息传递方法(SendMessage等)
为了方便多个物体间的消息传达与接收,Unity中包含了几种消息推送机制 : 分别为SendMessage.SendMessageUpwards.BroadcastMessage. 我们首先以SendM ...
- day2-1流程控制语句及对象
流程控制语句: Switch (a){ Case x: ....; } 当a===x(全等)时执行该语句 对象: 使用构造函数创建,new Object() var person = new Obje ...