微信小程序网络请求封装示例

网络请求

网络请求小程序提供wx.request仔细查看api。这不是美金吗？n年前的阿贾克斯？太旧了。

//官方示例wx.request ({url:' test.php '，//只是一个示例，并不是真正的接口地址data: {x: ' '，y: ''})。header : { ' content-type ' : ' application/JSON '//default value }，success : function(RES){ console . log(RES . data)})小程序支持ES6，所以应该支持Promise。很开心~，我们直接去代码吧。

承诺包

const BaseURl=' https://API . it 120 . cc '；Const http=({URL=' '，param={}，其他}={})={wx。showloading ({title : '在请求中，请耐心等待.'});让time start=date . now()；返回新的Promise((解析，拒绝)={ wx . request({ URL : getUrl(URL)，data: param，header : { ' content-type ' : ' application/JSON '/default value，另一个是' content-type ' : ' application/x-www-form-URL encoded ' }，其他，complete :(RES)={ wx . hide . console . log(` takes $ { date . now()-time start } `)；if(RES . statuscode=200 RES . statuscode 300){ resolve(RES . data)} else { reject(RES)} })})const GetURl=(URL)={ if(URL . indexof(' ://')===-1){ URL=baseURl URL；}返回url}//获取方法const _ get=(URL，param={})={returnhttp ({URL，param})} const _ post=(URL，param={})={returnhttp ({URL，param，method : ' post ' })} const _ put=(URL，param={})={ return http({ url，param，method : ' put ' })} const _ delete=(URL，Param={ })==导出={baseurl，_ get，_ post，_ put，_ delete}使用

Const API=require('././utils/API . js ')//单请求api.get ('list ')。然后(res={console.log (res)})。catch (e={console.log (e)})//多个promise.all请求([api.get ('list ')、API . get(` detail/$ { id } `))])。然后(结果={console.log (result)})。catch (e={console.log (e)})登录问题

作为应用程序，登录是不可避免的。用户的个人信息、相关收藏夹列表等功能只有在用户登录后才能操作。一般来说，我们使用令牌进行识别。

小程序没有登录界面，但是使用wx.login.Wx.login会得到一个代码，当我们拿着这个代码去请求的时候，我们的后台最终会给小程序返回一个token，并且把这个值保存为token，在我们每次请求的时候带来这个值。一般还需要带上用户的信息，比如用户的微信昵称、微信头像等。此时，您需要使用wx.getUserInfo，这涉及到用户授权问题

是否足以带来用户信息？太年轻太单纯！我们的项目不能只有小程序，对应的微信公众平台也可能有对应的app。我们需要打开帐户系统，以便用户可以在我们的项目中拥有相同的帐户。这就需要微信开放平台提供的UnionID。

登陆

//App。jsapp({ OnLounch : function(){ console。日志(' App onLounch ')；变量=这个；//获取商城名称wx。请求({ URL : ' https://API。它是120。cc/'那个。全球数据。子域/config/get-value '，data: { key: 'mallName' }，success : function(RES){ wx。setstorageync('商城名称'，RES . data。数据。值)；} })这个。登录()；这个。GetUserInfo()；},登录：函数(){ var即=thisvar令牌=该。全球数据。令牌；//如果有令牌如果(令牌){ //检查代币是否有效wx。请求({ URL : ' https://API。它是120。cc/'那个。全球数据。子域/user/check-token '，data: { token:success:函数(res) { //如果代币失效了if (res.data.code！=0){那个。全球数据。token=null那个。登录()；//重新登陆} } })返回；} //【1】调用微信自带登陆wx。登录({ success : function(RES){//【2】拿到密码去访问我们的后台换取其他信息wx。请求({ URL : ' https://API。它是120。cc/'那个。全球数据。子域/user/wxapp/login '，data: { code: res.code }，success: function(res) { //如果说这个密码失效的if (res.data.code==10000) { //去注册那个。注册用户()；返回；} //如果返回失败了if (res.data.code！=0) { //登录错误wx。hide loading()；//提示无法登陆wx.showModal({ title: '提示，content: '无法登录，请重试，showCancel:false })返回；} //【3】 如果成功后设置代币到本地那个。全球数据。令牌=RES . data。数据。令牌；//保存用户信息wx.setStorage({ key: 'token '，data : RES . data。数据。token })})})}，//注册？[这个看需求] registerUser:函数(){ var=thiswx。登录({ success : function(RES){ var code=RES . code；//微信登录接口返回的密码参数，下面注册接口需要用到wx。GetUserInfo({ success : function(RES){ var iv=RES . iv；var encryptedData=RES . encryptedData；//下面开始调用注册接口wx。请求({ URL : ' https://API。它是120。cc/'那个。全球数据。子域/user/wxapp/register/complex '，data: {code:code，encrypted data : encrypted data，iv:iv}，//设置请求的参数成功：(RES)={ wx。hide loading()；那个。登录()；} }) } }) } }) }, //获取用户信息getuserinfo :函数(){ wx。getuser info({ success :(data)={ this。全球数据。userinfo=数据。userinfowx。setstorage({ key : ' userInfo '，data: data.userInfo })返回这个。全球数据。userInfo} })，全局数据： { userinfo : null，子域：'34vu54u7vuiuvc546d '，令牌： null }})授权问题

getUserInfo:函数(){ //先调用wx.getSetting获取用户权限设置wx。GetSetting({ success(RES){ console。日志(' 1 ')；if(！RES . AuthSetting['范围。UserInfo ']){ wx。授权({ scope : ' scope。用户信息'，成功(){ //用户已经同意小程序使用录音功能，后续调用wx.getUserInfo接口不会弹窗询问wx。getuser info({ success :(data)={ this。全球数据。userinfo=数据。userinfowx。setstorage({ key : ' userInfo '，data: data.userInfo })返回这个。全球数据。userInfo} })})})else { console。日志(2)；} } }) },小结

网络请求这块，算目前开发项目中必不可少的一块加油~~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。