异步回调的笔记

一、

 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   }

此次传入的不是新建的函数，而是用箭头函数构建的一个函数

 

说明：上面这俩种方法均可以处理回调函数返回的数据

当逻辑简单的时候，推荐用箭头函数；逻辑复杂的时候，推荐新建一个函数（我的建议，不必用最新的技术，要根据需求本身选择）