• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序使用promise封装异步请求

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一:开发了一段时间的微信小程序,发现里面的API都是这样的:

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

如果代码多了逻辑多了,就会出现所谓的回调地狱。

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function(res) {
    if (res.confirm) {
      wx.showModal({
          title: '提示',
          content: '这是一个模态弹窗',
          success: function(res) {
          if (res.confirm) {
              console.log('用户点击确定')
         } 
      }
    })
    }
  }
})                  

二:ES6的promise

下面使用新学习的promise来封装微信小程序的回调API,使代码变得更优雅,易于维护。

util.js文件:

//添加finally:因为还有一个参数里面还有一个complete方法。
Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        value => P.resolve(callback()).then(() => value),
        reason => P.resolve(callback()).then(() => { throw reason })
    );
};

//
封装异步api const wxPromisify = fn => { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function (res) { resolve(res) } obj.fail = function (res) { reject(res) } fn(obj) }) } } const getLocationPromisified = wxPromisify(wx.getLocation);//获取经纬度 const showModalPromisified = wxPromisify(wx.showModal);//弹窗 // 封装post请求 const post = (url,data) => { var promise = new Promise((resolve, reject) => { //网络请求 wx.request({ url: url, data: data, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded', 'token':wx.getStorageSync('token') }, success: function (res) {//服务器返回数据 if (res.statusCode == 200) { resolve(res); } else {//返回错误提示信息 reject(res.data); } }, error: function (e) { reject('网络出错'); } }) }); return promise; } // 封装get请求 const get = (url, data) => { var promise = new Promise((resolve, reject) => { //网络请求 wx.request({ url: url, data: data, header: { 'content-type': 'application/json', 'token': wx.getStorageSync('token') }, success: function (res) {//服务器返回数据 if (res.statusCode == 200) { resolve(res); } else {//返回错误提示信息 reject(res.data); } }, error: function (e) { reject('网络出错'); } }) }); return promise; } module.exports = { post, get, getLocationPromisified, showModalPromisified }

在index引用之后就能避免回调地狱了。

//index.js
//获取应用实例
const app = getApp()
const util = require('../../utils/util')
Page({
  data: {
    
  },
  onLoad(){
    util.showModalPromisified({
      title: '提示',
      content: '这是一个模态弹窗',
    }).then(function(res){
      console.log(res);
      if (res.confirm){
        return util.getLocationPromisified({
          type: 'wgs84'
        })
      }
    }).then(function(res){
      console.log(res)
      return util.get('https://easy-mock.com/mock/59b6617ae0dc663341a5dea4/itaem/123',{})
    }).then(function(res){
      console.log(res)
    }).catch(function(res){
      console.log(res)    
    })
  }
})

参考:https://www.jianshu.com/p/e92c7495da76

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序开发工具黑屏发布时间:2022-07-18
下一篇:
小程序上啦下拉刷新window配置发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap