ES6異步程式設計之Promise對象使用

Promise對象特點:

1. Promise對象狀态不受外界影響,

        一個Promise對象代表一個異步操作.

        一個Promise對象有3種狀态 :

                                 Pending   ---> 進行中

                                 Fulfilled   --->已成功

                                 Rejected  --->已失敗

2.狀态隻改一次,一旦改變便不會再變,會一直保持這個結果 (Resolved)

              Pending ------>  Fulfilled       

              Pending ------> Rejected

3.缺點: 無法取消一個正在執行的Promise,  如無設定回調函數,内部錯誤無法抛出到外部

Promise用法:

  let onePromise =  new Promise((resolve,reject)=>{

        //在這裡執行需要異步操作的代碼

 });

onePromise.then(

        //成功回調

     (data)=>{

},

// @ts-ignore
let onePromise = new Promise(function(resolve, reject){
    //做一些異步操作
    setTimeout(function(){
        console.log('執行完成Promise');
        resolve('要傳回的資料可以任何資料例如接口傳回資料');
    }, 2000);
});

//處理Promise執行結果
onePromise.then(value => {
    console.log(value);
},error=>{

});      

let promise=new Promise((resolve,reject)=>{
    for (let i = 0; i < 1000; i++) {
        console.log(i,'異步任務執行中...');
        if(i===999){
            resolve({'index':i,data:'循環執行完成了'});
        }
    }
    reject();
});

promise.then((data)=>{
    console.log(data);
},(error)=>{

});      

//函數傳回Promise對象
function  runPromise(){
    // @ts-ignore
    return new Promise((resolve,reject)=>{
        //執行異步
        for (let i = 0; i < 10000; i++) {
            console.log(i);
        }
        resolve('Loop Finish');
    });
}
//Promise回調
runPromise().then((value => {
    console.log('異步執行完成:',value);
}));      

//異步擷取JSON
let getJsonAsync = (url)=>{
  // @ts-ignore
    let p=new Promise((resolve,reject)=>{
          let c= new XMLHttpRequest();
          c.open('GET',url);
          c.onreadystatechange = handler;
          c.responseType='json';
          c.setRequestHeader('Accept','application/json');
          c.send();
          //處理請求狀态事件
          var handler = ()=>{
                if(this.readyState !== 4){
                    return;
                }
                // @ts-ignore
                if(this.status === 200){
                    resolve(this.response);
                }else{
                    reject(new Error(this.statusText));
                }
          };
    });

    return p;
};

getJsonAsync('https://img-home.csdnimg.cn/data_json/toolbar/toolbar1105.json').then((json)=>{
    console.log(json);
},(err)=>{
    console.log('HTTP請求出錯:',err);
});