先记录一下自用基础版本,防止自己后续忘了。
小程序官方文档可以看这里 wx.request
官方示例:
wx.request({
url: 'example.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
用起来还是比较麻烦的,我又不想一个个到处复制粘贴的使用,看上去也不够简洁,所以就利用Promise封装了一下,话不多说,直接上代码!
封装 request.js
/**
request.js
* url - 请求地址
* method - 请求方式
* data - 请求参数的配置对象
* header - 请求头的配置对象
*/
var app = getApp(); //引入全局app.js,我们可以在globalData中定义一些公用的数据,比如baseUrl、token
module.exports = function ({
url,
method,
data,
header = {}
}) {
return new Promise((resolve, reject) => {
const token = wx.getStorageSync('token')
if (token) {
wx.request({
url: app.globalData.baseUrl + url,
method,
data: method == "GET" ? data : JSON.stringify(data),
header: {
'Authorization': token, //这里可以根据业务需求决定是否保留
...header
},
success: (res) => {
if (res.statusCode === 200) {
if (res.data.code !== 200) {
wx.showToast({
title: res.data.msg,
icon: 'none',
})
reject(res.data.msg)
} else if (res.data.code == 401) {
try {
wx.setStorageSync('token', "");
} catch (e) {}
} else {
resolve(res.data)
}
} else {
wx.showToast({
title: res.data.error,
icon: 'none',
})
reject(res.data.error)
}
},
fail: (err) => {
reject(err)
}
})
} else {
wx.showToast({
title: "登录信息不存在或已失效,请重新登录!",
icon: 'none',
})
}
})
}
使用
创建跟app.js同级目录的api文件夹统一管理所有的接口
api/team.js
const request = require("../utils/request") //引入封装好的js文件
module.exports = {
// 团队详情信息
getTeamDetailsApi(tid) {
return request({
url: '/team/teamDetails/' + tid,
method: "get",
})
},
// 退出团队
exitTeamaApi(data) {
return request({
url: '/team/exitTeam',
method: "post",
data
})
},
}
pages/teamDetails/teamDetails.js