今天想记录一下怎么向后台请求数据,将函数进行封装,实现复用~
官方的请求方法:
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
这是封装好的函数:
公共函数
async function request(url, {
method = 'GET',
data
} = {}) {
wx.showLoading({
title: '加载中...', //显示加载动画
})
return new Promise((resolve, reject) => {
wx.request({
url: `https://abs.xyz${url}`, //你要请求的接口,一般协议域名都不会变,所以就固定写在这里,url就是你传进来的具体路径
method: method.toUpperCase(), //请求方法,上面参数里面默认是GET,toUpperCase将字符串转换成大写
data: data, //除get方法,其他请求时向后台传送的数据
header: {
'content-type': 'application/json' // 默认值,这里看后端需要什么header进行更改即可
},
success(res) {
if (res.statusCode >= 200 && res.statusCode < 300) { //这里对请求状态统一进行判断,就不用每次调用函数的时候判断请求状态了
resolve(res.data);
return;
}
reject();
},
fail(err) {
reject(err);
},
complete:()=>{
setTimeout(()=>{
wx.hideLoading() //隐藏加载动画
},1000)
}
})
})
}
页面调用:
1 页面引入公共函数
const request=require('../utils/request') //函数所在的文件夹路径
2 调用
async onLoad(options) {
const allCity = await request('/city') //get方法
const res = await request('/article/collect', {
method: 'POST', //post方法
data: {
articleId: Number(this.data.articleId) // 这里面是后端需要的数据,格式按照你们约定的来
}
})
},
总结:
1 这里请求函数使用的是异步函数 async ,确保函数返回承诺,其他值将自动包装在已解决的Promise中。简单来说就是这个函数一定会等待到返回值,无论是不是你想要的,都会给你一个结果。
2 函数里使用的 wx.showLoading()可以在页面加载时显示加载动画提示,数据请求完毕 调用wx.hideLoading()函数关闭loading动画,如果觉得刷新请求太快,会有动画闪烁,可以加一个setTimeout,延迟关闭动画。