点这里
- 新建一个文件夹request（随便起）
- 新建env.js
2.1 在这里，配置接口地址的公共地址部分、方便后续引用。
//这里使用的接口呢都是自己模拟的，可以根据自己的需求进行添加
module.exports={
//开发环境的url
dev:{
baseUrl:"http://xxxx"
},
//测试环境url
test:{
// baseUrl:"http://www.test.com"
},
//线上环境url
prod:{
// baseUrl:'https://api.it120.cc'
baseUrl:"https://xxx"
}
}
- 新建request.js
3.1 引入env中的url：项目接口地址的公共地址部分。
3.2 二次封装wx.request
// 引入env中的url
const {
baseUrl
} = require('./env.js').dev;//这里上线的时候换成线上地址
module.exports = {
/**
* 二次封装wx.request
* url:请求的接口地址
* method:请求方式 GET,POST....
* data:要传递的参数
* header:请求头
*/
request: (url, method, data, header) => {
// console.log('这是我封装的ajax请求', url, method, data, header);
let _url = `${baseUrl}/${url}`;//这里使用ES6的写法拼接的字符串
return new Promise((resolve, reject) => {
// wx.showLoading({
// title: '正在加载',
// });
wx.request({
url: _url,
method: method,
data: data,
header: header,
success: (res) => {
// console.log('从接口获取到的数据', res);
let data = res.data;
if (res.statusCode == 200) {
// wx.hideLoading();
//统一拦截--------401未登录活登录已过期token过期
if (data.code == 401) {
// wx.hideLoading();
wx.reLaunch({
url: '/pages/login/login?token=0',//拼接参数--表明是401--过去的
})
}
if (data.code == 200) {
resolve(res.data);
// wx.hideLoading();
// wx.showToast({
// title: '请求成功',
// })
}
if (data.code == 500) {
// wx.hideLoading();
wx.showToast({
title: '操作失败',
icon: 'none',
duration: 2000
})
}
if (data.code == 404) {
// wx.hideLoading();
wx.showToast({
title: '参数效验失败',
icon: 'none'
})
}
if (data.code == 403) {
// wx.hideLoading();
wx.showToast({
title: '没有相关权限',
icon: 'none'
})
}
if (data.code == 402) {
wx.hideLoading();
wx.showToast({
title: '账户已禁用',
icon: 'none'
})
}
} else {
// wx.hideLoading();
wx.showToast({
title: '请求有误',
icon: 'none'
})
}
},
fail() {
// wx.hideLoading();
reject('发送失败');
wx.reLaunch({
url: '/pages/login/login', //
})
wx.showModal({
title: '提示',
content: '网络错误',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
});
});
},
}
- 新建api.js：在这里放左右的请求方法。
4.1 引入封装的reuest请求。
4.2 写入自己的请求方法。
//引入封装的reuest请求
const {
request
} = require('./request.js');
const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';
//请求头根据自己的情况配置
//这个是发送登录请求的请求头不需要携带token
//const headerPost = {
// 'content-type': 'application/json',
//};
//这里的请求头需要携带token--但是直接在这里获取会有异步，所以我实在要请求数据的地方获取存在本地的token
// const headerPostToken = {
// 'content-type': 'application/json',
// 'QS_TOKEN': app.globalData.token
// };
// const headerGet = {
// 'content-type': 'application/x-www-form-urlencoded',
// 'QS_TOKEN': wx.getStorageSync('QS_TOKEN')
// };
//基于业务封装的接口
module.exports = {
/*企业认证-----POST
参数： */
certification: (data, headerPostToken) => {
return request('comp/certification', POST, data, headerPostToken);
},
/*个人中心-----GET
参数： */
PersonalCenter: (header) => {
console.log('api', header);
return request('user', GET, '', header); //没有请求参数，所以为空(如果不加【'',】的话就会出错)
},
/*获取产品列表-----GET
参数：*/
getShopList: (searchCode, status, header) => {
return request('storage/list?searchCode=' + searchCode + '&status=' + status + '&page=1&limit=1000', GET, '', header);
},
}
- 引用方法—在你需要用到该方法的页面的js；[eg:index.js]
5.1 引入方法
//1.引入方法
const { getShopList } = require('../../request/api.js');
// 请求产品列表
getAllOrders(searchCode, status) {
// console.log(status, '调用了获取库存的方法');
var that = this;
//获取token---设置请求头
var header = {
'content-type': 'application/x-www-form-urlencoded',
'QS_TOKEN': wx.getStorageSync('QS_TOKEN')
};
// 进入请求所有订单数量
getShopList(searchCode, status, header).then(resData => {
// console.log('请求成功----',status,'---', resData);
if (resData.code == 200) {
// 请求成功
}
}).catch(err => {
// console.log(err)
})
},
这里查看进阶版请求封装
（拦截器：处理token过期之后的无感知登录+重新发起刚才未成功的请求）
