微信小程序异步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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
一个程序下载的管理程序(二)
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
实现PHP搜索加分页
2016/10/12 PHP
Stop SQL Server
2007/06/21 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
小小的船教学反思
2014/02/21 职场文书
民间借贷协议书范本
2014/10/01 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python