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);
});