ES6新特性:JavaScript中内置的延迟对象Promise

时间: 2020-02-26阅读: 141标签: es6

Promise的基本使用:

利用Promise是解决js异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;

通过new实例化Promise,  构造函数需要两个参数, 第一个参数为函数执行成功以后执行的函数resolve, 第二个函数函数执行失败以后执行的函数reject:

new Promise(function(resolve , reject) {
});

通过Promise,我们把回调函数用线性的方式写出来,而不是一层套一层, 这个函数有四层回调;

fn("args", function(a) {
    fn1("foo", function(b) {
        fn2("bar", function(c) {
            fn3("baz", function(d) {
                alert("回调成功,获知的内容为:"+a+b+c+d)
            })
        })
    })
})

以上的Demo只有包含成功的回调, 如果失败的回调也算的话, 也就更麻烦了;

如果使用Promise的方式,我们可以改装成线性的代码, 更加符合阅读的习惯,只要在then函数下写逻辑即可;

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

这是一个ajax异步获取数据的例子, 我们使用了回调函数

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    var callback = function(res) {
        console.log(res);
    };
    var ajax = function(url, callback) {
        var r = new XMLHttpRequest();
        r.open("GET", url, true);
        r.onreadystatechange = function () {
            if (r.readyState != 4 || r.status != 200) return;
            var data = jsON.parse(r.responseText);
            callback(data);
        };
        r.send();
    };
    //执行请求:
    ajax("http://www.filltext.com?rows=10&f={firstName}", callback);
    //再做别的事情;
</script>
</body>
</html>

因为ES6内置了Promise, 我们可以把以上的callback改写成promise的方式, 首先ajax函数返回一个Promise对象;

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        var callback = function(res) {
            console.log(res);
        };
        var ajax = function(url) {
            return new Promise(function(resolve, reject) {
                var r = new XMLHttpRequest();
                r.open("GET", url, true);
                r.onreadystatechange = function () {
                    if (r.readyState != 4 || r.status != 200) return;
                    var data = jsON.parse(r.responseText);
                    resolve(data);
                };
                r.send();
            })
        };
        //执行请求:
        ajax("http://www.filltext.com?rows=10&f={firstName}").then(function(data) {
            callback(data);
        });
        //再做别的事情;
    </script>
</body>
</html>


Promise实例的三种状态:

每一个实例化的Promise都有三个状态;pending(等待)  rejected(拒绝)  resolved(解决) ,默认的状态为pending,如果执行了resolve(), 那么这个promise的状态会变为resolve,如果执行了reject(), 那么这个promise的状态就会变成rejected, 而且这些状态是不可撤销的,一经更改,不会再变了;

then方法:

promise有一个then方法,then方法接收两个参数, 第一个为函数的成功回调, 第二个为函数的失败回调:

var promise = new Promise(function(resolve , reject) {
    resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
    console.log(1); 
}, function() {
    console.log("失败");
});
console.log("2");
var promise = new Promise(function(resolve , reject) {
    reject();
});
console.log(0);
promise.then(function(val) {
    console.log(1);
}, function() {
    console.log("失败");
});
console.log("2");

then方法每一次都是返回不同的Promise实例,then的第一个参数是成功回调, 这个成功回调的参数为: 上一个Promise实例执行resolve方法的参数;

一般来说, then方法会返回当前的promise, 如果在then方法里面return 一个新的Promise实例,那么此时的then返回的就是新的Promise实例, 利用这个特性,就可以实现多层回调

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

不管代码是异步还是同步的, 都可以用Promise的then方法, 同步的代码直接写在then方法第一个参数, 把需要参数通过resolve传给下一个then方法,

如果是异步的代码, 就直接return一个Promise实例:

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return 2;
}).then(function(val) {
    console.log(val);
    return 3;
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve,reject) {
        //异步操作些这里
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
    return 5;
}).then(function(val) {
    console.log(val);
});

catch方法:

catch方法和失败回调时一样的, 如果上一个异步函数抛出了错误了, 错误会被捕获, 并执行catch方法或者失败回调;

var promise = new Promise(function(resolve , reject) {
    resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
    console.log("成功");
    throw new Error("heheda");
}).catch(function(e) {
    console.log(e);
}).then(function() {
    console.log("继续执行");
});

Promise中的错误是会一层层传递的, 如果错误没有没有被捕获, 会一直传递给下一个promise对象, 直到被捕获为止, 然后继续往下执行:

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            throw new Error("err");
        });
    }).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            resolve(3);
        });
    }).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            resolve(4);
        });
    }).then(function(val) {
        console.log(val);
    }).catch(function(err) {
        console.log(err);
    }).then(function() {
        console.log("继续执行")
    })


