视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序异步API为Promise简化异步编程的操作方法
2020-11-27 22:10:10 责编:小采
文档


把微信小程序异步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简化异步编程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    下载本文
    显示全文
    专题