最近在編寫一個微服務,使用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!!!