異步回調的筆記

一、

 1  _loadData:function(){
 2     $data = home.getBannerData(id);
 3     console.log($data);
 4   }
 5 
 6 //  home.model.js
 7 
 8  getBannerData(id){
 9     wx.request({
10       url: 'http://z.cn/api/v1/banner/' + id,
11       method: 'GET',
12       success:function(res){
13         return res
14       }
15     })
16   }

_loadData 輸出值爲空

緣由是：getBannerData裏返回的數據是異步的，因此這樣是獲取不到數據的

 

二、修改

 1  _loadData:function(){
 2     $data = home.getBannerData(id, this.callback); 4   },
 5 
 6   callback:function(res){
 7     console.log(res)
 8   }
 9 
10 // home-model.js
11 
12 getBannerData(id, callback){
13     wx.request({
14       url: 'http://z.cn/api/v1/banner/' + id,
15       method: 'GET',
16       success:function(res){
17         callback(res)
18       }
19     })
20   }

新建一個callback函數，當成參數，傳遞到getBannerData中，當獲取數據後，調用callback，把數據放到callback函數中，這時就能夠輸出數據

三、用箭頭函數

 1 _loadData:function(){
 2     $data = home.getBannerData(id, (res)=>{
 3       console.log($data);
 4     });
 5   },
 6 
 7 // home-model.js
 8 
 9 getBannerData(id, callback){
10     wx.request({
11       url: 'http://z.cn/api/v1/banner/' + id,
12       method: 'GET',
13       success:function(res){
14         callback(res)
15       }
16     })
17   }

此次傳入的不是新建的函數，而是用箭頭函數構建的一個函數

 

說明：上面這倆種方法均可以處理回調函數返回的數據

當邏輯簡單的時候，推薦用箭頭函數；邏輯複雜的時候，推薦新建一個函數（我的建議，不必用最新的技術，要根據需求本身選擇）