小程序向后台发送网络请求wx.request封装方法
说明
当微信小程序前端向后台发送请求较多时,可以将请求方法封装起来,使代码更简洁且方便管理。
小程序HTTPS 网络请求wx.request(官方文档)
官方示例代码:
wx.request({
url: 'test.php', // 仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
}
})
开始
- util文件夹下新建文件api.js
所有请求接口都写在这里面,还有封装的具体方法,以及其他文件调用需的模块接口
- 封装代码
api.js
const App = getApp();
const URL = App.globalData.URL; //请求地址相同的部分写在app.js的globalData中
/** 获取文章列表 */
const getListArticle = (params) => {
wxRequest(params, `${URL}/article/getListArticle`,true);
};
/** 添加评论 */
const insertComment = (params) => {
wxRequest(params, `${URL}/comment/insertComment`,true);
};
/*有其他接口可以在这里继续添加*/
//加入判断标记mark.需要判断mark为true,不需要判断mark为flase
const wxRequest = (params, url, mark) => {
if (mark) { //如果需要判断
var value = wx.getStorageSync('sessionId') //这里的sessionId是登录时返回的,存在storage中。
console.log("-----------本地缓存的数据 sessionId----------------")
console.log(value)
//从缓存里拿到sessionId,如果存在则继续,不存在则跳转授权登录页面
if (value == '') {
//拦截需要登录的请求跳转登录页面,不需要登录的请求正常访问
if (getCurrentPages()[getCurrentPages().length - 1].route != "pages/authorization/authorization"){ //如果当前页已经是授权登录页面就不用跳转了
wx.navigateTo({
url: '/pages/authorization/authorization'
})
}
}
}
//wx.request请求
wx.request({
url,
method: params.method || 'GET', //默认为‘GET’
data: params.data || {}, //默认为空
header: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
//收到开发者服务器成功返回的回调函数
success(res) {
if (params.success) {
params.success(res);
console.log(res)
}
},
//接口调用失败的回调函数
fail(res) {
if (params.fail) {
params.fail(res);
console.log(res)
}
},
//接口调用结束的回调函数(调用成功、失败都会执行)
complete(res) {
if (params.complete) {
params.complete(res);
console.log(res)
}
},
});
};
module.exports = {
getListArticle, //获取文章列表
insertComment, //添加评论
};
app.js中
globalData: {
userInfo: null,
URL: 'http://localhost:8080/DoctorRBQ',
}
- 调用代码
const App = getApp();
const api = require('../../utils/api.js')
Page({
data: {
articleList: [], //文章列表
},
onLoad: function () {
},
//获取文章列表
getListArticle: function (e) {
var that = this;
const data = { //需传递的参数
sessionId: wx.getStorageSync('sessionId'),
doctor_id: 1,
"page.pageSize": 1,
"page.currentPage": 1,
}
const method = 'GET' //HTTP请求方法(这里不写也行,因为默认就是‘get’)
api.getListArticle({ //调用接口
method,
data,
success: (res) => { //接收到服务器返回
var searchData = res.data
//成功后 获取自己服务器返回的结果
if (searchData.state == 0) { //判断返回状态码
console.log('获取文章列表成功')
that.setData({
articleList: searchData.data.articlelist,
})
} else {
console.log('获取文章列表失败')
}
},
fail: (res) => {
console.log("获取文章列表接口调用失败")
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getListArticle()
},
})
wx.request回调函数
- 只要成功接收到服务器返回,无论 statusCode 是多少,都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。