Promise用法

Promise概述

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

使用Promise主要有以下好处：

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise对象提供了简洁的API，使得控制异步操作更加容易

Promise用法

• 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
• resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p=new Promise(function(resolve,reject){
            //成功时调用resolve()
            //失败时调用reject()
        });
        p.then(function(ret){
            //从resolve得到正常结果
        },function(ret){
            //从reject得到错误信息
        });

封装一个Promise方法，发送单个Ajax请求

function queryData(url){
            var p=new Promise(function(resolve,reject){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange = function(){ //监听状态码的	变化
                    if(xhr.readyState !=4) return;    //如果是错误的状态码则不管他
                    if(xhr.readyState==4 && xhr.status==200){
                        //处理正常的情况
                        resolve(xhr.responseText);
                    }else{
                        reject('错误');
                    }
                };
                xhr.open('get',url);
                xhr.send(null);
            })
            return p;
        }
        queryData('http://127.0.0.1:8085/web5/ajax.php')
            .then(function(data){
                console.log(data)
            })

发送多个请求

queryData('http://127.0.0.1:8085/web5/ajax.php')
            .then(function(data){
                console.log(data)
                return queryData('http://127.0.0.1:8085/web5/ajax2.php')
            })
            .then(function(data){
                console.log(data)
            });

在.then内再调用一次queryData
避免了回调地狱

then参数中的函数返回值

1.返回Promise实例对象
返回的实例对象会调用下一个then
也就是.then中 return了一个Promis对象，则会调用下一个then
第二个then得到的就是返回的那个Promise对象 异步调用结果

2.返回普通值
返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

Promise常用的API

1.实例方法

• p.then()得到异步任务的正确结果
• p.catch()获取异步信息
• p.finally()成功与否都会执行(尚且不是正式标准)

2.对象方法

• Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
• Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果

all

var p1=queryData('http://127.0.0.1:8085/web5/ajax.php');
       var p2=queryData('http://127.0.0.1:8085/web5/ajax2.php')
       Promise.all([p1,p2]).then((result)=>{
           console.log(result)
       })

此时返回的是一个数组

且返回的时间是不一样的

race

var p1=queryData('http://127.0.0.1:8085/web5/ajax.php');
       var p2=queryData('http://127.0.0.1:8085/web5/ajax2.php')
       Promise.race([p1,p2]).then((result)=>{
           console.log(result)
       })

只返回了第一个请求

al需要所有的任务都完成之后才能得到结果，
race只需要完成一个任务就能得到结果