微信小程序开发-网络请求

来源：互联网发布：淘宝刷单没有权重编辑：程序博客网时间：2024/06/07 06:40

首先我们看下官方文档，然后再说说自己的理解和demo

官方文档链接：官方文档-网络请求

我们有几个需要注意的地方：

1、header不能设置referer；

2、method的有效值要大写；

3、数据类型是json（默认json）会做一次JSON.prase；

4、success返回参数里面的header最低版本是1.2.0，必要的时候需要进行兼容处理;

5、网络请求返回值时，低于1.4.0需要兼容处理

那么我们直接从代码中来看：

index.js:

Page({
data:{
info:""
},
onLoad:function(e){
var that = this;
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/venues/venuesList',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function (res) {
console.log("网络请求成功");
console.log(res.data); //开发者服务器返回的数据
console.log(res.statusCode); //开发者服务器返回的 HTTP 状态码
console.log(res.header); //开发者服务器返回的 HTTP Response Header
var data = res.data.data;
if(res.statusCode == 200){
that.setData({
info: data
})
}else{
console.log("数据返回错误，状态码："+res.statusCode);
}
},
fail:function(res){
console.log("网络请求失败");
},
complete:function(res){
console.log("网络请求动作完成");
}
});
}
})

注意的地方就是：header 为 application/json，接口传回来的参数要是json 格式的，否则会报500错误，比如接口返回来的参数是xml则header['content-type'] 要设置为'application/x-www-form-urlencoded'

另外测试post方式是：

index.js:

wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/venues/venuesList',
method: 'POST',
data: {},
header:{"Content-Type": "application/x-www-form-urlencoded"},
success: function (res) {
console.log("网络请求成功");
console.log(res.data); //开发者服务器返回的数据
console.log(res.statusCode); //开发者服务器返回的 HTTP 状态码
console.log(res.header); //开发者服务器返回的 HTTP Response Header
var data = res.data.data;
if (res.statusCode == 200) {
that.setData({
info2: data
})
} else {
console.log("数据返回错误，状态码：" + res.statusCode);
}
},
fail: function (res) {
console.log("网络请求失败");
},
complete: function (res) {
console.log("网络请求动作完成");
}
});

为了方便使用，我们把它模块化，封装到request.js里面，然后在app.js里注册成全局函数。

使用的时候，request.js的引用地址自己调整一下。

request.js：

var rootDocment = 'xxxxx';//你的域名 
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
} 

app.js:

//app.js 
var http = require('request.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
}
}) 

使用的demo.js:

var app = getApp()
Page({
data: {

},
onLoad: function (opt) {
//console.log(opt);
app.func.req('/api/getData', {}, function (e) {
console.log(e)
});
}
}) 

附JS源码网络请求

阅读全文

0 0