微信小程序 request 网络请求操作实例深度解析

why 123 2024-10-11 09:12:00

小程序提供了很多api，极大的方便了开发者，其中网络请求api是wx.request(object)，这是小程序与开发者的服务器实现数据交互的一个很重要的api。本文主要介绍了微信小程序使用request网络请求操作,结合实例形式分析了wx.request(object)网络请求操作的具体使用技巧,需要的朋友可以参考下，希望能帮助到大家。

官方参数说明如下

OBJECT参数说明：

参数名类型必填说明
urlString是开发者服务器接口地址
dataObject、String否请求的参数
headerObject否设置请求的 header , header 中不能设置 Referer
methodString否默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
successFunction否收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

最简单的用法如下（以POST请求为例）


1

2

3

4

5

6

7

8

9

10

11

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文件中，代码如下


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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文件中将其注册成为全局函数，如下


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

//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()来调用，具体如下


1

2

3

4

5

6

7

8

9

10

11

var app = getApp()

Page({

 data: {

 },

 onLoad: function (opt) {

 //console.log(opt.name)

 app.func.req('/api/get_data',{},function(res){

 console.log(res)

 });

 }

})

微信小程序提供了很多api，包括网络，媒体，数据等，也提供了很多组件，使开发小程序变得很方便。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：解析 程序 微信小程序 实例 小程序
上一篇:微信小程序 ajax 实现请求服务器数据实例详解
下一篇:微信小程序显示下拉列表功能实现方法全解析
相关文章