把微信小程序异步 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' })
- .then(() => {
- // 成功后处理
- })
- .then(() => {
- // 失败后处理
- })
- }
- })
在其他 page 中使用:
- ///page/index.js
- import { request, setStorage } from '../utils/wx-promise.js'
- page({
- onLoad: () => {
- request({ url: 'http://api.yourapi.com' })
- .then(() => {
- // 成功后处理
- })
- .then(() => {
- // 失败后处理
- })
- },
- onHide: () => {
- setStorage({
- key: 'yourkey',
- data: 'yourvalue'
- })
- .then(() => {
- // 保存成功
- })
- .then(() => {
- // 保存失败
- })
- }
- })
项目地址: https://github.com/tornoda/to-promise
其他更多更具体用法, 直接粘贴 README 了, 如下.
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(
- (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
- }
- )
关于 Promise 对象的使用, 请参见 https://developer.mozilla.org/zh-CN/docs/web/JavaScript/Reference/Global_Objects/Promise
- API
- toPromise(global)
参数
(wx): wx 全局对象. 即 toPromise(wx)这样调用
返回
(function): 参数 (string) 为小程序异步方法名. 返回一个函数, 该函数的参数与返回值如下.
参数:(object) 对应 wx 小程序异步方法中的参数 (OBJECT) 除去 success 与 fail 后的对象. 例如:
官方 API
wx.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',
- 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'}) // 返回一个 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',
- success: (res) => {
- wx.setStorage({
- success: () => {
- //do something
- },
- fail: (err) => {
- //do something if err happend
- }
- })
- },
- fail: (err) => {
- //do something if err happend
- }
- })
- },
- fail: (err) => {
- //do something if err happend
- })
- // 层层回调, 如果逻辑再复杂点, 可能就疯了
来源: https://www.cnblogs.com/looyulong/p/9471424.html