微信小程序异步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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
javascript之对系统的toFixed()方法的修正
May 08 Javascript
JQuery实现自定义对话框的代码
Jun 15 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php中error与exception的区别及应用
2014/07/28 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP crc32()函数讲解
2019/02/14 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
javascript各种复制代码收集
2008/09/20 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
Angular路由简单学习
2016/12/26 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python 类的特殊成员解析
2018/06/20 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
详解Python with/as使用说明
2018/12/13 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python三引号如何输入
2020/07/06 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
甜品店的创业计划书范文
2014/01/02 职场文书
建筑项目策划书
2014/01/13 职场文书
年终总结会议主持词
2014/03/17 职场文书
政治思想表现评语
2014/05/04 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python