脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序 Promise简化回调

微信小程序使用Promise简化回调

 更新时间：2018年02月06日 09:30:16   作者：tomfriwel  
本篇文章主要介绍了微信小程序使用Promise简化回调，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

了解什么是 Promise 对象

在项目中，会出现各种异步操作，如果一个异步操作的回调里还有异步操作，就会出现回调金字塔。

比如下面这种

// 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台
// 登录
wx.login({
  success: res => {
    let code = res.code
    // 请求
    imitationPost({
      url: '/test/loginWithCode',
      data: {
        code
      },
      success: data => {
        // 获取userInfo
        wx.getUserInfo({
          success: res => {
            let userInfo = res.userInfo
            // 请求
            imitationPost({
              url: '/test/saveUserInfo',
              data: {
                userInfo
              },
              success: data => {
                console.log(data)
              },
              fail: res => {
                console.log(res)
              }
            })
          },
          fail: res => {
            console.log(res)
          }
        })
      },
      fail: res => {
        console.log(res)
      }
    })
  },
  fail: res => {
    console.log(res)
  }
})

下面分析如何用Promise来进行简化代码

因为微信小程序异步api都是success和fail的形式，所有有人封装了这样一个方法:

promisify.js

module.exports = (api) => {
  return (options, ...params) => {
    return new Promise((resolve, reject) => {
      api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
    });
  }
}

先看最简单的:

// 获取系统信息
wx.getSystemInfo({
  success: res => {
    // success
    console.log(res)
  },
  fail: res => {

  }
})

使用上面的promisify.js简化后:

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
  // success
  console.log(res)
}).catch(res=>{

})

getSystemInfo

可以看到简化后的回调里少了一个缩进，并且回调函数从9行减少到了6行。

回调金字塔的简化效果

那么再来看看最开始的那个回调金字塔

const promisify = require('./promisify')
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)

// 登录
login().then(res => {
  let code = res.code
  // 请求
  pImitationPost({
    url: '/test/loginWithCode',
    data: {
      code
    },
  }).then(data => {
    // 获取userInfo
    getUserInfo().then(res => {
      let userInfo = res.userInfo
      // 请求
      pImitationPost({
        url: '/test/saveUserInfo',
        data: {
          userInfo
        },
      }).then(data => {
        console.log(data)
      }).catch(res => {
        console.log(res)
      })
    }).catch(res => {
      console.log(res)
    })
  }).catch(res => {
    console.log(res)
  })
}).catch(res => {
  console.log(res)
})

简化回调

可以看到简化效果非常明显。

同样适用于网页或者nodejs等中。

参考

Promise 对象

源代码

tomfriwel/MyWechatAppDemo 的promisePage页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现禁止中文输入的方法

    js实现禁止中文输入的方法

    这篇文章主要介绍了js实现禁止中文输入的方法,需要的朋友可以参考下
    2015-01-01
  • 仿猪八戒网左下角的文字滚动效果

    仿猪八戒网左下角的文字滚动效果

    觉得猪八戒网左下角的文字滚动，效果不错！自己摸索了一下，以自己的方法实现了！没有运用jQuery,不过用了自己的编写的Js库！
    2011-10-10
  • 用js实现手把手教你月入万刀(转贴)

    用js实现手把手教你月入万刀(转贴)

    用js实现手把手教你月入万刀(转贴)...
    2007-11-11
  • 将函数的实际参数转换成数组的方法

    将函数的实际参数转换成数组的方法

    实际参数在函数中我们可以使用 arguments 对象获得 （注：形参可通过 arguments.callee 获得），虽然 arguments 对象与数组形似，但仍不是真正意义上的数组。
    2010-01-01
  • uniapp页面回到顶部两种实现方法

    uniapp页面回到顶部两种实现方法

    这篇文章主要给大家介绍了关于uniapp页面回到顶部两种实现方法的相关资料,在uniapp中要实现回到顶部的效果有两种方法实现,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-08-08
  • ajax分页效果（bootstrap模态框）

    ajax分页效果（bootstrap模态框）

    这篇文章主要为大家详细介绍了ajax分页效果的实现方法，结合bootstrap模态框使用 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript与Div对层定位和移动获得坐标的实现代码

    JavaScript与Div对层定位和移动获得坐标的实现代码

    JavaScript与Div对层定位和移动获得坐标的实现代码，需要的朋友可以参考下。
    2010-09-09
  • 微信小程序自定义指令实例详解

    微信小程序自定义指令实例详解

    自定义指令是微信小程序中用于增强模板功能的重要工具,通过合理使用自定义指令,可以提高代码的可维护性和复用性,简化页面逻辑的编写和管理,这篇文章主要介绍了微信小程序自定义指令,需要的朋友可以参考下
    2024-07-07
  • JS实现页面跳转参数不丢失的方法

    JS实现页面跳转参数不丢失的方法

    这篇文章主要介绍了JS实现页面跳转参数不丢失的方法,结合实例形式对比分析了javascript URL加密函数escape()、encodeURI()与encodeURIComponent()的功能与相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • 基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询

    本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能,本文逐步展示了如何构建基本的地图页面,如何通过点击地图获取经纬度和地理信息,以及如何实现模糊查询地址并在地图上标注,感兴趣的小伙伴跟着小编一起来看看吧
    2024-07-07

最新评论