VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

如何在applet中两次封装网络请求(applet网络请求方法)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

本文介绍了微信小程序开发中的网络请求封装,并讨论了二次封装的原因以及具体的封装实现,希望对大家有所帮助!

如何在applet中两次封装网络请求(applet网络请求方法)

1.背景开发微信小程序时,不可避免地会涉及到网络请求操作。小程序提供的本地网络请求api如下:

wx . request({ URL:& amp;#39;https://test.com/******&第39名;,//只是一个例子,不是真正的接口地址数据:{ x:&;#39;& amp#39;y:& amp;#39;& amp#39;},header:{ & amp;#39;内容-类型&amp。#39;:& amp#39;应用/JSON & amp;#39;//默认值},success(RES){ console . log(RES . data)})其中:

Url:请求的后台接口的地址;

数据:请求接口需要携带的参数;

Header:设置请求的头部,content -类型默认为application/json。

成功:指请求成功后的回调,res包含请求成功后返回的数据。

既然已经提供了官方api,为什么还需要进行二次包装呢?

2.二次打包的原因首先,避免代码重复。

避免重码主要体现在以下几点:

1)我们公司调用后台接口。除了登录接口之外,所有其他接口请求都需要在请求头中添加令牌。如果没有封装,每次我们调用网络请求时都要传递令牌是非常麻烦的。

2)当发出网络请求时,通常需要给出一个加载框来提示用户正在加载...如下图所示:

如果不封装它,如果需要在每次网络请求时弹出加载框,则需要重复编写以下代码:

当请求开始时,将显示加载框。

2.png

请求结束时,隐藏加载框:

3.png

第二,避免打电话回地狱。

如果一个页面有多个网络请求,并且这些请求是按一定顺序排列的,而wx.request是异步操作,那么最直接的结果如下:

onLoad:function(){ wx . request({ URL:& amp;#39;https://test.com/api/test01&第39名;,成功:res = & gt{ wx . request({ URL:& amp;#39;https://test.com/api/test02&第39名;,成功:res = & gt{ wx . request({ URL:& amp;#39;https://test.com/api/test03&第39名;,成功:res = & gt{ test data list:RES . content } })} })}”,是不是很像俄罗斯娃娃?

为了避免这种写法,当然是封装了,在这个地方采用了Promise。

3、具体包装工程结构:

4.png

在utils文件夹下创建了两个新文件。

1)http utils . js

网络请求的封装,具体代码如下:

const ui = require(& amp;#39;。/ui & amp;#39;);const BASE _ URL = & amp#39;https://www . wanandroid . com & amp;#39;/* * *网络请求request * obj.data请求接口要传输的数据* obj.showLoading控制是否显示加载。默认值为false,并且不显示。* obj.contentType默认为application/JSON * obj . method请求的方法默认为GET * obj.url * obj.message加载数据提示*/函数请求(obj){ return new promise(function(resolve,reject){ if(obj . show loading){ ui。show loading(obj。message?对象消息:#39;装货...&;#39;);} var data = { }if(obj . data){ data = obj . data;} var contentType = & amp#39;应用/JSON & amp;#39;;if(obj . content type){ content type = obj . content type;} var方法= & amp#39;获取& amp#39;;if(obj . method){ method = obj . method;} wx . request({ URL:base _ URL+obj . URL,data:数据,method:方法,//添加请求头:{ &;#39;内容-类型&amp。#39;:content type & amp;#39;token & amp#39;:wx . getstoragesync(& amp;#39;token & amp#39;)//获取保存的令牌},//请求成功:function(RES){ console . log(&;#39;= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =#39;)console . log(& amp;#39;= =接口地址:&;#39;+obj . URL);console . log(amp;#39;= =接口参数:&;#39;+JSON . stringify(data);console . log(amp;#39;= =请求类型:&;#39;+方法);console . log(& quot;= =界面状态:“+RES . status code);console . log(& quot;= =接口数据:“+JSON . stringify(RES . data));console . log(amp;#39;= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =#39;)if(RES . status code = = 200){ resolve(RES);} else if(RES . status code = = 401){//授权无效拒绝(& quot登录过期“);jumpToLogin();//跳转到登录页面}否则{//请求失败拒绝(& quot请求失败:“+RES . status code)} },fail:function(err){//服务器连接异常console . log(&;#39;= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =#39;)console . log(& amp;#39;= =接口地址:&;#39;+URL)console . log(& amp;#39;= =接口参数:&;#39;+JSON . stringify(data))console . log(& amp;#39;= =请求类型:&;#39;+方法)console . log(& quot;= =异常服务器连接“)console . log(& amp;#39;= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =#39;)拒绝(& quot服务器连接异常,请检查网络并重试“);},complete:function(){ ui . hide loading();} }) });}//跳转到登录页面函数跳转登录(){wx。重新启动({ URL:&;#39;/pages/log in/log in & amp;#39;)}模块。exports = {request,}代码中有详细的注释,这里就不解释了。

2)ui . js

主要是一些简单的wx UI操作的封装,代码如下:

export const show toast = function(content,duration){ if(!duration)duration = 2000 wx . show toast({ title:content,icon:& amp;#39;无与。#39;,duration: duration,})} var isShowLoading = false export const show loading = function(title){ if(isShowLoading)return wx . show loading({ title:title?标题:& amp#39;& amp#39;,mask:true,success:()= & gt;{ isShowLoading = true } })} export const hide loading = function(){ if(!Is show loading)返回is show loading = false wx。hiding()} 3)特定调用。

在index.js发出网络请求,具体代码如下:

//index . js const http utils = require(& amp;#39;../../utils/httpUtils & amp;#39;)const ui = require(& amp;#39;../../utils/ui & amp;#39;)page({ data:{ str:null,},onload(){ },//获取接口数据getnetinfo(){ Letobj = { method:“POST & quot;,showLoading: true,url:`/user/register?用户名= pppooo11 & amp密码= pppooo & amprepassword=pppooo `,消息:& quot正在注册。。。”} httputils . request(obj)。然后(res = & gt{ this . setdata({ str:JSON . stringify(RES)})ui . show toast(RES . data . error msg)})。catch(err = & gt;{ console . log(& amp;#39;误差与误差。#39;) });}})好了,就这样结束了。如果以上内容对你有帮助的话,别忘了点赞哦。

更多编程相关知识请访问:编程入门!!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:如何在applet中两次封装网络请求(applet网络请求方法) https://zhujicankao.com/107710.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 如何在applet中两次封装网络请求(applet网络请求方法)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!