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

一:开发了一段时间的微信小程序,发现里面的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文件:

//封装异步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

原文地址:https://www.cnblogs.com/weihuan/p/9113944.html

时间: 2024-11-05 14:54:37

微信小程序使用promise封装异步请求的相关文章

微信小程序 es6 promise

微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入es6-promise.在微信小程序内测的时候promise不需要手动引入,后来被微信移除了.看看效果. promise详细的介绍我就不说了.有很多大神写过. 阮一峰 promise入门 看看目录,引入es6-promise就可以用了. 1.网络请求 wxRequest.js 这里只写了get和post. 我经常会在网络请求的时候用微信原生showToast(),所以最后

微信小程序中使用ECharts 异步加载数据 实现图表

<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas

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

前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object object). 如果直接使用官方提供的个Api,那么每次在进行网络请求调用时,我们都要按官方文档上说的那样传递需要设置的请求参数,然后对不同的请求相应结果做不同的处理.但是前端同服务器端的接口请求中有大部分的请求参数以及响应结果处理都是很类似的,也就没有必要对所有请求代码都重新敲敲一遍,那么对原

微信小程序中promise的使用

/** * wxPromisify * @fn 传入的函数,如wx.request.wx.download */ function wxPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function (res) { resolve(res) } obj.fail = function (res) { reject(res) } fn(obj)

09 微信小程序中 一些封装的函数

变速改变任意对象的任意属性大小的动画函数: 1 //变速改变任意对象的任意属性大小的函数 2 animation_variableSpeed: function (ele, ele_tar, func_callback) { //ele 对象 attr 属性名字 targetPos 目标位置 func_callbk回调函数 3 var that = this; 4 var len = Object.getOwnPropertyNames(ele_tar).length; //它是获取ele_ta

微信小程序 网络请求之re.request 和那些坑

微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 首先,先确认是否设置了合法域名,或者在开发环境下不校验合法域名.关于设置合法域名请看→微信小程序 网络请求之设置合法域名   以下是wx.request的详细说明,截图于微信小程序开发文档 在微信index.js 发起一个普

微信小程序:wx.request之post请求后端无法获取数据的问题

前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题:当我们使用POST方式请求时,后端无法获取数据,但使用GET方式便可以获取数据?? 解决办法: 设置请求的 header: header: { "Content-Type": "application/x-www-form-urlencoded" }, 例如:

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

在微信小程序中使用redux

本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处理异步请求(异步操作),如何解决? 如何正确使用store的三大核心方法(getStore dispatch subscribe)? redux并不是react专属,所以他可以在任何地方使用,小程序也不例外.解决上面三个问题就可以了. 问题一: 如何在小程序中引入redux状态管理库,及它相关的插件