封裝的意義在於使用起來更高效簡潔
network.js
post請求和get請求不一樣的地方在於header中的content-type
參數和method
參數
function postRequestLoading(url, params, message, success, fail) {
if (message != "") {
wx.showLoading({
title: message,
})
}
const postRequestTask = wx.request({
url: url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function(res) {
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail(res)
}
},
fail: function(res) {
if (message != "") {
wx.hideLoading()
}
fail(res)
}
})
}
這個參數一目瞭然,當message
爲空的時候就不顯示loading,
然後wx.request返回一個一個task對象
,這個對象用來取消請求。
爲了更簡單的調用,可以再寫一個構造
function postRequest(url, params, success, fail) {
this.postRequestLoading(url, params, "", success, fail)
}
少了message 參數,在調用postRequestLoading方法的時候直接傳空即可。
調用
在需要調用的js頁面先導入network.js
var network = require('../../utils/network.js');
使用
//參數
var params = new Object();
params.account = e.detail.value.username,
params.password = e.detail.value.password,
network.postRequestLoading('http:....', params, '登陸中',
function (res) {
//res就是返回的數據
console.log("成功"+res)
}, function (res) {
console.log("失敗"+res)
})
完整代碼
/**
* url:請求的url
* params:請求參數
* message:loading提示信息
* success:成功的回調
* fail:失敗的回調
*/
//post請求
function postRequest(url, params, success, fail) {
this.postRequestLoading(url, params, "", success, fail)
}
//根據判斷message 是否顯示loading
function postRequestLoading(url, params, message, success, fail) {
if (message != "") {
wx.showLoading({
title: message,
})
}
const postRequestTask = wx.request({
url: url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function(res) {
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail(res)
}
},
fail: function(res) {
if (message != "") {
wx.hideLoading()
}
fail(res)
}
})
}
//get請求
function getRequest(url, params, success, fail) {
this.getRequestLoading(url, params, "", success, fail)
}
function getRequestLoading(url, params, message, success, fail) {
if (message != "") {
wx.showLoading({
title: message,
})
}
const getRequestTask = wx.request({
url: url,
data: params,
header: {
'Content-Type': 'application/json'
},
method: 'GET',
success: function(res) {
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail(res)
}
},
fail: function(res) {
if (message != "") {
wx.hideLoading()
}
fail(res)
}
})
}
//取消post請求
function abortPostRequest(url, params, success, fail) {
postRequestTask.abort()
}
//取消get請求
function abortGetRequest(url, params, success, fail) {
getRequestTask.abort()
}
module.exports = {
postRequest: postRequest,
postRequestLoading: postRequestLoading,
getRequest: getRequest,
getRequestLoading: getRequestLoading,
abortPostRequest: abortPostRequest,
abortGetRequest: abortGetRequest
}