zoukankan      html  css  js  c++  java
  • ECMAScript 6 笔记(四)

    Symbol

    1. 概述

      ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

      Symbol值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

    let s = Symbol();
    
    typeof s
    // "symbol"

      注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象。也就是说,由于Symbol值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。

      Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

    var s1 = Symbol('foo');
    var s2 = Symbol('bar');
    
    s1 // Symbol(foo)
    s2 // Symbol(bar)
    
    s1.toString() // "Symbol(foo)"
    s2.toString() // "Symbol(bar)"

      上面代码中,s1s2是两个Symbol值。如果不加参数,它们在控制台的输出都是Symbol(),不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。

      注意,Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。

    // 没有参数的情况
    var s1 = Symbol();
    var s2 = Symbol();
    
    s1 === s2 // false
    
    // 有参数的情况
    var s1 = Symbol('foo');
    var s2 = Symbol('foo');
    
    s1 === s2 // false

       Symbol值不能与其他类型的值进行运算,会报错。

      Symbol值可以显式转为字符串。

      Symbol值也可以转为布尔值,但是不能转为数值。

    2. 作为属性名的Symbol 

      由于每一个Symbol值都是不相等的,这意味着Symbol值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。

    var mySymbol = Symbol();
    
    // 第一种写法
    var a = {};
    a[mySymbol] = 'Hello!';
    
    // 第二种写法
    var a = {
      [mySymbol]: 'Hello!'
    };
    
    // 第三种写法
    var a = {};
    Object.defineProperty(a, mySymbol, { value: 'Hello!' });
    
    // 以上写法都得到同样结果
    a[mySymbol] // "Hello!"

      注意,Symbol值作为对象属性名时,不能用点运算符

    var mySymbol = Symbol();
    var a = {};
    
    a.mySymbol = 'Hello!';
    a[mySymbol] // undefined
    a['mySymbol'] // "Hello!"

      因为点运算符后面总是字符串,所以不会读取mySymbol作为标识名所指代的那个值

      同理,在对象的内部,使用Symbol值定义属性时,Symbol值必须放在方括号之中。

    let s = Symbol();
    
    let obj = {
      [s]: function (arg) { ... }
    };
    
    obj[s](123);

      Symbol类型还可以用于定义一组常量,保证这组常量的值都是不相等的。

    log.levels = {
      DEBUG: Symbol('debug'),
      INFO: Symbol('info'),
      WARN: Symbol('warn')
    };
    log(log.levels.DEBUG, 'debug message');
    log(log.levels.INFO, 'info message');

    //另一个例子
    const COLOR_RED    = Symbol();
    const COLOR_GREEN  = Symbol();
    
    function getComplement(color) {
      switch (color) {
        case COLOR_RED:
          return COLOR_GREEN;
        case COLOR_GREEN:
          return COLOR_RED;
        default:
          throw new Error('Undefined color');
        }
    }

      常量使用Symbol值最大的好处,就是其他任何值都不可能有相同的值了,因此可以保证上面的switch语句会按设计的方式工作。

    3. 实例:消除魔术字符串

      魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,该由含义清晰的变量代替。

    function getArea(shape, options) {
      var area = 0;
    
      switch (shape) {
        case 'Triangle': // 魔术字符串
          area = .5 * options.width * options.height;
          break;
        /* ... more code ... */
      }
    
      return area;
    }
    
    getArea('Triangle', {  100, height: 100 }); // 魔术字符串
    
    //常用的消除魔术字符串的方法,就是把它写成一个变量。
    var shapeType = {
      triangle: 'Triangle'
    };
    
    function getArea(shape, options) {
      var area = 0;
      switch (shape) {
        case shapeType.triangle:
          area = .5 * options.width * options.height;
          break;
      }
      return area;
    }
    
    getArea(shapeType.triangle, {  100, height: 100 });

      上面代码中,我们把“Triangle”写成shapeType对象的triangle属性,这样就消除了强耦合。

      如果仔细分析,可以发现shapeType.triangle等于哪个值并不重要,只要确保不会跟其他shapeType属性的值冲突即可。因此,这里就很适合改用Symbol值。

    const shapeType = {
      triangle: Symbol()
    };

      上面代码中,除了将shapeType.triangle的值设为一个Symbol,其他地方都不用修改。

    4. 属性名的遍历 

    5. Symbol.for(),Symbol.keyFor() 

      重新使用同一个Symbol值,Symbol.for方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的Symbol值。如果有,就返回这个Symbol值,否则就新建并返回一个以该字符串为名称的Symbol值。

    var s1 = Symbol.for('foo');
    var s2 = Symbol.for('foo');
    
    s1 === s2 // true

      Symbol.for()Symbol()这两种写法,都会生成新的Symbol。它们的区别是,前者会被登记在全局环境中供搜索,后者不会。

      比如,如果你调用Symbol.for("cat")30次,每次都会返回同一个 Symbol 值,但是调用Symbol("cat")30次,会返回30个不同的Symbol值。

      Symbol.keyFor方法返回一个已登记的 Symbol 类型值的key

    var s1 = Symbol.for("foo");
    Symbol.keyFor(s1) // "foo"
    
    var s2 = Symbol("foo");
    Symbol.keyFor(s2) // undefined

      需要注意的是,Symbol.for为Symbol值登记的名字,是全局环境的,可以在不同的 iframe 或 service worker 中取到同一个值。

    iframe = document.createElement('iframe');
    iframe.src = String(window.location);
    document.body.appendChild(iframe);
    
    iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
    // true
    //上面代码中,iframe 窗口生成的 Symbol 值,可以在主页面得到。]

    6. 实例:模块的 Singleton 模式

    7. 内置的Symbol值 

    Set和Map数据结构

    1. Set 

      类似于数组,但是成员的值都是唯一的,没有重复的值。

      Set 本身是一个构造函数,用来生成 Set 数据结构。

    const s = new Set();
    
    [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
    
    for (let i of s) {
      console.log(i);
    }
    // 2 3 5 4

      Set 函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

    var set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]
    // 去除数组的重复成员
    [...new Set(array)]

      向Set加入值的时候,不会发生类型转换,所以5"5"是两个不同的值。Set内部判断两个值是否不同,使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

      另外,两个对象总是不相等的。

    let set = new Set();
    
    set.add({});
    set.size // 1
    
    set.add({});
    set.size // 2
    //上面代码表示,由于两个空对象不相等,所以它们被视为两个值。

    Set实例的属性和方法 

    Set结构的实例有以下属性。

    • Set.prototype.constructor:构造函数,默认就是Set函数。
    • Set.prototype.size:返回Set实例的成员总数。

    Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

    • add(value):添加某个值,返回Set结构本身。
    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    • has(value):返回一个布尔值,表示该值是否为Set的成员。
    • clear():清除所有成员,没有返回值。
    s.add(1).add(2).add(2);
    // 注意2被加入了两次
    
    s.size // 2
    
    s.has(1) // true
    s.has(2) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2) // false

      Array.from方法可以将Set结构转为数组。

    var items = new Set([1, 2, 3, 4, 5]);
    var array = Array.from(items);

      这就提供了去除数组重复成员的另一种方法。

    function dedupe(array) {
      return Array.from(new Set(array));
    }
    
    dedupe([1, 1, 2, 3]) // [1, 2, 3]

    遍历操作

    • keys():返回键名的遍历器
    • values():返回键值的遍历器
    • entries():返回键值对的遍历器
    • forEach():使用回调函数遍历每个成员

      Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用Set保存一个回调函数列表,调用时就能保证按照添加顺序调用。

    let set = new Set(['red', 'green', 'blue']);
    
    for (let item of set.keys()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.values()) {
      console.log(item);
    }
    // red
    // green
    // blue
    
    for (let item of set.entries()) {
      console.log(item);
    }
    // ["red", "red"]
    // ["green", "green"]
    // ["blue", "blue"]

      可以省略values方法,直接用for...of循环遍历Set。

    let set = new Set(['red', 'green', 'blue']);
    
    for (let x of set) {
      console.log(x);
    }
    // red
    // green
    // blue

      Set结构的实例的forEach方法,用于对每个成员执行某种操作,没有返回值。

    let set = new Set([1, 2, 3]);
    set.forEach((value, key) => console.log(value * 2) )
    // 2
    // 4
    // 6
    //forEach方法的参数就是一个处理函数

    遍历的应用

      扩展运算符(...)内部使用for...of循环,所以也可以用于Set结构。

    let set = new Set(['red', 'green', 'blue']);
    let arr = [...set];
    // ['red', 'green', 'blue']

      扩展运算符和Set结构相结合,就可以去除数组的重复成员。

    let arr = [3, 5, 2, 2, 5, 5];
    let unique = [...new Set(arr)];
    // [3, 5, 2]

    2. WeakSet

      WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。

      首先,WeakSet的成员只能是对象,而不能是其他类型的值。

      其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。这个特点意味着,无法引用WeakSet的成员,因此WeakSet是不可遍历的。

      WeakSet是一个构造函数,可以使用new命令,创建WeakSet数据结构。

    var ws = new WeakSet();

      WeakSet结构有以下三个方法。

    • WeakSet.prototype.add(value):向WeakSet实例添加一个新成员。
    • WeakSet.prototype.delete(value):清除WeakSet实例的指定成员。
    • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在WeakSet实例之中。

      WeakSet没有size属性,没有办法遍历它的成员。

    3. Map 

      Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。

    var m = new Map();
    var o = {p: 'Hello World'};
    
    m.set(o, 'content')
    m.get(o) // "content"
    
    m.has(o) // true
    m.delete(o) // true
    m.has(o) // false

      作为构造函数,Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

    var map = new Map([
      ['name', '张三'],
      ['title', 'Author']
    ]);
    
    map.size // 2
    map.has('name') // true
    map.get('name') // "张三"
    map.has('title') // true
    map.get('title') // "Author"

      注意,只有对同一个对象的引用,Map结构才将其视为同一个键。这一点要非常小心。

    var map = new Map();
    
    map.set(['a'], 555);
    map.get(['a']) // undefined

      上面代码的setget方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的,因此get方法无法读取该键,返回undefined

      同理,同样的值的两个实例,在Map结构中被视为两个键。

    var map = new Map();
    
    var k1 = ['a'];
    var k2 = ['a'];
    
    map
    .set(k1, 111)
    .set(k2, 222);
    
    map.get(k1) // 111
    map.get(k2) // 222

    实例的属性和操作方法 

    (1)size属性

      size属性返回Map结构的成员总数。

    let map = new Map();
    map.set('foo', true);
    map.set('bar', false);
    
    map.size // 2

    (2)set(key, value)

      set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

    var m = new Map();
    
    m.set("edition", 6)        // 键是字符串
    m.set(262, "standard")     // 键是数值
    m.set(undefined, "nah")    // 键是undefined

      set方法返回的是Map本身,因此可以采用链式写法。

    let map = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');

    (3)get(key)

      get方法读取key对应的键值,如果找不到key,返回undefined

    var m = new Map();
    
    var hello = function() {console.log("hello");}
    m.set(hello, "Hello ES6!") // 键是函数
    
    m.get(hello)  // Hello ES6!

    (4)has(key)

      has方法返回一个布尔值,表示某个键是否在Map数据结构中。

    (5)delete(key)

      delete方法删除某个键,返回true。如果删除失败,返回false。

    (6)clear()

      clear方法清除所有成员,没有返回值。

    遍历方法

      Map原生提供三个遍历器生成函数和一个遍历方法。

    • keys():返回键名的遍历器。
    • values():返回键值的遍历器。
    • entries():返回所有成员的遍历器。
    • forEach():遍历Map的所有成员。

      需要特别注意的是,Map的遍历顺序就是插入顺序。

    与其他数据结构的互相转换

    (1)Map转为数组

      前面已经提过,Map转为数组最方便的方法,就是使用扩展运算符(...)。

    let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
    [...myMap]
    // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

    (2)数组转为Map

      将数组转入Map构造函数,就可以转为Map。

    new Map([[true, 7], [{foo: 3}, ['abc']]])
    // Map {true => 7, Object {foo: 3} => ['abc']}

    (3)Map转为对象

      如果所有Map的键都是字符串,它可以转为对象。

    (4)对象转为Map

    (5)Map转为JSON

      Map转为JSON要区分两种情况。一种情况是,Map的键名都是字符串,这时可以选择转为对象JSON。

    function strMapToJson(strMap) {
      return JSON.stringify(strMapToObj(strMap));
    }
    
    let myMap = new Map().set('yes', true).set('no', false);
    strMapToJson(myMap)
    // '{"yes":true,"no":false}'

      另一种情况是,Map的键名有非字符串,这时可以选择转为数组JSON。

    function mapToArrayJson(map) {
      return JSON.stringify([...map]);
    }
    
    let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
    mapToArrayJson(myMap)
    // '[[true,7],[{"foo":3},["abc"]]]'

    (6)JSON转为Map

    Proxy

      ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

    var proxy = new Proxy(target, handler);

      Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

    var proxy = new Proxy({}, {
      get: function(target, property) {
        return 35;
      }
    });
    
    proxy.time // 35
    proxy.name // 35
    proxy.title // 35

      作为构造函数,Proxy接受两个参数。第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy的介入,操作原来要访问的就是这个对象;第二个参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作。比如,上面代码中,配置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35

      注意,要使得Proxy起作用,必须针对Proxy实例(上例是proxy对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。

      同一个拦截器函数,可以设置拦截多个操作。

    var handler = {
      get: function(target, name) {
        if (name === 'prototype') {
          return Object.prototype;
        }
        return 'Hello, ' + name;
      },
    
      apply: function(target, thisBinding, args) {
        return args[0];
      },
    
      construct: function(target, args) {
        return {value: args[1]};
      }
    };
    
    var fproxy = new Proxy(function(x, y) {
      return x + y;
    }, handler);
    
    fproxy(1, 2) // 1
    new fproxy(1,2) // {value: 2}
    fproxy.prototype === Object.prototype // true
    fproxy.foo // "Hello, foo"

    实例:Web 服务的客户端 

      Proxy 对象可以拦截目标对象的任意属性,这使得它很合适用来写 Web 服务的客户端。

    const service = createWebService('http://example.com/data');
    
    service.employees().then(json => {
      const employees = JSON.parse(json);
      // ···
    });

      上面代码新建了一个 Web 服务的接口,这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性,所以不用为每一种数据写一个适配方法,只要写一个 Proxy 拦截就可以了。

    function createWebService(baseUrl) {
      return new Proxy({}, {
        get(target, propKey, receiver) {
          return () => httpGet(baseUrl+'/' + propKey);
        }
      });
    }

    Reflect

    Promise 对象

    1. Promise 的含义

      所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

      Promise对象有以下两个特点。

      (1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

      (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected

      Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

    2. 基本用法

    var promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

      Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由JavaScript引擎提供,不用自己部署。

      resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

      reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

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

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

       一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观。而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单。

      then 可以使用链式调用的写法原因在于,每一次执行该方法时总是会返回一个 Promise 对象。另外,在 then onFulfilled 的函数当中的返回值,可以作为后续操作的参数

    function printHello (ready) {
        return new Promise(function (resolve, reject) {
            if (ready) {
                resolve("Hello");
            } else {
                reject("Good bye!");
            }
        });
    }
    
    function printWorld () {
        alert("World");
    }
    
    function printExclamation () {
        alert("!");
    }
    
    printHello(true)
        .then(function(message){
            alert(message);
        })
        .then(printWorld)
        .then(printExclamation);

    catch

      catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法,也就是说可以写成 then(fn).catch(fn),相当于 then(fn).then(null, fn)。使用 catch 的写法比一般的写法更加清晰明确。

      一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法。

    // bad
    promise
      .then(function(data) {
        // success
      }, function(err) {
        // error
      });
    
    // good
    promise
      .then(function(data) { //cb
        // success
      })
      .catch(function(err) {
        // error
      });

      上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch方法,而不使用then方法的第二个参数。

      跟传统的try/catch代码块不同的是,如果没有使用catch方法指定错误处理的回调函数,Promise对象抛出的错误不会传递到外层代码,即不会有任何反应。

      需要注意的是,catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。

    var someAsyncThing = function() {
      return new Promise(function(resolve, reject) {
        // 下面一行会报错,因为x没有声明
        resolve(x + 2);
      });
    };
    
    someAsyncThing()
    .catch(function(error) {
      console.log('oh no', error);
    })
    .then(function() {
      console.log('carry on');
    });
    // oh no [ReferenceError: x is not defined]
    // carry on

      此时,要是then方法里面报错,就与前面的catch无关了。

      catch方法之中,还能再抛出错误。

    Promise.all 和 Promise.race

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

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

      p的状态由p1p2p3决定,分成两种情况。

      (1)只有p1p2p3的状态都变成fulfilledp的状态才会变成fulfilled,此时p1p2p3的返回值组成一个数组,传递给p的回调函数。

      (2)只要p1p2p3之中有一个被rejectedp的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    // 生成一个Promise对象的数组
    var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
      return getJSON("/post/" + id + ".json");
    });
    
    Promise.all(promises).then(function (posts) {
      // ...
    }).catch(function(reason){
      // ...
    });

      Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。

    var p1 = new Promise(function (resolve) {
        setTimeout(function () {
            resolve("Hello");
        }, 3000);
    });
    
    var p2 = new Promise(function (resolve) {
        setTimeout(function () {
            resolve("World");
        }, 1000);
    });
    
    Promise.all([p1, p2]).then(function (result) {
        console.log(result); // ["Hello", "World"]
    });

      上面的例子模拟了传输两个数据需要不同的时长,虽然 p2 的速度比 p1 要快,但是 Promise.all 方法会按照数组里面的顺序将结果返回。

      日常开发中经常会遇到这样的需求,在不同的接口请求数据然后拼合成自己所需的数据,通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数),这个时候 Promise.all 方法就可以派上用场了。

      还有一个和 Promise.all 相类似的方法 Promise.race,它同样接收一个数组,不同的是只要该数组中的 Promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回。

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

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

      只要p1p2p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

    Promise.resolve() 

      有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用。

    var jsPromise = Promise.resolve($.ajax('/whatever.json'));

    Promise.reject()

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

    done()

      Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,我们可以提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。

    asyncFunc()
      .then(f1)
      .catch(r1)
      .then(f2)
      .done();

    finally() 

      finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。

    server.listen(0)
      .then(function () {
        // run test
      })
      .finally(server.stop);

    3. 应用

    加载图片

      我们可以将图片的加载写成一个Promise,一旦加载完成,Promise的状态就发生变化。

    Generator函数与Promise的结合

      使用Generator函数管理流程,遇到异步操作的时候,通常返回一个Promise对象。

  • 相关阅读:
    win7文件搜索技巧
    【SpringCloud】Zuul网关入门(十五)
    【SpringCloud】Hystrix仪表板(Dashboard)(十四)
    【SpringCloud】Hystrix工作原理(十三)
    【SpringCloud】Hystrix服务隔离(十二)
    【SpringCloud】Hystrix服务熔断(十一)
    【SpringCloud】Hystrix服务降级(十)
    【SpringCloud】OpenFeign服务超时与日志输出(九)
    【SpringCloud】OpenFeign服务调用(八)
    【SpringCloud】自定义Ribbon均衡策略(七)
  • 原文地址:https://www.cnblogs.com/chaoran/p/6366170.html
Copyright © 2011-2022 走看看