把微信小程序异步 API 转化为 Promise. 用 Promise 处理异步操作有多方便, 谁用谁知道.
微信官方没有给出 Promise API 来处理异步操作, 而官方 API 异步的又非常多, 这使得多异步编程会层层回调, 代码一复杂, 回调起来就想砸电脑.
于是写了一个通用工具, 把微信官方的异步 API 转化为 Promise, 方便处理 (多) 异步操作.
你可以这样用:
准备转化后的方法并暴露出
- // /utils/wx-promise.JS
- import toPromise from '/module/to-promise/src/index'
- const toPromiseWx = toPromsie(wx)
- export const request = toPromiseWx('requset')
- export const getLocation = toPromiseWx('getLocation')
- export const setStorage = toPromiseWx('setStorage')
- //export 其他你项目中可能用到的异步 API
在其他文件中使用
在 App.JS 中使用:
- `//App.js`
- `import { request } from` `'./utils/wx-promise.js'`
- `App({`
- `onLanuch: () => {`
- `request({ url:` `'[http://api.yourapi.com](http://api.yourapi.com/)'` `})`
- `.then(() => {`
- `// 成功后处理 `
- `})`
- `.then(() => {`
- `// 失败后处理 `
- `})`// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- `}`
- `})`
在其他 page 中使用:
- `// /page/index.js`
- `import { request, setStorage } from` `'../utils/wx-promise.js'`
- `page({`
- `onLoad: () => {`
- `request({ url:` `'[http://api.yourapi.com](http://api.yourapi.com/)'` `})`
- `.then(() => {`
- `// 成功后处理 `
- `})`
- `.then(() => {`
- `// 失败后处理 `
- `})`
- `},`
- `onHide: () => {`
- `setStorage({`
- `key:` `'yourkey'``,`
- `data:` `'yourvalue'`
- `})`
- `.then(() => {`
- `/ 保存成功 `
- `})`
- `.then(() => {`
- `// 保存失败 `
- `})`
- `}`// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- `})`
to-promise 是一个转换微信小程序异步 API 为 Promise 的一个工具库
优点:
避免小程序异步编程多次回调带来的过多回调导致逻辑不清晰, 篇幅过长等问题.
借助于 Promise 异步编程特点, 支持链式操作, 像同步一样写异步.
转化后得 API 几乎和微信官方 API 一样.
使用方法:
安装
使用 Git 安装到项目根目录 / module,
Git clone https://github.com/tornoda/to-promise
或直接下载放入项目目录下如:/module
在需要用到的地方引入
import toPromise from '/module/to-promise/src/index'
绑定微信全局对象 (wx) 到函数, 以便可以取到微信得 API
const toPromiseWx = toPromise(wx)
开始转化你需要得异步 API
- //apiName 为微信异步方法名, 如对 wx.request()进行转化
- const request = toPromiseWx('request')
- // 直接使用 request 方法
举例:
- import toPromise from '/module/to-promise/src/index'
- // 转换 wx.getStorage()
- const getStorage = toPromsie(wx)('getStorage')
- // 使用
- getStorage({ key: 'test' })
- .then(// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- (res) => {
- //res 的值与 wx.getStorage({ success: (res) => {} })中的 res 值一样
- //res = {data: 'keyValue'}
- console.log(res.data)// 控制台打印 storage 中 key 对于的 value
- return res.data// 如果需要继续链式调用转化后的 API, 需要把值显示返回
- },
- (err) => {
- //err 的值与 wx.getStorage({ success: (err) => {} })中的 err 值一样
- throw err
- }
- )// 欢迎加入全栈开发交流圈一起学习交流: 864305860
返回
(function): 参数 (string) 为小程序异步方法名. 返回一个函数, 该函数的参数与返回值如下.
参数:(object) 对应 wx 小程序异步方法中的参数 (OBJECT) 除去 success 与 fail 后的对象. 例如:
官方 APIwx.getLocation(OBJECT)的 OBJECT 接受如下属性: type altitude success fail complete, 那么去除 (success fail) 后为: type altitude complete.
返回: (pending Promsise) 返回一个未知状态的 Promise 对象, 在该对象上调用. then(onFulfilled, onRejected)方法来处理对用成功或失败的情况. onFulfilled 为请求成功后调用的回调函数, 参数为返回值, onRejected 为请求失败后的回调函数, 参数为返回的错误信息.
简单点来说,
- const getLocation = toPromiseWx('getLocation')
- getLocation({
- type: 'wgs84',
- altitude: true,
- complete: () => { console.log('to-promsise is awesome') }
- }).then(
- (res) => {//dosomething if succeed},
- (err) => {//dosomething if failed}
- )
与下面官方调用等价
- wx.getLocation({
- type: 'wgs84',// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- altitude: true,
- complete: () => { console.log('to-promsise is awesome') },
- success: (res) => {//dosomething if succeed},
- fail: (err) => {//dosomething if failed}
- })
应用场景举例
单次异步调用, 参见 API 最后
多次异步操作调用, 且每下一次调用都会用到前一次返回的结果.
如: 获得 GPS 信息后, 根据 GPS 信息获取天气信息, 取得天气信息后立马存入 localStorage.
- `import toPromise from` `'/module/to-promise/src/index'`
- `const toPromiseWx = toPrmise(wx)`
- `// 方法转换 `
- `const getLocation = toPromiseWx(``'getLocation'``)`
- `const request = toPromiseWx(``'request'``)`
- `const setStorage = toPromiseWx(``'setStorage'``)`
- `// 链式写逻辑 `
- `getLocation()` `// 获取位置信息 `
- `.then(`
- `(res) => {` `// 位置获取成功后的处理, res 为返回信息 `
- `// 处理 res 后返回有用的信息, 这里直接返回 res, 用于演示 `
- `return` `Promise.resolve(res)` `// 必须 `
- `},`
- `(err) => {` `// 位置获取失败后的错误处理, err 为错误信息 `
- `// 错误处理 `
- `return` `Promise.resolve(err)` `// 必须 `
- `}`
- `)`
- `.then(`
- `(res) => {` `// 根据位置获取成功后的信息, 请求天气信息 `
- `return` `request({ url:` `'[http://api.weather.com](http://api.weather.com/)'``}) // 返回一个 pending 状态下的 Promise`
- `}`
- `)`// 帮助突破技术瓶颈, 提升思维能力
- `.then(`
- `(res) => {` `// 天气获取成功后存入 storage 的回调 `
- `setStorage({`
- `key:` `'test'``,`
- `data:` `'res'`
- `})`
- `},`
- `(err) => {`
- `// 天气获取失败后执行这里, err 为获取天气失败的错误信息 `
- `}`
- `)`
如果使用官方的 API 写上述逻辑, 代码是这样的:
- `wx.getLocation({`
- `success: (res) => {`
- `//some transformation with res`
- `wx.request({`
- `url:` `'[http://api.weather.com](http://api.weather.com/)'``,`
- `success: (res) => {`
- `wx.setStorage({`
- `success: () => {`
- `//do something`
- `},`
- `fail: (err) => {`
- `//do something if err happend`
- `}`
- `})`
- `},`
- `fail: (err) => {`
- `//do something if err happend`
- `}`// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- `})`// 面向 1-3 年前端人员
- `},`// 帮助突破技术瓶颈, 提升思维能力
- `fail: (err) => {`
- `//do something if err happend`
- `})`
- `// 层层回调, 麻烦
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/2c49aff223e74ba69298b183c8390de5.html