ES6常用但被忽略的方法(第五弹Promise和Iterator)

1,668 阅读10分钟

写在开头

  • ES6常用但被忽略的方法 系列文章,整理作者认为一些日常开发可能会用到的一些方法、使用技巧和一些应用场景,细节深入请查看相关内容连接,欢迎补充交流。

相关文章

Promise

特点

  1. 对象的状态不受外界影响。有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected

使用

  • Promise对象是一个构造函数,用来生成 Promise 实例。构造函数接受一个函数作为参数,该函数的两个参数分别是resolverejectresolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved);reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected)。
const promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
  • Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。第二个函数是可选的,不一定要提供。
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
  • Promise 新建后就会立即执行。 then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行。JavaScript事件循环机制

Promise.resolve()

  • 将现有对象转为 Promise 对象。
  • 不同参数情况:
    1. 参数是一个 Promise 实例,直接返回这个实例。
    2. 参数是一个thenable对象(thenable对象指的是具有then方法的对象),将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。
    let thenable = {
      then: function(resolve, reject) {
        resolve(42);
      }
    };
    
    let p1 = Promise.resolve(thenable);
    p1.then(function(value) {
      console.log(value);  // 42
    });
    
    1. 参数不是具有 then 方法的对象,或根本就不是对象,返回一个新的Promise 对象,状态为resolved
    const p = Promise.resolve('detanx');
    
    p.then(function (s){
      console.log(s)
    });
    // detanx
    
    1. 不带有任何参数,直接返回一个resolved状态的 Promise 对象。立即resolve()Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时。
    setTimeout(function () {
      console.log('three');
    }, 0);
    
    Promise.resolve().then(function () {
      console.log('two');
    });
    
    console.log('one');
    
    // one
    // two
    // three
    

Promise.reject()

  • Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejectedPromise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。 这一点与Promise.resolve方法不一致。
const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

Promise.prototype.catch()

  • Promise.prototype.catch()方法是.then(null, rejection).then(undefined, rejection)的别名(可以查看手写Promise的该方法实现),用于指定发生错误时的回调函数。
// 写法一
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 状态已经变成resolved,再抛出错误是无效的。
const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok
  • Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。
getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});
  • 一般不要在then()方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。
// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });
  • 跟传统的try/catch代码块不同的是,如果没有使用catch()方法指定错误处理的回调函数,Promise对象抛出的错误不会传递到外层代码,即不会有任何反应。
const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错,因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123

Promise.prototype.finally()

  • finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。 该方法是 ES2018 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {
    console.log('detanx');
});
// 'detanx'
  • finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected。方法里面的操作,应该是与状态无关的,不依赖于Promise的执行结果。finally方法总是会返回原来的值。
// 实现
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})

// resolve 的值是 2
Promise.resolve(2).finally(() => {})

// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})

// reject 的值是 3
Promise.reject(3).finally(() => {})

Promise.all()、Promise.race()和Promise.allSettled()

  • 相同点
    1. 方法都是用于将多个 Promise 实例,包装成一个新的 Promise 实例。
    2. Promise.all()所有的实例返回都是fulfilled时和Promise.allSettled()的返回值都是数组。
  • 不同点
    1. 有时候,我们不关心异步操作的结果,只关心这些操作有没有结束。这时,Promise.allSettled()方法就很有用。如果没有这个方法,想要确保所有操作都结束,就很麻烦。Promise.all()方法无法做到这一点。
    const urls = [ /* ... */ ];
    const requests = urls.map(x => fetch(x));
    
    try {
      await Promise.all(requests);
      console.log('所有请求都成功。');
    } catch {
      console.log('至少一个请求失败,其他请求可能还没结束。');
    }
    
    1. Promise.all() 所有的实例中有一个被 rejectedp 的状态就变成rejected,此时返回第一个被 reject 的实例的值。Promise.allSettled() 中的实例 fulfilled 时,对象有 value 属性,rejected 时有 reason 属性,对应两种状态的返回值。
    const resolved = Promise.resolve(42);
    const rejected = Promise.reject(-1);
    
    const allSettledPromise = Promise.allSettled([resolved, rejected]);
    
    allSettledPromise.then(function (results) {
      console.log(results);
    });
    // [
    //    { status: 'fulfilled', value: 42 },
    //    { status: 'rejected', reason: -1 }
    // ]
    
    1. 如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()catch方法。如果实例没有自己的catch方法,就会调用Promise.all()catch方法。
    const p1 = new Promise((resolve, reject) => {
      resolve('hello');
    })
    .then(result => result)
    .catch(e => e);
    
    const p2 = new Promise((resolve, reject) => {
      throw new Error('报错了');
    })
    .then(result => result)
    => // 下面的catch移除
    .catch(e => e);
    
    Promise.all([p1, p2])
    .then(result => console.log(result))
    .catch(e => console.log(e));
    // ["hello", Error: 报错了]
    => // 移除p2的catch
    // // Error: 报错了
    
    1. Promise.race()只要有一个实例率先改变状态,状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给回调函数。
    const p = Promise.race([1,
      new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('request timeout')), 5000)
      })
    ]);
    
    p
    .then(console.log)
    .catch(console.error);
    // 1
    

