es6之Promise 对象

蔚落 2022-03-17 09:24 432阅读 0赞

Promise 是异步编程的一种解决方案,解决——回调函数和事件
ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

下面代码创造了一个Promise实例。

基本用法

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

  1. const promise = new Promise(function(resolve, reject) {
  2. //resolve (data) 成功
  3. //reject (error )失败
  4. });

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

  1. promise.then(function(value) {
  2. // success
  3. }, function(error) {
  4. // err
  5. });

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
下面是一个Promise对象的简单例子

  1. function fun(ms){
  2. return new promise((res,rej) => {
  3. setTimeout(res,ms)
  4. })
  5. }
  6. fun(100).then((val) => {
  7. console.log(val)
  8. })

promise还可以用来加载图片

  1. function loadImageAsync(url) {
  2. return new Promise(function(resolve, reject) {
  3. const image = new Image();
  4. image.onload = function() {
  5. resolve(image);
  6. };
  7. image.onerror = function() {
  8. reject(new Error('Could not load image at ' + url));
  9. };
  10. image.src = url;
  11. });
  12. }

上面代码中,使用Promise包装了一个图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。

2,用Promise对象实现的 Ajax 操作的例子。

  1. const getJSON = function(url) {
  2. const promise = new Promise(function(resolve, reject){
  3. const handler = function() {
  4. if (this.readyState !== 4) {
  5. return;
  6. }
  7. if (this.status === 200) {
  8. resolve(this.response);
  9. } else {
  10. reject(new Error(this.statusText));
  11. }
  12. };
  13. const client = new XMLHttpRequest();
  14. client.open("GET", url);
  15. client.onreadystatechange = handler;
  16. client.responseType = "json";
  17. client.setRequestHeader("Accept", "application/json");
  18. client.send();
  19. });
  20. return promise;
  21. };
  22. getJSON("/posts.json").then(function(json) {
  23. console.log('Contents: ' + json);
  24. }, function(error) {
  25. console.error('出错了', error);
  26. });

注意,调用resolve或reject并不会终结 Promise 的参数函数的执行。

Promise.prototype.finally()
finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

  1. promise
  2. .then(result => {···})
  3. .catch(error => {···})
  4. .finally(() => {···});

上面代码中,不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数,finally本质上是then方法的特例。

Promise.resolve()

  1. //有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。
  2. const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的deferred对象,转为一个新的 Promise 对象。

Promise.resolve等价于下面的写法。

  1. Promise.resolve('foo')
  2. // 等价于
  3. new Promise(resolve => resolve('foo'))
  4. //Promise.resolve方法的参数分成四种情况。

发表评论

表情:
评论列表 (有 0 条评论,432人围观)

还没有评论,来说两句吧...

相关阅读

    相关 ES6--Promise对象

    Promise对象:代表了未来某个将要发生的操作,通常是异步操作 promise对象可以将异步操作以同步的流程表达出来,避免了层层嵌套的 回调函数(回调地狱),ES6的

    相关 ES6 -- Promise对象

    Promise是一种异步编程的解决方案,ES6提供原声的Promise,它比传统的解决方案,回调函数和事件,更加合理和强大。 Promise对象有以下两个特点: 1、对象的

    相关 ES6Promise

    ES6中为原生JS新增加了一个对象用来解决异步编程和问题,这个对象就是Promise。 那promise究竟是什么呢?这个真的是一件很难解释清楚的事情,他一共有三种状态,就像

    相关 es6Promise 对象

    Promise 是异步编程的一种解决方案,解决——回调函数和事件 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。 下面代码创造了一个Prom

    相关 ES6--Promise对象

    概述 是异步编程的一种解决方案。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。 Promise 状态 状态的特点 Promise 异步操