微信小程序使用request网络请求操作实例


Posted in Javascript onDecember 15, 2017

本文实例讲述了微信小程序使用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,包括网络,媒体,数据等,也提供了很多组件,使开发小程序变得很方便。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 #Javascript
Angular中管道操作符(|)的使用方法
Dec 15 #Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 #Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 #Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 #Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
You might like
很好用的PHP数据库类
2009/05/27 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Javascript中神奇的this
2016/01/20 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python字符串格式化
2015/06/15 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python开启debug模式的方法
2019/06/27 Python
python3中rank函数的用法
2019/11/27 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
用python写PDF转换器的实现
2020/10/29 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
Redis特殊数据类型bitmap位图
2022/06/01 Redis
从原生JavaScript到React深入理解
2022/07/23 Javascript