es6--Promise对象

promise 对象 是异步编程的解决方案

基本概念：相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果
各种异步操作，都可以用同样的方法，进行处理 。axios内部实现就是用的promise
最经典的应用 axios库
特点：

1. 对象的状态不受外界影响，处理异步操作，三个状态 pending(进行中) Resolved(成功) Rejected(失败)
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果

promise 从语法上来讲是一个对象

   let pro = new Promise(function(resolved,rejected){
    //执行异步操作
    let res = {
        code:200,
        data:{
            name:'小玉米'
        }
    }
    // 模拟异步操作
    setTimeout(function(){
        if(res.code == 200){
            resolved(res.data)
        }else{
            rejected(res.error)
        }
    
    },1000)
    
})
console.log(pro);
pro.then((val)=>{
    console.log(val)
},(err)=>{
    console.log(err)
})

封装上面的方法

function timeOut (ms){
    return new Promise((resolved,rejected)=>{
        setTimeout(()=>{
            resolved('Promise成功了')
        },ms)
    
    })
}
timeOut(2000).then((val)=>{
    console.log(val)
})

应用：使用Promise封装ajax

    return new Promise((resolved,rejected)=>{
            const xhr = new XMLHttpRequest();
            xhr.open('Get',url);
            xhr.onreadystatechange = handler;
            xhr.responseType = 'json';
            xhr.setRequestHeader('Accept','application/json');
            //发送
            xhr.send();
            function handler(){
                console.log(this);
                if(this.readyState === 4){
                    if(this.status == 200){
                        resolved(this.response);
                    }else{
                        rejected(new Error(this.statusText))
                    }
                }
            }
    })
}
//调用
getJSON('https://www.jianshu.com/writer#/notebooks/50347861/notes/89120309/preview')
.then((data)=>{
    console.log(data);
},(error)=>{
    console.log(error);
})

Promise的其他方法

then() 方法：第一个参数是relove回调函数，第二个参数是可选的，是reject状态回调的函数
then 返回一个新的promise实例，可以采用链式编程

• 1. relove() 能将现有的任何对象转换成一个Promise对象

let p = Promise.resolve('foo');
console.log(p);//Promise对象
p.then((data)=>{
    console.log(data);//foo
})

• 2. reject() 和relove类似
• 3. all() 提供了并行的执行异步操作行为
     应用：一些游戏类素材比较多，等待图片，flash，静态资源文件都加载完成才进行页面初始化

let promise1 = new Promise((relove,reject)=>{});
let promise2 = new Promise((relove,reject)=>{});
let promise3 = new Promise((relove,reject)=>{});
let promise4 = new Promise((relove,reject)=>{});

let p4 = Promise.all([promise1,promise2,promise3]);
p4.then(()=>{
    //三个都成功 才成功
}).catch(err=>{
    //如果有一个失败 则失败
})

• 4. race() 给某个异步的请求设置超时的时间，并且在超时后执行相应的操作
     请求图片资源

function requestImg(imgSrc){
    return new Promise((relove,reject)=>{
        const img = new Image();
        img.onload = function(){
            relove(img);
        }
        img.src = imgSrc;
    })
}

function timeOut(){
    return new Promise((relove,reject)=>{
        setTimeout(()=>{
            reject('图片请求超时')
        },3000)
    })
}
Promise.race([requestImg('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'),timeOut()]).then(data=>{
    console.log(data);
    document.body.appendChild(data);
}).catch(err=>{
    console.log(err)
})

done和finally 一般放在最后不管有没有成功，都会走这个方法

• 5. done()
• 6. finally()