我们在小程序中，经常会和网络API打交道，微信平台提供了request网络接口，和上传下载接口。
我们可以将网络请求进行封装，方便我们和后端API进行交互。
1，创建一个request.js文件，输入如下内容：
const http = ({
url = "",
param = {},
...other
} = {}) => {
// wx.showLoading({
// title: "网络请求中..",
// });
let timeStart = Date.now();
let cookie = wx.getStorageSync("sessionKey");
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: param,
header: {
"content-type": "application/json", // 默认值
Cookie: cookie,
},
...other,
timeout: 3000,
complete: (res) => {
// wx.hideLoading();
console.log(`耗时${Date.now() - timeStart}`);
if (res.statusCode >= 200 && res.statusCode < 300) {
resolve(res);
} else {
reject(res);
}
},
});
});
};
我们封装了wx.request接口，并使用了Prosimse用法，在请求中，我们设置网络超时时间，这里设置的3000毫秒，即3秒时间。并在请求头中设置了cookie，和content-type，使用JSON格式提交数据。
2，定义get请求，get请求一般用来获取数据。
// get方法
function httpGet(url, param = {}) {
return http({
url: getUrl(url),
param,
});
}
3，定义post请求，post请求一般用于提交数据。
function httpPost(url, param = {}) {
return http({
url: getUrl(url),
param,
method: "post",
});
}
上面是网络请求的封装，一般位于公共文件夹中。下面就是我们使用这些封装的网络请求，去获取业务API接口的数据了。
4，这里以获取IP做演示，注意，我们需要处理网络请求的各种异常情况。catch()最好加上，并进行处理，我实际碰到的情况，就是打开小程序，一直显示加载中，不结束，后经排查，是网络的问题，而因为我没有进行处理catch，导致一直转圈圈。
doQueryIP: function () {
const that = this;
wx.showLoading({
title: '加载中...',
mask: true,
})
ohttp.httpGet('/pubip').then((res) => {
if (res.data.code == 1) {
const rdata = res.data.data;
const ip = rdata.trim().split(" ")[0];
that.setData({
rdata: rdata,
ip:ip,
})
wx.hideLoading({
success: (res) => { },
})
wx.showToast({
title: '查询成功',
})
} else {
wx.hideLoading({
success: (res) => { },
})
wx.showToast({
title: '请稍后再试',
})
}
}).catch((err)=>{
console.log(err);
wx.hideLoading({
success: (res) => { },
})
})
},