Iterator 和 for...of 循环

  • ES6-Iterator 和 for...of 循环
  • 它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
  • Iterator 的作用:
    1. 为各种数据结构,提供一个统一的、简便的访问接口;
    2. 使得数据结构的成员能够按某种次序排列;
    3. 新的遍历命令for...of循环,Iterator 接口主要供for...of消费。
  • 遍历过程:
    1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
    2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
    3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
    4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。
    • 每一次调用next方法,都会返回数据结构的当前成员的信息(返回一个包含valuedone两个属性的对象。value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。)
    var it = makeIterator(['a', 'b']);
    it.next() // { value: "a", done: false }
    it.next() // { value: "b", done: false }
    it.next() // { value: undefined, done: true }
    
    function makeIterator(array) {
      var nextIndex = 0;
      return {
        next: function() {
          return nextIndex < array.length ?
            {value: array[nextIndex++], done: false} :
            {value: undefined, done: true};
        }
      };
    }
    
    • 对于遍历器对象来说,done: falsevalue: undefined属性都是可以省略的。
    // makeIterator函数可以简写成下面的形式
    function makeIterator(array) {
      var nextIndex = 0;
      return {
        next: function() {
          return nextIndex < array.length ?
            {value: array[nextIndex++]} :
            {done: true};
        }
      };
    }
    
  • 使用 TypeScript 的写法
    • 遍历器接口(Iterable)、指针对象(Iterator)和next方法返回值的规格可以描述如下。
    interface Iterable {
      [Symbol.iterator]() : Iterator,
    }
    
    interface Iterator {
      next(value?: any) : IterationResult,
    }
    
    interface IterationResult {
      value: any,
      done: boolean,
    }
    

默认 Iterator 接口

  • 当使用for...of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。
const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};
  • 原生具备Iterator接口的数据结构:ArrayMapSetStringTypedArray、函数的 arguments 对象、NodeList 对象
  • 一个对象如果要具备可被for...of循环调用的 Iterator 接口,就必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。
class RangeIterator {
  constructor(start, stop) {
    this.value = start;
    this.stop = stop;
  }

  [Symbol.iterator]() { return this; }

  next() {
    var value = this.value;
    if (value < this.stop) {
      this.value++;
      return {done: false, value: value};
    }
    return {done: true, value: undefined};
  }
}

function range(start, stop) {
  return new RangeIterator(start, stop);
}

for (var value of range(0, 3)) {
  console.log(value); // 0, 1, 2
}
  • 类似数组的对象调用数组的Symbol.iterator可以遍历;普通对象部署数组的Symbol.iterator方法,并无效果。
// 类似数组对象
let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}
// 普通对象,下标不是数字
let iterable = {
  a: 'a',
  b: 'b',
  c: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // undefined, undefined, undefined
}
  • 如果Symbol.iterator方法对应的不是遍历器生成函数(即会返回一个遍历器对象),解释引擎将会报错。
var obj = {};
obj[Symbol.iterator] = () => 1;
[...obj] // TypeError: [] is not a function

调用 Iterator 接口的场合

  1. 解构赋值
    • 对数组和 Set 结构进行解构赋值时,会默认调用Symbol.iterator方法。
  2. 扩展运算符
    • 扩展运算符(...)也会调用默认的 Iterator 接口。
  3. yield*
    • yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。
  4. 其他
    • for...ofArray.from()Map(), Set(), WeakMap(), WeakSet()(比如new Map([['a',1],['b',2]]))、Promise.all()Promise.race()...

遍历器对象的 return()和throw()

  • 遍历器对象除了具有next方法,还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数,那么next方法是必须部署的,return方法和throw方法是否部署是可选的。
  • for...of循环提前退出(通常是因为出错,或者有break语句),就会调用return方法。如果一个对象在完成遍历前,需要清理或释放资源,就可以部署return方法。
function readLinesSync(file) {
  return {
    [Symbol.iterator]() {
      return {
        next() {
          return { done: false };
        },
        return() {
          file.close();
          return { done: true };
        }
      };
    },
  };
}
// 触发return情况一
for (let line of readLinesSync(fileName)) {
  console.log(line);
  break;
}

// 触发return情况二
for (let line of readLinesSync(fileName)) {
  console.log(line);
  throw new Error();
}
  • throw方法主要是配合 Generator 函数使用,下一弹会提到。

for...of 循环

  • 作为遍历所有数据结构的统一的方法。
  • 和其他遍历对比
    1. for...of会正确识别 32UTF-16 字符。有着同for...in一样的简洁语法,但是没有for...in那些缺点。不同于forEach方法,它可以与breakcontinuereturn配合使用。
    for (let x of 'a\uD83D\uDC0A') {
      console.log(x);
    }
    // 'a'
    // '\uD83D\uDC0A'
    
    1. forEach无法中途跳出forEach循环,break命令或return命令都不能奏效。
    2. for...in循环缺点,一是数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。二是for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。最后某些情况下,for...in循环会以任意顺序遍历键名。for...in循环主要是为遍历对象而设计的,不适用于遍历数组。
  • 其他类型的数据可以使用其他技巧转为有Iterator接口的数据结构再使用for...of进行遍历。
    1. 对象
    • 使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。
    for (var key of Object.keys(someObject)) {
      console.log(key + ': ' + someObject[key]);
    }
    
    • 使用 Generator 函数将对象重新包装一下。
    function* entries(obj) {
      for (let key of Object.keys(obj)) {
        yield [key, obj[key]];
      }
    }
    
    for (let [key, value] of entries(obj)) {
      console.log(key, '->', value);
    }
    // a -> 1
    // b -> 2
    // c -> 3
    
    1. 类似数组的对象但不具有 Iterator 接口
    • 使用Array.from方法将其转为数组。
    let arrayLike = { length: 2, 0: 'a', 1: 'b' };
    // 报错
    for (let x of arrayLike) {
      console.log(x);
    }
    // 正确
    for (let x of Array.from(arrayLike)) {
      console.log(x);
    }