微信小程序官方提供了wx.request实现网络请求，而在实际项目中,往往请求头等参数都是相同的，不同的请求的区别可能仅仅在于接口地址、请求参数以及请求成功后的处理逻辑，因此为了提高开发效率，很有必要对实际项目中的网络请求进行封装。
1、模块化-创建网络请求工具模块
在/utils目录创建httpUtil.js文件
2、实现项目统一的request函数
其中包括了showToast和hideToast等标准的网络相关的处理逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var baseURL = "http://yourbaseurl.xxx/yy/z" //your base url
function request(api, method, header, params, success){
wx.showToast({
icon: "loading",
title: "加载中...",
duration: 10000
})
wx.request({
url: baseURL + api,
method: method,
header: header,
data: params,
success: function(res) {
wx.hideToast()
success(res)
},
fail: function(){
wx.showToast({
icon: "loading",
title: "请检查网络..."
})
}
})
}
|
3、分别实现get和post请求
1
2
3
4
6
7
|
var GET_METHOD = "GET"
var GET_HEADER = {
"Authorization": "Basic ####################" //your get header
}
function get(api, params, success){
request(api, GET_METHOD, GET_HEADER, params, success)
}
|
1
2
3
4
5
6
7
8
9
|
var POST_METHOD = "POST"
var POST_HEADER = {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
"version": "1.0.0",
"Authorization": "Basic ######################" //your post header
}
function post(api, params, success){
request(api, POST_METHOD, POST_HEADER, params, success)
}
|
4、将get和post方法输出
1
2
3
4
|
module.exports = {
GET: get,
POST: post
}
|
5、引用封装好的get和post方法
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var http = require("../../utils/httpUtil.js")
var api = "yourApi" //your api
var params = {
"id": "yourid",
"name": "yourname"
// ... your params
}
http.GET(api, params, function(res){
//do something
})
http.POST(api, params, function(res){
//do something
})
|