小程序Promise避免wx.request回调地狱

通常在微信小程序的商城项目中，常常需要wx.request调用API接口，从服务器端返回已经存储好的数据并且进行json格式化，将返回的数据进行渲染。但页面结构可能需要多次调用API接口，导致wx.request中继续套嵌wx.request，如此循环。这样就形成了回调地狱，所以为了避免这种情况，我们可以通过promise和wx.request来优化代码。

先看下可能性的回调地狱状况：

    wx.request({

            url: 'https://xxx.com/getId',

            success: (res) => {

                    this.setData({

                        // 数据处理
                    })

                    wx.request({

                            url: 'https://xxx.com/getImageById',

                            success: (res) => {

                                    this.setData({

                                            // 数据处理

                                       })

                                    wx.request({

                                               url: 'https://xxx.com/getDataById',

                                                success: (res) => {

                                                        this.setData({

                                                                   // 数据处理

                                                        })

                                                     }

                                                })

                                            }

                                        })

                                    }

                                })

我们先看下通过promise优化后的代码：

     request.js代码：封装request并export接口

      export const request = (params) => {

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

                    wx.request({

                            ...params,

                            success: (res) => {

                                    resolve(res);

                            },

                            fail:(err) => {

                                    reject(err);

                              }

                    });        

            })

        }

        index.js修改主页wx.request代码：

                import {requset} from "../request/request.js";

                ...其他代码

                onLoad: function (options) {

                        request({url:"https://xxx.com/getById"})

                            .then(result=> {

                                    this.setData({

                                            // 处理数据

                                    })

                            })

                    }    

        这是比较简单优化wx.request的回调，如果有内嵌wx.request，可以继续使用.then()，如此循环。