Promise的学习

Promise的基本使用

步骤：

1. 创建Promise对象p
2. Promise构造函数的参数为一个方法A，方法的参数是resolve和reject
3. resolve和reject也是两个方法
4. 方法A里面用setTimeout
5. setTimeout(function(){xxxxx},time);
6. xxxx里面用if-else语句，当满足条件时resolve(xxx)否则reject(xxx)
7. 用p.then() 参数为两个方法
8. p.then(function(data){...},function(info){...});
9. 第一个方法的参数data就是resolve(xxx)的xxx，第二个方法的info就是reject(xxx)的xxx

例子

 <script>
        var p = new Promise(function(resolve,reject){
            setTimeout(function(){
                var flag = true;
                if(flag) resolve('成功');
                else reject('出错');
            },1000);
        });
        p.then(function(data){
            console.log(data);
        },function(info){
            console.log(info);
        })
    </script>

用Promise实现Ajax请求的基础操作

步骤：

1. 新建一个方法，里面新建Promise对象,用Ajax的一些操作,且方法必须返回Promise对象
2. 关于Ajax的操作

• new一个XMLHttpRequest()对象xhr
• 将xhr对象的onreadystatechange定义为一个方法

• 这个方法中用到了xhr.readyState属性，当它不等于4的时候就返回，当它等于4时，并且xhr.status属性也等于200时，就使用resolve和reject方法
• 这时resolve()中就得传出去xhr.responseText了
• reject就随便传错误信息就行

• 使用xhr.open方法xhr.open('get',url);
• 使用xhr.send方法xhr.send(null);

3. 最后记住，要返回p对象
4. 使用新建的方法并传入url参数再加.then，.then的参数是两个方法，其参数data和info分别对应resolve和reject传来的东西
5. 如果想要发起多次Ajax请求，就在.then的第一个参数方法里return用方法创建的新的Promise对象，再链式调用.then即可

例子

<script>
        var createP = function (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;
        };
        createP('http://localhost:3000/data').then(function (data) {
            console.log(data);
            return createP('http://localhost:3000/data1');
        },function (info) {
            console.log(info);
        }).then(function (data) {
            console.log(data);
            return createP('http://localhost:3000/data2');
        },function (info) {
            console.log(info);
        })
    </script>

关于then函数的返回值

return一个promise对象以继续用.then return一个具体的值，再用.then的话参数方法中的data就是这个具体的值

这时其实是系统默认创建了一个新的promise对象来调用的.then

        p.then(function(data){
            console.log(data);
            return 123;//返回一个具体值
        },function(info){
            console.log(info);
        }).then(function(data){
            console.log(data);//直接获取了
        })

Promise常用的API

1. 实例方法

• 刚才用过的then()还有catch()和finally()
• 都是在括号里面写function 回调函数?
• catch()用来接收错误信息，效果与then的第二个参数方法相同
• finally()，不管前面怎么样都要执行

例子

       p.then(function(data){
           console.log(data);
       }).catch(function(info){//接收的reject的参数
           console.log(info);
       }).finally(function(){
           console.log('finallyYes');
       })

2. 对象方法

• Promise.all()和Promise.race()
• Promise.all()参数是一个数组，数组是多个Promise对象实例，通过调用.then()之后，会返回全部Promise对象的结果(resolve的)，返回的是一个数组
• Promise.race()返回的是最快得到结果的那个Promise对象的结果

    Promise.all([p1, p2, p3]).then(function (result) {
            console.log(result);
        });
        Promise.race([p1, p2, p3]).then(function (result) {
            console.log(result);
        })