为什么要封装wx.request?
因为我们请求接口时,有时候会请求一个接口的多个api,如果没有使用封装,那么我们编写代码会变得繁琐,并且也会导致性能问题。
封装的话,利于我们编写,并且提高用户体验和便于代码的修改。
当我们进行微信小程序的编写时,写到wx.request的时候,我想大家一定不陌生这种写法,和$.ajax的写法有相似之处。我们对于$.ajax的封装,想必大家并不陌生,这也就不难让我们联想到promise了。并且我们的微信小程序是支持es6语法,那promise就是一个好得封装选择。
我们找好了封装的理由和工具,那接下来就是针对wx.request这个棘手的东西进行封装了,首先在我们的开发工具中创建好文件
我们用一个大的文件夹将其包裹,在将内容分部处理
首先呢,在我们的fetch.js文件中,我们用promise来对wx.request进行封装:
//promise封装wx.request module.exports=(url,data,method)=>{ //先定义promise let promise=new Promise((resolve,reject)=>{ wx.request({ url:url, data:data, method:method, //成功时执行 success(res){ resolve(res) }, //失败时执行 fail(err){ reject(err) }, }) }) //将promise推出去 return promise }
然后,在我们的api.js文件中,我们可以将所需要请求的东西都放在这里,方便统一管理:
//接口的管理 module.exports={ "banner":"/h8/home/multidata" }
最后,在我们的http.js文件中,将其集中起来使用:
//引入文件 const api=require("./api") const fetch=require("./fetch") //定义路径 let baseUrl="http://123.207.32.32:8000/api" //导出内容 function banner(){ return fetch(baseUrl+api.banner,{},'get') } module.exports={ banner }
封装好以后,我们需在全局app.js中引入才可使用:
const http=require('./http/http.js') App({ http, })
在文件中使用:
//引入app const app=getApp() Page({ data: { list:[] } onLoad: function () { app.http.banner().then(res)=>{ this.setData({ list:res.data.data.banner.list }) } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理