微信小程序异步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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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版
2006/10/09 PHP
php strcmp使用说明
2010/04/22 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
微信自定义分享php代码分析
2016/11/24 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python多线程扫描端口代码示例
2018/02/09 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python自动生成model文件过程详解
2019/11/02 Python
Python3常用内置方法代码实例
2019/11/18 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python实现文法左递归的消除方法
2020/05/22 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
如何解决安装python3.6.1失败
2020/07/01 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
实用的简历自我评价
2014/03/06 职场文书
产品质量保证书
2014/04/29 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
python xlwt模块的使用解析
2021/04/13 Python