When the component is mounted on the page, a planet is fetched from an api. Then the response body is parsed to JSON. After that the object is added to the component state. When there was an error it is added to the state instead.
Then the response body is parsed to JSON
function (r) { return r.json()}
That function is thenable so following it .then is called and the result or error is passed to the first or second function respectively.
// The Promise resolves when the server starts responding
const response = await fetch(…);
// The Promise resolves when both the transfer and the JSON parsing ended
const body = await response.json();
`fetch()` may fool you into thinking that it resolves when the request is complete, but it's always a 2-step operation (unless you start implementing a streaming interface, then it's more than 2 steps)
so res => res.json() is just like having a callback like:
function(res) { return res.json() }
and the next part in the then() chain, takes that result as "planet".
Basically, that last part of the chain, has a signature like:
(function callback(...), function errorCallback(...))
and the callback part gets the result of the previous step as "planet" (if all went ok). If there was an error in the previous steps of the chain, the errorCallback would get called, with the exception passed in as "error".