微信小程序wx.navigateTo里events中不支持wx.showLoading、wx.showModal等微信api?

今天在开发微信小程序中碰到一个问题:

背景: 使用wx.navigateTo的events做两个页面数据流通 , A页面传一部数据到B页面 , 在B页面中进行选择等一系列操作后在B页面执行wx.navigateBack返回A页面并将修改后的数据通过events传回A页面 , A页面根据B页面传来的数据发起一次异步请求。
下面展示部分代码。

// A页面部分代码
wx.navigateTo({
        url: "B页面",
        events: {
          choose(e) {
			//一系列操作
			//调用wx.** api
			wx.showLoading({});
			//发起异步请求
            api.xxx();
          }
        },
        success(res) {
          res.eventChannel.emit('data', {
            //数据
            })
        }
      })


//B页面部分代码
onLoad: function (options) {
    let that = this;
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.on('data', function (data) {
      console.log('A页面传来的参数：', data);
    })
  },
choose(e) {
	//将数据进行一系列操作后
    let eventChannel = this.getOpenerEventChannel();
    //出发A页面中events的choose方法
    eventChannel.emit('choose', e.detail);
    
    //返回上一页面,也就是A页面
   	wx.navigateBack();
   	
  },

问题: A页面在数据回传过来时发起的请求中,也就是在events中,我调用了wx.showLoading发现真机无效(开发者工具正常)

经测试发现, wx.navigateTo在执行events中方法的时候,执行顺序是在B页面还处在当前页面栈中执行。也就是说,events中执行时类似于在B页面的以下代码执行顺序,即使代码是写在A页面中。

choose(e) {
	//将数据进行一系列操作后
    let eventChannel = this.getOpenerEventChannel();
    //出发A页面中events的choose方法
    eventChannel.emit('choose', e.detail);
    
    ***
    //此次执行events的choose方法
	***
    
    //返回上一页面,也就是A页面
   	wx.navigateBack();
   	
  },

也就是说,出现wx.showLoading失效是因为B页面的wx.navigateBack在异步请求还没请求触发后就执行了,wx.showLoading刚出现在B页面中就被wx.navigateBack返回到A页面了。

后续解决方法:在events请求结束后再调用wx.navigateBack方法,部分代码如下

// A页面部分代码
wx.navigateTo({
        url: "B页面",
        events: {
          choose(e) {
			//一系列操作
			//调用wx.** api
			wx.showLoading({});
			//发起异步请求
            api.xxx().then(res=>{
            	//代码执行到当前页面栈顶部仍是B页面
            	//返回上一页面,也就是A页面
   				wx.navigateBack();
            });
          }
        },
        success(res) {
          res.eventChannel.emit('data', {
            //数据
            })
        }
      })

//B页面部分代码
onLoad: function (options) {
    let that = this;
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.on('data', function (data) {
      console.log('A页面传来的参数：', data);
    })
  },
choose(e) {
	//将数据进行一系列操作后
    let eventChannel = this.getOpenerEventChannel();
    //出发A页面中events的choose方法
    eventChannel.emit('choose', e.detail); 	
  },