1. 程式人生 > >微信小程式用Promise解決wx.request的非同步時序問題

微信小程式用Promise解決wx.request的非同步時序問題

在app.js中寫一個公用方法(例如獲取使用者資訊),在頁面中要根據使用者資訊變動頁面顯示內容。

由於網路和非同步的問題,經常發生資料獲取在改動頁面顯示內容的程式碼之後。

為了解決這個時序非同步的問題,採用了Promise。

注意:網上查到微信小程式已於2017.12支援Promise,不需要在額外引入js檔案等操作

APP.js:

App({
  globalData:{
    UserData: ''
  },
  //只在程式啟動時執行一次,獲取使用者資訊以及ID
  onLaunch: function (Object) {
    var that = this;   
  },

  //獲取使用者資訊
  GetUserData:function(){    
    var that = this;
    return new Promise(function (resolve, reject) {
      wx.request({
        url: 'XXXX',
        method: 'POST',
        data: {略},
        header: {
          'content-type': 'application/json; charset=utf-8' // 預設值
        },
        success: function (res) {          
          that.globalData.UserData= res.data;
          resolve();     
        }
      });
    });
  }
})

index.js:

onLoad: function() {
    var that = this;
    //呼叫
    app.GetUserData().then((res) => {
      that.setData({ userdata: app.globalData.GetUserData});
    });
}

相關推薦

程式Promise解決wx.request非同步時序問題

在app.js中寫一個公用方法(例如獲取使用者資訊),在頁面中要根據使用者資訊變動頁面顯示內容。 由於網路和非同步的問題,經常發生資料獲取在改動頁面顯示內容的程式碼之後。 為了解決這個時序非同步的問題,採用了Promise。 注意:網上查到微信小程式已於2017.12支

程式 Promise封裝wx.request(),簡化程式碼結構

在app.js中 新增自定義post方法 //app.js App({ //other code... /** * 自定義post函式,返回Promise *

程式資料請求方法wx.request

<view wx:for='{{images}}' wx:key = 'index'>     <image src='{{item.pic}}'></image>    &nbs

程式 豆瓣專案中wx.request遇到的問題

首先說遇到的問題 index.js var API_URL = 'https://api.douban.com/v2/movie/top250'; Page({ data: { movies: [] }, onLoad: function () {

程式開發問題解決,常見BUG總結

小程式開發中的各種坑,進行簡要總結,歡迎填坑` 優化程式碼包 儘量減少程式碼包的大小,因為程式碼包大小直接影響到下載速度,從而影響使用者的首次開啟體驗。2M限制。小程式程式碼包經過編譯後,會放在微信的 CDN 上供使用者下載,CDN 開啟了 GZIP 壓縮,多數圖片格式大大降低程式碼包壓縮率。使用雲伺服器

程式--video完成一個視訊彈幕的專案

1.視訊播放器 2.選擇彈幕顏色 3.彈幕來了...   第一:  index.wxml <!--index.wxml--> <view class="section tc"> <video id="myVideo" style

程式 canvas繪製的圖插入到分享中

用canvas繪製圖 createNewImg: function () { var that = this; var ctx = wx.createCanvasContext('mycanvas'); ctx.setFillStyle("#F4F4F4"); // context.set

程式之條件渲染 wx:if與hidden比較

wx:if 1、在框架中,使用wx:if="{{condition}}" 來判斷是否需要渲染該程式碼: 如果條件成立就渲染 <view wx:if="{{condition}}">123</view> 2、在花括號中也可以寫條件判斷 <view>

程式js控制類名的切換用於改變不同的樣式

有時候,介面文字可能會很多,我們一開始設計介面的時候一定希望讓他展示出來幾行就行了,如果使用者需要檢視隱藏的部分,點選展開詳情就能把剩餘的內容顯示出來。 方法可能有些不好,但是實現功能了,有更好的方法可以一起交流哦 配圖解釋 設計樣式: 展開樣式 test.wxml

程式git進行版本控制的相關操作

一、將專案原始碼上傳到git上 二、下載git上的原始碼到本地 三、在微信小程式開發工具上進行開發 四、上傳程式碼 1.在控制檯進入程式碼所在資料夾 2.提交程式碼方法 git add -A

擎平臺構建程式應用挖坑解決方案————使用者資訊授權

如果您想加入一個友好的微信小程式開發討論平臺 請加QQ群:173683866【微信小程式技術交流】 微擎是什麼? 為什麼選擇微擎? 傻瓜式構建應用,可以直接

基於mpvue程式 es6-promise.js封裝請求

在微信小程式中,實現前後臺互動用到的介面是wx.request() 在開發的過程中,每個涉及到互動的檔案都要使用wx.request()顯得很繁瑣,而且統一處理起來不方便,比如要改請求頭的話就需要每個檔案去改 所以我就嘗試對wx.request()進行封裝,統一管理起來

程式上傳圖片wx.chooseImage和wx.uploadFile

wxml: <view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap

程式console.log列印json資料

JSON.stringify(fun.nav_more(cp_nav_state)) JSON.parse()和JSON.stringify() JSON.parse() 方法用於將一個 JSON

程式定時器實現倒計時效果

平常在微信小程式開發的時候,因專案的需求,倒計時必不可少,下面主要講解定時器在微信小程式中的使用。這裡要先宣告一點的就是,該篇主要實現倒計時功能,而且實現是時長較短的倒計時,其他的優化什麼的不作主要考慮。如果實現簡單的60s倒計時效果,我們可直接使用setInterval即可

程式之音訊播放-wx.createInnerAudioContext()

咱們先看看官方示例地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html建立innerAudioCon

程式圖表外掛(wx-charts)

微信小程式圖表外掛(wx-charts)基於canvas繪製,體積小巧支援圖表型別餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製,目前wx-charts是微信小程式圖表外掛中比較強大好使的一個。 wx-charts基於canvas繪製的微信小程式圖表外掛

程式​顯示操作選單wx.showActionSheet

wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.lo

程式setData修改陣列或物件中的一個屬性值

在page中有如下陣列 data: { info:[ { name:"yuki", tou:"../img/head.jpg", zGong:130, gMoney:222222

程式:列表渲染 wx:for

wx:for 也可以巢狀,下邊是一個九九乘法表 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">