如何在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）当发出网络请求时，通常需要给出一个加载框来提示用户正在加载...如下图所示:

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

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

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

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

如果一个页面有多个网络请求，并且这些请求是按一定顺序排列的，而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、具体包装工程结构:

在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