欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 小程序的填坑小技巧之网络请求改造

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:738

高端HTML5响应式企业通用网

2020-05-06   浏览:519

html5响应式外贸网站英文版

2020-05-08   浏览:505

HTML5自适应律师工作室类网

2020-04-04   浏览:502

HTML5影视传媒文化公司类网

2020-05-12   浏览:496

小程序的填坑小技巧之网络请求改造

发布时间:2020-10-24  

小程序在内测的时候就已经开始玩了,不过最开始的时候觉得,这sx东西东西怎么这么坑的样子,网络请求居然不是返回Promise而是用Callback的方式, 传值居然不能把值写在方法里只能用dataset,在这个全面组件化的大环境下居然不支持组件化...

其实最开始主要是书写时习惯的问题,秉承着我又不做小程序开发,就先忍着你的态度放任不管了。然而天有不测风云,最近因为业务的需求不得不做小程序相关的开发,我就倔脾气果断就不能忍了。果断的把不爽的地方改成能按我喜欢的方式来走,其中还遇到了一些其他的坑,一个个慢慢填,并把这些记录下来整理成了文章。

网络请求

网络请求小程序提供了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) } })

现在还是只有一个请求就已经感觉写的很长了,如果一个页面需要多个请求呢,如果请求的顺序还有要求呢该怎么办,各种嵌套又臭又长,如果要求所以请求都完成之后再显示界面呢 瞬间懵逼。

这个时候我弱弱的看了一眼小程序的JS版本的支持,欧耶,比较良心的支持ES6。也就是说我们可以将其改成Promise是可能的。接下来看我如何改造。

/* utils/api.js 自定义网络请求 */ const baseURL = 'https://yourapi.com' // 自己后台API地址 const http = ({ url = '', params = {}, ...other} = {}) => { wx.showLoading({ title: '加载中...' }) let time = Date.now() console.log(`开始:${time}`) return new Promise((resolve, reject) => { wx.request({ url: getUrl(url), data: params, header: getHeader(), ...other, complete: (res) => { wx.hideLoading() console.log(`耗时:${Date.now() - time}`) if (res.statusCode >= 200 && res.statusCode < 300) { resolve(res.data) } else { reject(res) } } }) }) } const getUrl = url => { if (url.indexOf('://') == -1) { url = baseURL + url } return url } const getHeader = () => { try { var token = wx.getStorageSync('token') if (token) { return { 'token': token } } return {} } catch (e) { return {} } } module.exports = { baseURL, get (url, params = {}) { return http({ url, params }) }, post(url, params = {}) { return http({ url, params, method: 'post' }) }, put(url, params = {}) { return http({ url, params, method: 'put' }) }, // 这里不能使用 delete, delete为关键字段 myDelete(url, params = {}) { return http({ url, params, method: 'delete' }) } }

接了下来我们就可以正常的时候用了,写一下简单的例子吧

const api = require('../../utils/api.js') // 单个请求 api.get('list').then(res => { console.log(res) }).catch(e => { console.log(e) }) // 一个页面多个请求 Promise.all([ api.get('list'), api.get(`detail/${id}`) ]).then(result => { console.log(result) }).catch(e => { console.log(e) })

如果习惯了 fetch 以及 axios 的朋友应该都会比较喜欢这种写法。 在做网络请求的时候还遇到一个问题,登录授权的问题。

登录问题

做一个应用,肯定避免不了登录操作。用户的个人信息啊,相关的收藏列表等功能都需要用户登录之后才能操作。一般我们使用token做标识。然后又会涉及到token不存在,用户第一次登录,token过期后,重新登录等问题。比较常规的操作是直接跳转到登录页面。

然后坑就出现了,小程序并没有登录界面,使用的是 wx.login 。 wx.login 会获取到一个 code,拿着该 code 去请求我们的后台会最后返回一个token到小程序这边,保存这个值为 token 每次请求的时候带上这个值。(详情可以查看小程序登录。)

然而仅仅这样就够了吗? 很显然并不是。一般还需要把用户的信息带上比如用户微信昵称,微信头像等,这时候就需要使用 wx.getUserInfo ,这里涉及到一个用户授权的问题,留一个坑接下来再解决。带上用户信息就够了嘛? too young too simple!我们的项目不可能只有小程序,相应的微信公众平台可能还有相应的App,我们需要把账号系统打通,让用户在我们的项目中的账户是同一个。这就需要用到微信开放平台提供的 UnionID 。