微信小程序异步API为Promise简化异步编程的操作方法


Posted in Javascript onAugust 14, 2018

把微信小程序异步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(() => {
    //保存失败
   })
 }
})

项目地址: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对象的使用,请参见Promise

API

toPromise(global)

参数

(wx): wx全局对象。即toPromise(wx)这样调用

返回

(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',
 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
})
//层层回调,如果逻辑再复杂点,可能就疯了

总结

以上所述是小编给大家介绍的微信小程序异步API为Promise简化异步编程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
layui的table单击行勾选checkbox功能方法
Aug 14 #Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 #Javascript
深入浅析Node环境和浏览器的区别
Aug 14 #Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 #Javascript
react实现换肤功能的示例代码
Aug 14 #Javascript
You might like
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
python操作xml文件示例
2014/04/07 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
北大自主招生自荐信
2013/10/19 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
个人先进事迹材料
2014/12/29 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
python 实现图片特效处理
2022/04/03 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android