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

JeOam 发布于2019-08-26 11:37 / 2934人阅读

摘要：了解什么是对象在项目中，会出现各种异步操作，如果一个异步操作的回调里还有异步操作，就会出现回调金字塔。回调金字塔的简化效果那么再来看看最开始的那个回调金字塔登录请求获取请求可以看到简化效果非常明显。同样适用于网页或者等中。

了解什么是 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=>{

})

可以看到简化后的回调里少了一个缩进，并且回调函数从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页面

GPU云服务器云服务器微信小程序怎么使用怎样使用微信小程序如何使用微信小程序微信小程序如何在电脑上使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107263.html

把微信小程序异步API转为Promise，简化异步编程，告别层层回调

摘要：微信官方没有给出来处理异步操作，而官方异步的又非常多，这使得多异步编程会层层回调，代码一复杂，回调起来就想砸电脑。是一个转换微信小程序异步为的一个工具库优点避免小程序异步编程多次回调带来的过多回调导致逻辑不清晰，篇幅过长等问题。把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便，谁用谁知道。微信官方没有给出Promise API来处理异步操作，而官方AP...

antz 2019-08-26 12:11 评论0 收藏0
微信小程序踩坑系列——从wx.request谈谈异步处理

摘要：其实我们在同步流程中才说返回，异步没有返回这个概念或者说异步返回是没有意义的，异步对应的是回调，也就是说，对于一个异步函数，我们应该传入一个回调函数来接收结果。原文链接：https://www.xksblog.top/talk-... 见到wx.request的第一眼，就让我想起了$.ajax这东西，使用起来确实有很多不方便，不能忍，幸好小程序是支持ES6语法的，所以可以使用pro...

RdouTyping 2019-08-23 12:09 评论0 收藏0
promise化微信小程序api

摘要：化的原因微信小程序的用的是对象参数回调模式很容易造成回调地狱代码难以阅读判断修改和调试微信小程序示例获取用户信息已经授权，可以直接调用获取头像昵称，不会弹框可以将发送给后台解码出可以看出两层的时候代码就很别扭了化小程序编写一个可以小程序的公 promise化的原因微信小程序的api用的是对象参数回调模式,很容易造成回调地狱,代码难以阅读,判断,修改和调试. 微信小程序api示例 /...

AlphaWatch 2019-08-22 16:14 评论0 收藏0
微信小程序（新）必备知识

摘要：组件化开发小程序在未出现组件之前，要重用的话，只能简单复制粗暴黏贴组件化开发的优势可复用代码分离，可维护更重要定义组件先创建文件夹用于存放组件，然后再创建组件文件夹注意组件的文件名并不是组件名，而页面文件名是页面名，组件名是引用时才确定的引组件化开发小程序在未出现组件之前，要重用的话，只能简单（复制）粗暴（黏贴）组件化开发的优势： 1、可复用（wxml/wxss/js） 2、代...

mengera88 2019-08-26 12:15 评论0 收藏0
带你玩转小程序开发实践｜含直播回顾视频

摘要：小程序的视图层目前使用作为渲染载体，而逻辑层是由独立的作为运行环境。比如小程序的，通信一次就像是写情书所以，严格来说，小程序是微信定制的混合开发模式。出栈入栈解决小程序接口不支持的问题小程序的所有接口，都是通过传统的回调函数形式来调用的。作者：张利涛，视频课程《微信小程序教学》、《基于Koa2搭建Node.js实战项目教学》主编，沪江前端架构师本文原创，转载请注明作者及出处小程...

fxp 2019-08-22 11:23 评论0 收藏0