文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么把微信小程序异步API为Promise

2023-06-26 09:05

关注

本文小编为大家详细介绍“怎么把微信小程序异步API为Promise”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么把微信小程序异步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的一个工具库

优点:

  1. 避免小程序异步编程多次回调带来的过多回调导致逻辑不清晰,篇幅过长等问题。

  2. 借助于Promise异步编程特点,支持链式操作,像同步一样写异步。

  3. 转化后得API几乎和微信官方API一样。

使用方法:

  1. 安装

git clone https://github.com/tornoda/to-promise
  1. 在需要用到的地方引入

import toPromise from '/module/to-promise/src/index'
  1. 绑定微信全局对象(wx)到函数,以便可以取到微信得API

const toPromiseWx = toPromise(wx)
  1. 开始转化你需要得异步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

参数

(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}})

应用场景举例

  1. 单次异步调用,参见API最后

  2. 多次异步操作调用,且每下一次调用都会用到前一次返回的结果。
    如:获得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”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