promise封装wx.request的方法
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了promise封装wx.request的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
上篇文章给大家介绍了,本文重点给大家介绍promise封装wx.request的方法,具体内容如下所示
为什么要封装wx.request?
因为我们请求接口时,有时候会请求一个接口的多个api,如果没有使用封装,那么我们编写代码会变得繁琐,并且也会导致性能问题。
封装的话,利于我们编写,并且提高用户体验和便于代码的修改。
对于封装的选择为什么使用promise?
当我们进行微信小程序的编写时,写到wx.request的时候,我想大家一定不陌生这种写法,和$.ajax的写法有相似之处。我们对于$.ajax的封装,想必大家并不陌生,这也就不难让我们联想到promise了。并且我们的微信小程序是支持es6语法,那promise就是一个好得封装选择。
该怎么封装wx.request?
我们找好了封装的理由和工具,那接下来就是针对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, //成功时执行 suess(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 }) } }
到此这篇关于promise封装wx.request的方法的文章就介绍到这了,更多相关promise封装wx.request内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程