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

时间:2021-05-18

网络请求

网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊。

// 官方例子wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) }})

小程序支持ES6,那么就应该支持Promise 了,很开心~, 话不多说直接上代码吧

Promise封装

const baseUrl = 'https://api.it120.cc';const http = ({ url = '', param = {}, ...other } = {}) => { wx.showLoading({ title: '请求中,请耐心等待..' }); let timeStart = Date.now(); return new Promise((resolve, reject) => { wx.request({ url: getUrl(url), data: param, header: { 'content-type': 'application/json' // 默认值 ,另一种是 "content-type": "application/x-plex', data: {code:code,encryptedData:encryptedData,iv:iv}, // 设置请求的 参数 success: (res) =>{ wx.hideLoading(); that.login(); } }) } }) } }) }, // 获取用户信息 getUserInfo:function() { wx.getUserInfo({ success:(data) =>{ this.globalData.userInfo = data.userInfo; wx.setStorage({ key: 'userInfo', data: data.userInfo }) return this.globalData.userInfo; } }) }, globalData:{ userInfo:null, subDomain:"34vu54u7vuiuvc546d", token: null }})

授权问题

getUserInfo: function () { // 先调用wx.getSetting 获取用户权限设置 wx.getSetting({ success(res) { console.log('1'); if (!res.authSetting['scope.userInfo']) { wx.authorize({ scope: 'scope.userInfo', success() { // 用户已经同意小程序使用录音功能,后续调用 wx.getUserInfo接口不会弹窗询问 wx.getUserInfo({ success: (data) => { this.globalData.userInfo = data.userInfo; wx.setStorage({ key: 'userInfo', data: data.userInfo }) return this.globalData.userInfo; } }) } }) } else { console.log(2); } } }) },

小结

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章