为什么要封装wx.requesrt
因为我们平常项目中基本每页都需要请求数据,而如果我们每次请求输入据都用小程序本身的request就会造成代码量过多,很难找到相应的方法。所有我们要封装一下,从而减少代码量,这个我们可以做到请求的接口和页面分离,方便我们维护和阅读。
我一般是这样封装的,我这里写的是我自己怎么封装的
在我们项目的根目录下新建一个http文件,然后里面新建1个js文件,文件名叫http.js把,然后我们这个http.js主要使用promise封装我们的wx.request();
let baseUrl = "https://xxx"; // 这个变量存放我们接口统一的域名
export default (url,data,method) => { // 导出一个我们封装好的函数
// 接收3个参数 url 请求地址 data 请求参数 method 请求方式
// wx.showLoading({
// title: '加载中',
// })
// 这个是小程序内置的一个loading加载 如果想在请求数据前开启loading 就解开注释就好
return new Promise((resolve, rejects) => { // 我们封装的 request
wx.request({
url:baseUrl+url, // 我们使用域名+我们要请求的接口 = 我们要完整请求的接口
data:data, // 向接口传入的参数
method:method, // 请求方式 get post
success(res) { // 我们请求成功的回调
resolve(res) // 执行我们then 方法
// wx.hideLoading(); 隐藏我们的loading
},
fail(err) { // 我们请求失败的回调
rejects(err); // 执行我们的 catch() 方法
}
})
})
}
封装好这个呢,我们在再这个文件夹中新建一个api.js文件。这个文件专门用来请求我们的接口。
import http from './http'; // 先引入我们封装好的 wx.request
async function getIndexSwiper() { 创建一个async异步函数
let res = await http('/home/swiperdata', {}, 'get');
// 调用http函数 第一个参数 传入我们的请求接口
// 第二个参数 是我们请求时携带的参数
// 第三个参数是 请求防暑
// 使用我们的 await 拦截代码往下执行,直到我们的请求返回数据
return res; 然后返回 请求回来的数据
};
export { getIndexSwiper} // 导出一个对象,引入的时候要使用解构赋值的方式
然后在我们项目中的全局app.js文件中引入;
import { getIndexSwiper } from './request/api'; // 先引入我们封装好的js; 使用解构赋值的方式
App({
http:getIndexSwiper , // 我们直接在App中新建一个对象即可,
)}
如果我们页面中使用这个接口,就在当前页面调用相应的接口即可
const app = getApp(); // 引入我们的全局 app
Page({
onLoad() { // 在进入页面时就加载数据
app.http.getIndexSwiper().then(res => {
console.log(res); // 这是我们请求过来的数据
})
};
})
注意:使用async/await时,需要开启小程序右上角的 详情 -> 本地设置 -> 开启 增强编译,还要开启ES6专ES5
如有不解之处,请留言评论
如有更好的方法,请提出。