javascript - 如何从 Typescript 中的 fetch 调用迭代/访问响应 header ？

Question

考虑以下 TS 示例:

fetch("http://localhost:3000/auth", {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
    body: JSON.stringify(data)
  })
  .then((response) => {
    // would like to store some information from the response's headers
    // like access tokens etc.

    // Typescript complains about this iteration (see more info below)
    for (var pair of response.headers.entries()) {
      console.log(pair[0] + ': ' + pair[1])
    }

    return response.json()
  })
  // get the response data etc...
  .then((data) => {
    console.log(data);
  })
  // log an error etc...
  .catch((error) => {
    console.log('ERROR: ', error);
  })

通常情况下，这是有效的，但 Typescript 会提示迭代并建议编译器选项:

Type 'IterableIterator<[string, string]>' is not an array type or a string type.
Use compiler option '--downlevelIteration' to allow iterating of iterators.

使用--downlevelIteration有什么缺点吗？是否有另一种方法可以在不更改编译器选项的情况下完成此任务？

谢谢!

Answer 1

ES6 中添加了迭代器(在某些语言中称为枚举器)。它们不存在于 ES5 及更早版本中。在 ES6 之前，唯一的可迭代构造是 Array 或所谓的类数组 native 对象。 ES6 带来了迭代器和诸如 for ... of 等与它们配合使用的功能。当目标低于 ES6 时，您必须使用 downlevelIteration 才能将 ES6 迭代器代码转换为 ES5 兼容代码(迭代器将更改为 Array 和 for ... of 将被 ES5 有效语法替换)。如果您除了 TSC 之外没有使用其他转译器，您别无选择，只能启用此标志。