Rumah > applet WeChat > Pembangunan program mini > 使用Promise简化回调

使用Promise简化回调

小云云
Lepaskan: 2018-02-23 15:44:03
asal
1882 orang telah melayarinya

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

比如下面这种

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

// 模拟获取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)

    }

})

Salin selepas log masuk

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

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

promisify.js

1

2

3

4

5

6

7

module.exports = (api) => {

    return (options, ...params) => {

        return new Promise((resolve, reject) => {

            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);

        });

    }

}

Salin selepas log masuk

先看最简单的:

1

2

3

4

5

6

7

8

9

10

// 获取系统信息

wx.getSystemInfo({

    success: res => {

        // success

        console.log(res)

    },

    fail: res => {

 

    }

})

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

const promisify = require('./promisify')

const getSystemInfo = promisify(wx.getSystemInfo)

 

getSystemInfo().then(res=>{

    // success

    console.log(res)

}).catch(res=>{

 

})

Salin selepas log masuk

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

回调金字塔的简化效果

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

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)

})

Salin selepas log masuk

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

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

相关推荐:

Promise简化回调实例分享

微信小程序getUserInfo回调详解

jQuery回调方法使用详解

Atas ialah kandungan terperinci 使用Promise简化回调. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan