angular4使用promise处理异步

最近在编写一个微服务,使用angular4框架及echarts实现一个产品报告列表页,
因为是所有数据是双向绑定,不能确定具体是多少个产品,导致只能使用*ngFor来实现,因此echarts实例化需要绑定的div的id名也是双向数据实现=>**所以只有等到页面将echarts绑定的div渲染了才能再进行echarts的数据的渲染,但是这些数据都是在同一个接口拿到,同时设置div的id也在这里实现,**所以这需要用到异步处理.
一个最简单的promise,then

ngOnInit(){
this.doSomething().then(()=>{
   return    this.echart();
})
}
// 获取后台数据
doSomething(){
 **// new promise一定不能放在异步请求里 否则return 不出promise**
 return new Promise((resolve, reject) => {      
 this.demoService.getHomeInfo().subscribe(res => {
           setTimeout(()=>{
           resolve('返回值');
       },100)
      }, error => {
        console.log(error);
      });
  }
  
//配置echarts及实例
echart(){
   var option = {
            title:{
                text:'ECharts 数据统计'
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["Android","IOS","PC","Ohter"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                data:[500,200,360,100]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
  }

总结:return new promise一定不能放在异步请求里否则return 不出promise!!!

angular4使用promise处理异步

猜你喜欢