处理微信小程序request的异步

本是古典何须时尚 2023-07-07 12:54 18阅读 0赞

**简单描述：** 在app的一个页面中，需要判断该用户有无登陆，再显示特定内容.  
问题就是session过期时，更新数据的时候需要同时发生两个request到后台(一个是请求用户状态，另一个是更新数据)，当获取用户状态请求落后时，数据将会被完成更新。  
**解决方案1：** 【request嵌套】将用户状态请求成功后success调用数据更新请求。  
**解决方案2：** 使用promise对象

--------------------

**解决方案1：**  
updateStatusFromRemote()，从后台获取用户状态  
updateData()，更新数据函数

updateStatusFromRemote: function () { 
        var that = this
        var cookie = cookieUtil.getCookieFromStorage()
        var header = { }
        header.Cookie = cookie
        wx.request({ 
          url: app.globalData.serverUrl + app.globalData.apiVersion + '/auth/status',
          header: header,
          success: function (res) { 
            if (res.data.data.is_authorized) { 
              console.log('用户在线')
              //用户认证成功后再更新数据
              that.updateData(header)
            } else { 
              console.log('Session过期，请重新登陆')
            }
          }
        })
      },
    updateData: function(header){ 
        var that = this
        wx.request({ 
          url: app.globalData.serverUrl+app.globalData.apiVersion+'/service/menu/user',
          header: header,
          success: function(res){ 
            var personal_menuData = []
            personal_menuData = res.data.data
            that.setData({  personal_grids: personal_menuData, is_login: true })
          }
        })
      },

**解决方案2：**  
auth.js

const cookieUtils = require('cookie.js')
    
    function buildHeader(){ 
      var cookie = cookieUtils.getCookieFromStorage()
      var header = { }
      header.Cookie = cookie
      return header
    }
    
    /** * 查询用户状态 * @ param app 全局唯一的app实例 * @ param resolve 调用成功处理的函数 * @ param reject 调用失败处理的函数 */
    function getStatus(app){ 
      var url = app.globalData.serverUrl + app.globalData.apiVersion + '/auth/status'
      var header = buildHeader()
      var promise = new Promise(function(resolve, reject){ 
        wx.request({ 
          url: url,
          header: header,
          success: function(res){ 
            if (res.data.data.is_authorized){ 
              resolve(true)
            }else{ 
              resolve(false)
            }
          }
        })
      })
      return promise
    }
    
    module.exports = { 
      getStatus: getStatus,
    }

page1.js

const app = getApp()
    const cookieUtil = require('../../utils/cookie.js')
    const authUtil = require('../../utils/auth.js')
    Page({ 
    ......
    	updateData: function(){ 
    	    var that = this
    	    var cookie = cookieUtil.getCookieFromStorage()
    	    header = { }
    	    header.Cookie = cookie
    	    wx.request({ 
    	      url: app.globalData.serverUrl+app.globalData.apiVersion+'/service/menu/user',
    	      header: header,
    	      success: function(res){ 
    	        var personal_menuData = []
    	        personal_menuData = res.data.data
    	        that.setData({  personal_grids: personal_menuData, is_login: true })
    	      }
    	    })
    	  },
    	//使用promise解决异步
    	onPullDownRefresh: function(){ 
    	    var that = this
    	    var promise = authUtil.getStatus(app)
    	    promise.then(function(status){ 
    	      if (status) { 
    	        that.setData({  isAuthorized: true })
    	        that.updateData()
    	      } else { 
    	        that.setData({  isAuthorized: false })
    	        wx.showToast({ 
    	          title: '请先登陆',
    	          icon: 'none'
    	        })
    	      }
    	    })
    	  },
    })