构造函数Promise的四个方法:

构造函数Promise有四个方法, Promise.all, Promise.race, Promise.reject, Promise.resolve:

Promise.all(iterable)
返回一个promise对象,当iterable参数里所有的promise都被解决后,该promise也会被解决

要注意all方法是Promise函数的方法,不是实例的方法, 参数是一个数组, 数组里面全是Promise的实例 :

var p0 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(0)
    },1000);
})
var p1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(1)
    },2000);
})
var p2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(2)
    },3000);
})
Promise.all([p0,p1,p2]).then(function(arr) {
    console.log(arr)
})

Promise.race(iterable)

当iterable参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。

Promise.reject(reason)

调用Promise的rejected句柄,并返回这个Promise对象。

Promise.resolve(value)

用成功值value解决一个Promise对象。如果该value为可继续的(thenable,即带有then方法),返回的Promise对象会“跟随”这个value,采用这个value的最终状态;否则的话返回值会用这个value满足(fullfil)返回的Promise对象。

官方的例子:

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="log"></div>
<script>
    'use strict';
    var promiseCount = 0;
    function testPromise() {
        var thisPromiseCount = ++promiseCount;

        var log = document.getElementById('log');
        log.insertAdjacenthtml('beforeend', thisPromiseCount + ') 开始(同步代码开始)<br/>');

        // 我们创建一个新的promise: 然后用'result'字符串解决这个promise (3秒后)
        var p1 = new Promise(function (resolve, reject) {
            // 解决函数带着解决(resolve)或拒绝(reject)promise的能力被执行
            log.insertAdjacenthtml('beforeend', thisPromiseCount + ') Promise开始(异步代码开始)<br/>');

            // 这只是个创建异步解决的示例
            window.setTimeout(function () {
                // 我们满足(fullfil)了这个promise!
                resolve(thisPromiseCount)
            }, Math.random() * 2000 + 1000);
        });

        // 定义当promise被满足时应做什么
        p1.then(function (val) {
            // 输出一段信息和一个值
            log.insertAdjacenthtml('beforeend', val + ') Promise被满足了(异步代码结束)<br/>');
        });

        log.insertAdjacenthtml('beforeend', thisPromiseCount + ') 建立了Promise(同步代码结束)<br/><br/>');
    }
    testPromise();
</script>
</body>
</html>

既然有了Promise , 我们就可以把封装XMLHttpRequest封装成GET方法, 方便使用:

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

然后使用:

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
});

数据的地址可以自己设置, 可以通过控制台请求, 注意跨域的问题;

其他:

以上只是Promise的一些基础知识, 还有一些其他的知识点, 因为能力有限不一一介绍了(Promise.resolve的不同参数, 与Generator一起使用, Promise的附加方法, 等等等等);

把Promise的运行流程画出来, 对Promise的理解会好一点, Promise还是比较绕的

浏览器支持情况:

Chrome 32, Opera 1,Firefox 29, Safari 8 ,Microsoft Edge, 这些浏览器以上都默认支持;


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9216

es6中const定义的属性是否可以改变_为什么有人说const并非一定为常量

const是用来定义常量的,而且定义的时候必须初始化,且定义后不可以修改。const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

es6数据变更同步到视图层

数据变更同步到视图层有一个很重要的东西就是Proxy,Proxy的作用就是可以隐藏真正的对象,而用户去修改它的代理对象.Proxy可以监听数据的变化,例如

ES6中export default 与export区别

export与export default均可用于导出常量、函数、文件、模块等,有什么区别呢?在一个文件或模块中,export、import可以有多个,export default仅有一个

ES6 动态计算属性名

在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问,而且这种动态计算属性名的方式 在字面量中 是无法使用的

在使用es6语法class的时候,babel到底做了什么?

自从有了webpack之后,我们这些jscoder似乎得到了前所未有的解放,箭头函数,对象解构,let,const关键字,以及class、extends等等,webpack会帮我们把这些es6代码转换成浏览器能够识别的es5代码,那么有多少人真正的看过,babel转换之后的代码呢?

ES6新特性:JavaScript中的Reflect对象

Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ;

js解构赋值,关于es6中的解构赋值的用途总结

ES6中添加了一个新属性解构,允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。用途:交换变量的值、从函数返回多个值、函数参数的定义、提取JSON数据、函数参数的默认值...

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

ES6中的解构赋值

从前我们对变量赋值时,都是通过赋值运算符,右边赋值给左边这样操作的。现在我们通过模式匹配的方式来赋值。左边是解构目标,右边是解构源。

ES6 Promise用法详解

Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数、执行失败后的回调函数)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广