ES6-promise对象

理解

* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数, 用来生成promise实例

promise 状态

pending   进行中  ->  初始化 new promise对象时
fulfilled 成功    ->  调用resolve
rejected  失败    ->  调用reject

决议: 状态一旦改变就不可修改
pending->fulfilled 成功
pending->rejected 失败

使用promise基本步骤(2步):

<script type="text/javascript">
// 1.创建promise对象
let promise = new Promise((resolve, reject) => {
    //初始化promise状态为 pending
    //执行异步操作
    if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
    } else {
        reject(errMsg);//修改promise的状态为rejected
    }
})
// 2. 调用promise的then()
promise.then(
    result => console.log(result),
    errorMsg => alert(errorMsg)
)
</script>

promise 执行流程 - 异步与同步

1 new promise传递的回调函数, 里面的代码是同步执行 (定时器,ajax只执行声明,懂?)
2 then里的回调函数是异步执行 , 看定时器内部的执行顺序


let  promise = new Promise((resolve,reject)=>{
    console.log(1)
    setTimeout(()=>{
        console.log(4);
            
        resolve('6 哈哈 ');//修改promise的状态为成功

        console.log(5);
        // reject('呵呵 ');//修改promise的状态为失败
    },2000);
});
console.log(2);
    
promise.then((data)=>{
    console.log(data+'成功');
},(data)=>{
    console.log(data+'失败');
})
console.log(3);

p.then(()=>{
    //这里都是异步执行的代码
})

.then()
.catch()
.

Promise.all()

//将多个promise对象合并成一个新的promise对象, 调用resolve传递的数据会整合成一个数组
//只有p1、p2、p3的状态都为成功，p的状态才会为成功
//只要p1、p2、p3之中有一个被失败，p的状态就变成失败
//参数若为空数组的话，会决议为成功
let p = Promise.all([p1,p2....]);
p.then((data)=>{
  data // [data1,data2,....]
})

Promise.race()

//将多个promise对象合并成一个新的promise对象
//一旦p1,p2,p3谁最先决议为 resolve或者reject那么新的promise就是 成功或者失败
let p = Promise.all([p1,p2....]);
p.then((data)=>{
  data // p1data1
})

案例

<script type="text/javascript">
    //定义一个请求news的方法
    function getNews(url) {
        //创建一个promise对象
        let promise = new Promise((resolve, reject) => {
            //初始化promise状态为pending
            //启动异步任务
            let request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if(request.readyState === 4){
                    if(request.status === 200){
                        let news = request.response;
                        resolve(news);
                    }else{
                        reject('请求失败了。。。');
                    }
                }
            };
            request.responseType = 'json';//设置返回的数据类型
            request.open("GET", url);//规定请求的方法，创建链接
            request.send();//发送
        })
        return promise;
    }

    getNews('http://localhost:3000/news?id=2')
            .then((news) => {
                console.log(news);
                document.write(JSON.stringify(news));
                console.log('http://localhost:3000' + news.commentsUrl);
                return getNews('http://localhost:3000' + news.commentsUrl);
            }, (error) => {
                alert(error);
            })
            .then((comments) => {
                console.log(comments);
                document.write('<br><br><br><br><br>' + JSON.stringify(comments));
            }, (error) => {
                alert(error);
            })
</script>

</body>

</html>