1. 程式人生 > >小程式非同步問題與簡單Promise使用

小程式非同步問題與簡單Promise使用

一、在回撥函式中處理後面業務
二、setData最好放在最後執行(應該沒影響,以防萬一)
因為setData是非同步的,可能setData還沒執行完,後面的程式碼就先執行了,所以,後面使用setData後的data裡面的資料可能會不正確。所以儘量不要用setData裡的資料,直接用 用來setData的資料。並且將setData放在最後執行
******************************************************************************************
關於第二條,setData渲染頁面是非同步,但是setData改變data裡面的資料是同步的。
但是為了提高效能,不可能改變一次資料渲染一次頁面,等所有data改變完之後一塊渲染頁面.
三、使用Promise
專案需要獲取使用者的openid,邏輯是在app.js的getOpenid中呼叫wx.login方法,
success之後wx.request去請求後臺獲取openid;
獲取成功之後在page的onLoad方法中使用;
可以使用回撥函式解決,但是回撥層次多了,回撥的寫法就會很複雜
使用Promise可以簡化寫法;那麼Promise如何使用呢,程式碼如下
app.js

App({
  globalData: {
    hostUrl: "https://wxapp.becypress.com/"
  },
  onLaunch: function () {
    // 展示本地儲存能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getOpenid:function(){
    var that = this;
    return new Promise(function (resolve, reject){
      wx.login({
        success: function (res) {
          if (res.code) {
            //發起網路請求
            wx.request({
              url: that.globalData.hostUrl + 'wechat/app/login/' + res.code,
              data: {
              },
              success: function (res) {
                //resolve到index.js的then中  
                resolve(res.data.openid);
              }
            });
          } else {
            console.log('登入失敗!' + res.errMsg)
          }
        }
      });
    }); 
  }
})

index.js

var app = getApp();
Page({
  data: {
    url:""
  },
  onLoad: function (options) {
    var that = this;
    app.getOpenid().then(function(openid){
      that.setData({
        url: app.globalData.hostUrl + "app/index.html?opneid=" + openid
      });
    });
  }
})