微信小程序的网络请求 —— 微信小程序教程系列（14）

网络请求，基本上是必须的环节之一。

小程序提供了wx.request(object)，与开发者的服务器实现数据交互的一个很重要的api。

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

<view bindtap="bindSearchChange"><view>

[javascript] view plain copy

1. bindSearchChange:function(){  
2.    wx.request({ 
3.      method:"GET",    //注意请求方式必须要大写！！！
4.      url:'xxxxxxxxx',  
5.      data:{},  
6.      header: {'content-type': 'application/json'},  //content-type必须要小写！！！
7.      success: function(res) {  
8.        console.log(res)  
9.      }  
10.    })  
11.  }  

完整示例：
下面我们把请求写在service文件下的http.js文件中，代码如下

[javascript] view plain copy

1. var root = 'hxxxxx';//你的域名  
2. function req(url,data,cb){  
3.     wx.request({  
4.       url: root + url,  
5.       data: data,  
6.       method: 'POST',  
7.       header: {'content-type': 'application/json'},  
8.       success: function(res){  
9.         return typeof cb == "function" && cb(res.data)  
10.       },  
11.       fail: function(){  
12.         return typeof cb == "function" && cb(false)  
13.       }  
14.     })  
15. }  
16.   
17. module.exports = { req: req }  

其中module.exports是将req方法暴露出去使得别的文件中可以使用该方法，由于js函数是异步执行的，所以return 的是回调函数，而不是具体的数据

为了其他文件方便调用此方法，我们在根目录的app.js文件中将其注册成为全局函数，如下

[javascript] view plain copy

1. //app.js  
2. var http = require('service/http.js')  
3. App({  
4.   onLaunch: function () {  
5.    //dosomething  
6.   },   
7.   func:{  
8.     req:http.req  
9.   }  
10. })  

这时这个req就是全局的了，在调用时我们可以使用getApp.func.req()来调用，具体如下

[javascript] view plain copy

1. var app = getApp()  
2. Page({  
3.   data: {  
4.       
5.   },  
6.   onLoad: function (opt) {  
7.     app.func.req('/api/get_data',{},function(res){  
8.        console.log(res)  
9.     });  
10.   }  
11. })  

目前，小程序还有待完善

其中在网络请求上，还需要注意一些细节：

1> method请求方式，必须要使用大写的GET或POST！！

2> content-type，必须要使用小写，使用大写不能正常发起请求！！