話不多說弹砚,微信已經(jīng)提供了網(wǎng)絡(luò)請求的API,在實(shí)際項(xiàng)目開發(fā)中救湖,為了好使涎拉,一般都會(huì)做網(wǎng)絡(luò)請求封裝啥的。
寫擼一個(gè)名字叫httputils.js
1.請求頭少不了
/**
* 請求頭
*/
var header = {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': "Bearer " + wx.getStorageSync("token"),
'os': 'android',
'version': '1.0.0',
}
值得注意的是content-type': 'application/json
,死活不行碟嘴,必須content-type': 'application/x-www-form-urlencoded
溪食。
大家使用的時(shí)候,注意這點(diǎn)娜扇,反正我被坑了很久错沃。坐等你入坑
2.請求參數(shù)少不了
/**
* function: 根據(jù)需求處理請求參數(shù):添加固定參數(shù)配置等
* @params 請求參數(shù)
*/
function dealParams(params) {
console.log("請求參數(shù):", params)
return params;
}
3.get請求
function get(url, params, onSuccess, onFailed) {
console.log("請求方式:", "GET")
request(url, params, "GET", onSuccess, onFailed);
}
4 .post請求
/**
* 供外部post請求調(diào)用
*/
function post(url, params, onSuccess, onFailed) {
console.log("請求方式:", "POST")
request(url, params, "POST", onSuccess, onFailed);
}
5.request請求方法
/**
* function: 封裝網(wǎng)絡(luò)請求
* @url URL地址
* @params 請求參數(shù)
* @method 請求方式:GET/POST
* @onSuccess 成功回調(diào)
* @onFailed 失敗回調(diào)
*/
function request(url, params, method, onSuccess, onFailed) {
console.log('請求url:' + url);
wx.showLoading({
title: "正在加載中...",
})
console.log("請求頭:", header)
wx.request({
url: url,
data: dealParams(params),
method: method,
header: header,
success: function(res) {
wx.hideLoading();
console.log('響應(yīng):', res.data);
if (res.data) {
/** start 根據(jù)需求 接口的返回狀態(tài)碼進(jìn)行處理 */
if (res.statusCode == 200) {
onSuccess(res.data); //request success
} else {
onFailed(res.data.message); //request failed
}
/** end 處理結(jié)束*/
}
},
fail: function(error) {
onFailed(""); //failure for other reasons
}
})
}
最終的httputils.js
/**
* 請求頭
*/
var header = {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': "Bearer " + wx.getStorageSync("token"),
'os': 'android',
'version': '1.0.0',
'device_token': 'ebc9f523e570ef14',
}
/**
* 供外部post請求調(diào)用
*/
function post(url, params, onSuccess, onFailed) {
console.log("請求方式:", "POST")
request(url, params, "POST", onSuccess, onFailed);
}
/**
* 供外部get請求調(diào)用
*/
function get(url, params, onSuccess, onFailed) {
console.log("請求方式:", "GET")
request(url, params, "GET", onSuccess, onFailed);
}
/**
* function: 封裝網(wǎng)絡(luò)請求
* @url URL地址
* @params 請求參數(shù)
* @method 請求方式:GET/POST
* @onSuccess 成功回調(diào)
* @onFailed 失敗回調(diào)
*/
function request(url, params, method, onSuccess, onFailed) {
console.log('請求url:' + url);
wx.showLoading({
title: "正在加載中...",
})
console.log("請求頭:", header)
wx.request({
url: url,
data: dealParams(params),
method: method,
header: header,
success: function(res) {
wx.hideLoading();
console.log('響應(yīng):', res.data);
if (res.data) {
/** start 根據(jù)需求 接口的返回狀態(tài)碼進(jìn)行處理 */
if (res.statusCode == 200) {
onSuccess(res.data); //request success
} else {
onFailed(res.data.message); //request failed
}
/** end 處理結(jié)束*/
}
},
fail: function(error) {
onFailed(""); //failure for other reasons
}
})
}
/**
* function: 根據(jù)需求處理請求參數(shù):添加固定參數(shù)配置等
* @params 請求參數(shù)
*/
function dealParams(params) {
console.log("請求參數(shù):", params)
return params;
}
// 1.通過module.exports方式提供給外部調(diào)用
module.exports = {
postRequest: post,
getRequest: get,
}
寫好httputils.js
后,一定要通過module.exports
給外部使用
使用:
1.在需要js的頁面雀瓢,引入httputils.js
var http = require('../../httputils.js'); //相對路徑
2.調(diào)用
var prams = {
username: "1111",
password:"123456"
}
http.postRequest("https://www.baidu.com", prams,
function(res) {
},
function(err) {
})
效果圖