Javascript Fetch let ret await fetch https api github com users KhronosGroup repos console log ret various options returned from a fetch for let key in ret console log key ret key end for key Getting data await fetch https api github com users KhronosGroup repos Sending data await fetch https api github com users KhronosGroup repos method post headers Content Type application json body JSON stringify something text Looking at the reply then fetch https api github com users KhronosGroup repos then function response console log response response for let key in response console log key response key end for key What could go wrong Why would a fetch ever fail You tried to fetch a non existent resource Youre unauthorized to fetch the resource You entered some arguments wrongly The server throws an error The server timed out The server crashed The API changed put a typing error in the url fetch https api github com users Khron6osGroup repos then response response json then data console log data is data catch error console log error is error If you look more closely at the reponse when there is an error fetch https api github com users Khron6osGroup repos then response for let key in response console log key response key end for key response json then data console log data is data catch error console log error is error Notice ok false status 404 statusText Add in some extra checks fetch https api github com users Khron6osGroup repos then response if response ok console log success return response json else console log failed else do something else then data console log data is data catch error console log error is error Add in some extra checks fetch https api github com users Khron6osGroup repos then response if response ok console log success return response json else console log failed throw new Error something went wrong else do something else then data console log Data is data catch error console log Catch error is error fetchPlus fetch but with a bit more tries harder function fetchPlus url options n 3 console log n n return new Promise function resolve reject fetch url options then function result on success You cannot throw an error or you ll lose your n if result ok throw new Error issue result ok not good resolve result catch function error console log plus catch error if n 1 return reject error add a bit of a delay between retries to help the network issue setTimeout function console log trying in 500ms fetchPlus url options n 1 then resolve catch reject 500 end fetchPlus Same as earlier but just called the plus version of the fetch fetchPlus https api github com users Khron6osGroup repos then response if response ok console log success return response json else console log failed throw new Error something went wrong else do something else then data console log Data is data catch error console log Catch error is error
lse then data console log data is data catch error console log error is error Add in some extra checks fetch https api github com users Khron6osGroup repos then response if response ok console log success return response json else console log failed throw new Error something went wrong else do something else then data console log Data is data catch error console log Catch error is error fetchPlus fetch but with a bit more tries harder function fetchPlus url options n 3 console log n n return new Promise function resolve reject fetch url options then function result on success You cannot throw an error or you ll lose your n if result ok throw new Error issue result ok not good resolve result catch function error console log plus catch error if n 1 return reject error add a bit of a delay between retries to help the network issue setTimeout function console log trying in 500ms fetchPlus url options n 1 then resolve catch reject 500 end fetchPlus Same as earlier but just called the plus version of the fetch fetchPlus https api github com users Khron6osGroup repos then response if response ok console log success return response json else console log failed throw new Error something went wrong else do something else then data console log Data is data catch error console log Catch error is error