javascript - How do I iterateaccess response headers from a fetch call in Typescript? - Stack Overflow

admin管理员组

文章数量:1405887

Consider the following TS example:

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 plains 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);
  })

Normally, this would be valid but Typescript plains about the iteration and suggests a piler option:

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

Are there any downsides to using --downlevelIteration? Is there another way of acplishing this without having to change the piler options?

Thanks!

Consider the following TS example:

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 plains 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);
  })

Normally, this would be valid but Typescript plains about the iteration and suggests a piler option:

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

Are there any downsides to using --downlevelIteration? Is there another way of acplishing this without having to change the piler options?

Thanks!

• javascript
• typescript
• iterator

Share Improve this question Follow asked Nov 23, 2019 at 20:20 aaronaaarona 37.5k4545 gold badges145145 silver badges194194 bronze badges 1

• 1 Looks like downlevelIteration is only for ES3/ES5 targets and you better change your target to ES6+ instead. But yes, changing your piler options is the appropriate solution. – Bergi Commented Nov 23, 2019 at 20:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Iterators (in some languages called Enumerators) were added in ES6. They are not present in ES5 and older. Before ES6 only iterable construct was Array or so-called array like native objects. ES6 brought iterators and features like for ... of that works with them. When targeting below ES6 you have to use downlevelIteration in order to transpile ES6 iterator code to ES5 patible code (iterator will be changed do Arrays and for ... of will be replaced by ES5 valid syntax). If you are using no other transpiler beside TSC you have no other choice but enable this flag.

const getHeaders = (headers: Headers) => {
  let headerObj: IObject = {};
  const keys = headers.keys();
    let header = keys.next();
    while (header.value) {
      headerObj[header.value] = headers.get(header.value);
      header = keys.next();
    }
  return headerObj;
};

The Headers.entries() method returns an iterator allowing to go through all key/value pairs contained in this object. Both the key and value of each pair are String objects. -MDN

const request = new Request("https://api.w3/groups");

(async () => {
   let response = await fetch(request);
   for (const entry of response.headers.entries()) {
     console.log(entry[0] + ':' + entry[1]);
   }
   if(response.ok){
      //...
   } else {
      
   }
})().catch(err => {
    console.error(err);
});

本文标签： javascriptHow do I iterateaccess response headers from a fetch call in TypescriptStack Overflow