首页 > 热点 > 微信 > 正文

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

2024-07-22 01:17:28
字体:
来源:转载
供稿:网友

把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便,谁用谁知道。

微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多,这使得多异步编程会层层回调,代码一复杂,回调起来就想砸电脑。

于是写了一个通用工具,把微信官方的异步API转化为Promise,方便处理(多)异步操作。

你可以这样用:

准备转化后的方法并暴露出

// /utils/wx-promise.jsimport 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.jsimport { request } from './utils/wx-promise.js'App({ onLanuch: () => {  request({ url: 'http://api.yourapi.com' })   .then(() => {    //成功后处理   })   .then(() => {    //失败后处理   }) }})

在其他page中使用:

// /page/index.jsimport { 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)到函数,以便可以取到微信得APIconst 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  } )            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表