Ggtcf

The following code is taken from the last task of https://javascript.info/promise-api.

When I run the following, I am unable to get the output to match the alerts that the comments indicate. I assume that I am missing somethign with the catch statements, but I do not understand where I am going wrong. I appreciate any help!

// the whole promise chain fails with an error here
// change that:
// make errors appear as members of the results array

let urls = [
 'https://api.github.com/users/iliakan',
 // this URL is HTML page, it's invalid JSON, so response.json() fails
 '/',
 // this URL is invalid, so fetch fails
 'http://no-such-url'
];

// Fix it:
Promise.all(urls.map(url => fetch(url).catch(err=>err)))
 .then(responses => Promise.all(
 responses.map(r => r.json().catch(err=>err))
 ))
 // Demo output (no need to change):
 .then(results => 
 alert(results[0].name); // Ilya Kantor
 alert(results[1]); // SyntaxError: Unexpected token < in JSON at position 0
 alert(results[2]); // TypeError: failed to fetch (text may vary)
 );

You do get an error from your code. In Firefox, for example, it will say TypeError: r.json is not a function in the developer console. (I see you're using alert() so you might not be familiar with the developer console and console.log() available in browsers. If this is so, I'd suggest looking in to them as the information they provide can be invaluable.)

The problem is that, in r.json(), r is either a response object or an exception object due to the earlier, first .catch(err=>err). Since exception objects do not have a json property, it throws its own exception. That exception isn't caught because there's no try/catch for it and .catch() is only useable on promises.

You could do something like this to check for and pass along an initial exception:

responses.map(r => r.json ? r.json().catch(err=>err) : r)

The reason that this doesn't work is because in the first .catch(err=>err) statement, it is treating errors like a standard (successful) result. Then, any faulty data from fetch is called into the next Promise.all statement as it is treated as a good result, and thus r.json() will not know what to do with any faulty data (which is from fetch('/').