es6 Promise

Promise 是异步编程的一种方案,简单说就是一个容器,里面保存着某个未来才会结束的事件的

结果,Promise 是一个对象,从它,可以获取异步操作的消息。

Promise 对象有以下两个特点。

  (1)对象的状态不受外界影响。Promise 对象代表一个异步操作,有是三种状态。pendding

    (进行中),fulfilled(已成功)和rejected(已失败)。

  (2)一旦状态改变,就不会在变,任何时候都可以得到这个结果,Promise 对象的状态改变

  只有两种可能: 从pending 变为fulfilled 和pending 变为rejected.如果改变已经发生 了,你在

  对Promise对象添加回调函数,也会立即得到这个结果。

  Promise 有一些缺点,首先无法取消Promise ,一旦新建它就会立即执行,中途无法取消。

  如果不设置回调函数,Promise内部抛出的错误,不会立即反应到外部。当处于pending

  状态时,无法得子目前进展到哪一个阶段。

用法

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

  构造函数接受一个函数作为参数,该函数的两个参数分别是resolve 和reject。

    resolve 函数的作用是,将Promise 对象的状态从“未完成”变为“成功”,在异步操作成功

    的时候调用,并将异步操作的结果,作为参数参数传递。

    reject 函数的作用是,将Promise对象的状态从“未完成”变为“失败”,在异步操作失败

    的时候调用,并将异步操作报出错误,作为参数传递出去。

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

    例如:

  promise.then(function(value){
          // success
       },function(error){
          // failure
      });

      第一个回调函数是状态变为resolved时调用,

      第二个回调函数是Promise对象的状态变为rejected时调用。

    Promise对象的简单例子。

      funcion timeout(ms){
        return new Promise((resolve,reject)=>{
          setTimeout(resolve,ms,'done');
        });
      }
      timeout(100).then((value)=>{
        console.log(value);
      })

    Promise 建立后就会立即执行

      let promise = new Promise(function(resolve,reject){
        console.log('Promise');
        resolve();
      });
      promise.then(function() {
        console.log('resolved.');
      });
      console.log('Hi');
        // Promise
        // Hi!
        // resolved
  Promise.prototype.then()

    Promise 实例具有then 方法,也就是说,then方式定义在原型对象Promise.prototype上的。

    then 方法返回的是一个新的Promise实例。 第一个参数是resolved状态的回调函数,

    第二个参数是rejected状态的回调函数。

  Promise.prototype.catch()

    Promise.prototype.catch 方法是.then(null,rejection)的别名,用于指定发生错误时的回调函数。

    写法一:

      const promise = new Promise(function(resolve,reject){
        try {
          throw new Error('test');
        }catch(e){
            reject(e);
          }
        });
      promise.catch(function(error){
        console.log(error);
      })
    // 写法二
    const promise = new Promise(function(resolve,reject){
      reject(new Error('test'));
    });
    promise.catch(function(error){
      console.log(error);
    })
  Promise.all()

    Promise.all 方法用于将多个Promise 实例,包装成一个新的Promise实例。

      const p = Promise.all([p1,p2,p3]);

    Promise.all 方法接受一个数组作为参数,p1,p2,p3都是Promise实例,如果不是,就会

      调用下面讲到的Promise.resolve方法,将参数转为Promise实例。

  Promise.race()

    Promise.race 方法同样是将多个Promise实例,包装成一个新的Promise实例。

    const p = Promise.race([p1,p2,p3]);

    上面例子中,只要p1,p2,p3之中有一个实例率先改变状态,p的状态就跟着改变。

      那么率先改变的Promise实例的返回值,就传给p的回调函数。

      const p = Promise.race([
        fatch('/resource-that-may-take-a-while'),
        new Promise(function(resolve,reject){
          setTimeout(()=> reject(new Error('request timeout')),5000)
        })
      ]);
      p.then(response => console.log(response));
      p.catch(error => console.log(error));

    上面代码中,如果5秒内fetch 方法无法返回结果,变量p的状态就会变为rejected,从而

    触发catch 方法指定的回调函数。

    Promise.resolve()

    将现有对象转为Promise对象。

      Promise.resolve('foo') 等价于

      new Promise(resolve =>resolve('foo'))

      Promise.resolve 方法的参数非常四种情况

        1.参数一个Promise实例,将不做任何修改,原封不动地返回这个实例。

        2.参数一个thenable 对象。

        3.参数不是具有then方法的对象,或根本就不是对象。

        4. 不带任何参数。

    Promise.reject();

      Promise.reject(reason) 方法会返回一个新的Promise实例,该实例的状态为rejected

    done()

      Promise对象的回调链,不管以then方法或是catch 方法结尾,要是最后一个方法抛出

      错误,都有可能无法捕捉到。提供一个done方法,总是处于回调链的尾端,保证抛出

      任何有可能出现的错误。

        Promise.prototype.done = function (onFulfilled,onRejected){
          this.then(onFulfilled,onRejected).catch(function(reason){
            // 抛出一个全局错误
            setTimeout(()=>{throw reason},0)
          });
        }

      应用加载图片

        const preloadImge = function(path){
          return new Promise(function(resolve,reject){
            const image = new Image();
            image.onload = resolve;
            image.onerror = regect;
            image.src = path;
          })
        };

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sass与Compass——回顾

    compass 是sass的一个工具库   compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装:     comp...

    用户1197315
  • es6 对象的扩展

    1.属性的简洁表示法     function f(x,y) {       return {x,y};     }     // 等同于     functi...

    用户1197315
  • 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype...

    用户1197315
  • 你真的懂Promise吗

    在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大。可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论P...

    浪里行舟
  • Salesforce Javascript(一) Promise 浅谈

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects...

    用户1169343
  • web前端面试题对答篇一:谈谈你对Promise的理解

    回答这个问题时,个人不建议单纯的从Promise的细节知识点答起,因为这个问题的本质是拥有一定宏观性的,如果仅仅回复一些知识点恐怕是满足不了面试官胃口的。

    用户1272076
  • Promise的三兄弟:all(), race()以及allSettled()

    从ES6 开始,我们大都使用的是 Promise.all()和Promise.race(),Promise.allSettled() 提案已经到第4阶段,因此将...

    Fundebug
  • 你不知道的JavaScript(中卷)二

    1.最常见的块单位是函数。从现在到将来的“等待”,最简单的方法(但绝不是唯一的,甚至也不是最好的)是使用一个通常称为回调函数的函数

    硬核项目经理
  • 当面试官问你Promise的时候,他究竟想听到什么?

    用户1687375
  • 《深入浅出Node.js》:Node异步编程解决方案 之 ES6 Promise

    在上一篇讲了异步编程解决方案之一的事件发布-订阅模式,使用事件模式时,执行流程需要被预先设定。即便是分支,也需要预先设定,这是由发布-订阅模式的运行机制决定的。...

    前端_AWhile

扫码关注云+社区

领取腾讯云代金券