解决微信小程序回调地狱问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决微信小程序回调地狱问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、背景

小程序开发经常遇到根据网络请求结果，然后继续处理下一步业务操作，代码如下：

//1第一个请求 
wx.request({
        url:"https://example.com/api/",
        data:data,
        success:function(res){

            //2第二个请求 
             wx.request({
               url:"https://example.com/api/",
               data:data,
               success:function(res){

                 //3第三个请求 
                      wx.request({
                           url:"https://example.com/api/",
                           data:data,
                           success:function(res){
                               console.log(res.data)
                                },
                           fail:function(err){
                               console.log(err)
                           }
                          },
               fail:function(err){
                 console.log(err)
               }
        })

   
     },
    fail:function(err){
          console.log(err)
        }
 })

这段代特点：层层嵌套，逻辑负责可读性低，不易维护。解决方案使用 new Promise((resolve, reject) => {})可使用异步顺序执行来解决。

二、代码示例

    //1、分步获取接口数据
    new Promise((resolve, reject) => {

      return resolve(that.getCollectListData());//获取接口数据1

    }).then(res => {
     
      return that.getDoctorListData();//获取接口数据2

    }).then(res => {

     
      that.initData();//显示数据
    }).catch(err => {

    });

第一个请求函数代码示例



//请求接口函数
 getCollectListData() {

    var that = this;
    var usId = 'userId';

    var result = new Promise(function (resolve, reject) {
      //对象
      let obj = {
        method: "GET",
        showLoading: false,
        data: {
          'userId': usId
        },
        url: '/de/api/eva',
      };

      httpUtilsDeal.request(obj).then(res => {

        if (res.data.code == 200) {

          resolve(res);
        }
      }).catch(err => {
        reject(err)
      });
    })
    return result;
  },

第二个函数数据文章来源地址https://www.toymoban.com/news/detail-702572.html


 //
  getDoctorListData() {

    var that = this;
    var usId = 'userId';

    var result = new Promise(function (resolve, reject) {

      //对象
      let obj = {
        method: "GET",
        showLoading: false,
        data: {
          'readRecord.izCollect': 1,
          'readRecord.userId': usId
        },
        url: '/iu/api/k/listPage',
      };

      httpUtilsDeal.request(obj).then(res => {

        if (res.data.code == 200) {
          resolve(res);
        }
      }).catch(err => {
        reject(err)
      });
    })

    return result;
  },

到了这里，关于解决微信小程序回调地狱问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！