前言
在小程序(其他)开发过程中,我们会遇到很多请求,如果每次都去写一遍。尤其是同一个接口好几个地方都要使用,有一点变动就需要全部找出来一个一个改,很不方便维护。所以我们就封装一下,统一管理吧~
wx.request({
url: 'test.php', // 仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
},
fail(err) {
console.log(err)
}
})
封装
1、url(请求地址)
一般url
都是有一个固定前缀(域名),只是后面不同。
例如:
https://domain.com/api/test1
https://domain.com/api/test2
https://domain.com/api/test3
https://domain.com/api/test4
...
所以我们在小程序根目录下新建config.js
,设置一个全局常量apiURL
用来存储前缀。
const config = {
apiURL: 'https://domain.com/api'
}
module.exports = config
2、method(HTTP 请求方法)
const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';
3、header(请求header)header
的话根据method
设置就行了,默认。
header = {
'content-type': 'application/json',
};
4、data(参数)get
请求直接传就可以了post
请求JSON.stringify(data)
一下
5、在小程序util
文件夹下新建request.js
,并将下面代码放进去。
const $config = require('../config');
const baseURL = $config.apiURL;
const Request = (method, url, data, hasCookie) => {
return new Promise(function (resolve, reject) {
let header = {
'content-type': 'application/json',
};
/* 解决sessionid不一致的问题 */
if (!hasCookie) {
header['cookie'] = wx.getStorageSync("sessionid")
};
wx.request({
url: baseURL + url,
method: method,
data: method === 'POST' ? JSON.stringify(data) : data,
header: header,
success(res) {
//请求成功
//判断状态码---errCode状态根据后端定义来判断
if (res.data.status) {
resolve(res);
} else {
//其他异常
reject('运行时错误,请稍后再试');
}
},
fail(err) {
//请求失败
reject(err)
}
})
})
}
module.exports = Request
使用
1、在小程序util
文件夹下新建api.js
,并将下面代码放进去,然后创建请求,并导出。
const $request = require('./request');
const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';
const Api = {
getList: (data) => $request(GET, '/getList', data), //获取列表数据
getDeatil: (data) => $request(GET, '/getDetail', data) //获取详情数据
getOpenId: (data) => $request(GET, '/getOpenId', data, false), //登录,该请求不携带cookie请求
}
module.exports = Api
2、这里我们以获取列表数据接口为例,在.js
文件里引入api.js
const $api = require('../../utils/api.js');
Page({
data: {},
onLoad: function (options) {
this.getData();
},
getData() {
let sendData = {
siteId: 1,
page: 1,
pageSize: 20
};
$api.getList(sendData).then(res => {
//请求成功
console.log(res.data);
}).catch(err => {
//请求失败
console.log(err);
});
}
})
3、解决sessionid
不一致的问题,在登录时获取返回的报文里sessionId
数据,把这个Set-Cookie
的值进行本地存储,以便后面调用。
const $api = require('../../utils/api.js');
Page({
data: {
userInfo: []
hasUserInfo: false
},
onLoad: function (options) {
this.getOpenId();
},
getOpenId: function () {
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
let code = res.code;
$api.getOpenId({ code }).then(res => {
let openid = res.data.openid;
/* 根据后台返回字段hasUserInfo的值判断是否是网站会员 */
if (!res.data.hasUserInfo) {
wx.showModal({
title: '提示',
content: '您还不是该网站的会员,请先注册。',
success: (res) => {
if (res.confirm) {
wx.navigateTo({
url: `/pages/register/register?openId=${openid}`
})
}
}
})
}else {
this.setData({
userInfo: res.data.data,
hasUserInfo: true
});
app.globalData.userInfo = res.data.data;
wx.removeStorageSync('sessionid'); //清除sessionId,否则res.header['Set-Cookie']会报错
wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
}
}).catch(err => {
console.error(err);
});
}
})
}
})