微信小程序的网络请求框架已经设计得很简单易用了,它是这样发起网络请求的:
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
但是我们最好还是要对它再进行一次封装,因为我们很多时候需要一个统一的网络请求处理,比如token过期,网络错误处理等等,所以我用Promise对微信的网络请求框架做了一个简单的封装。把网络请求的代码封装到util.js文件中,比如可以写一个方法叫requestData:
const API_BASE_URL = 'https://api.test.com:8080'
const app = getApp()
const requestData = (path, method, data) => {
return new Promise(function(resolve, reject) {
var token = app.globalData.token
if (token == null) {
token = wx.getStorageSync('token') ? wx.getStorageSync('token') : ''
}
wx.request({
url: API_BASE_URL + path,
data: data,
method: method,
header: {
'content-type': 'application/json',
'token': token
},
success: function(res) {
// cookies:"",data:"",errMsg:"request:ok",header:{Connection: "Keep-Alive", … },statusCode:200
if (res.data.result || false) {
resolve(res.data)
} else {
var e = new Object();
if (res.data.errorCode == 30000) {
//校验token失效
getNewToken()
e.errMsg = "登录失效,请刷新重试"
} else if (res.data.errorCode == 30001) {
//没有绑定手机号
bindPhone()
e.errMsg = "尚未绑定手机号"
} else {
e.errMsg = res.data.message || "请求失败"
}
reject(e)
}
},
fail: function(e) {
//e = { errMsg: "request:fail invalid url" }
e.errMsg = "网络请求失败"
reject(e)
}
})
})
}
再定义一下get 和 post 方法,然后export出来:
function getData(path, data) {
return requestData(path, 'GET', data)
}
function postData(path, data) {
return requestData(path, 'POST', data)
}
module.exports = {
GET: getData,
POST: postData
}
然后在需要用到网络请求的js文件中引入即可
const API = require('../../../utils/util.js')
submit: function(e) {
wx.showLoading({
title: '提交中...',
});
API.POST("/room/visit", {
visitTime: '2019-06-01 18:00:00',
roomId: this.data.room.roomId,
visitorName: name,
visitorPhone: phone
}).then(res => {//数据请求成功
wx.hideLoading();
wx.showToast({
title: '预约成功'
})
}).catch(res => {//数据请求失败
wx.hideLoading();
wx.showToast({
title: res.errMsg,
icon: 'none'
})
});
},
这个网络工具类还有上传图片和批量上传图片等功能,完整文件请访问:
https://github.com/tigerchou/mputils