Is there a way to capture an error message in the JSON fetch response?

Question

Is there a way to capture an error message in the JSON fetch response?

Here is the code snippet to consider:

fetch('https://api.flickr.com/services/rest/?method=flickr.photos.search' +
    '&api_key=thiskeyshouldgivemeanerror&text=dog&format=json' +
    '&per_page=24&nojsoncallback=1')
    .then(function(rsp) {
        // The response shown in the first console.log does not match my expectations
        console.log(rsp);
        if(rsp.stat !== "ok") {
            throw new Error(rsp.message);
        }
        else {
            return rsp.json();
        }
    })
    .then(function(rsp) {
        // Here's the output I'm looking for: "{stat: "fail", code: 100, message: "Invalid API Key (Key not found)"}"
        console.log(rsp);
    })
    .catch(function(err) {
        alert("Encountered an issue. " + err);
    });

I am attempting to catch any errors and display the corresponding JSON error message from the response. However, the format of the response differs between the two console.logs. How can I ensure the response matches my expectation from the start?

In addition, why does the initial response show "ok" despite the absence of a valid API key?

Lastly, what is the reason behind needing to call rsp.json() to retrieve the correct JSON data in the second instance when it should have already been in JSON format?

javascript json fetch-api

Answer 1

Answer №1

Remember that the rsp in the first then-block is a response object, not the actual data from the backend. Since the response object doesn't contain a stat field, it cannot be "ok". You should instead check for rsp.ok or rsp.status.

For more information, you can refer to the response object reference

In the second then-block, make sure to validate the JSON data received from the backend before proceeding. If necessary, throw an error based on the checks.

fetch(url)
  .then(function(response) {
    if(!response.ok) {
      throw new Error("not ok");
    }
    return response.json()
  })
  .then(function(result) {
    if(result.stat === "fail") {
      throw new Error(result.message);
    }

    // Process the result when everything is okay

  })
  .catch(function(err) {
    alert(err);
  });

Answer 2

Remember that the rsp in the first then-block is a response object, not the actual data from the backend. Since the response object doesn't contain a stat field, it cannot be "ok". You should instead check for rsp.ok or rsp.status.

For more information, you can refer to the response object reference

In the second then-block, make sure to validate the JSON data received from the backend before proceeding. If necessary, throw an error based on the checks.

fetch(url)
  .then(function(response) {
    if(!response.ok) {
      throw new Error("not ok");
    }
    return response.json()
  })
  .then(function(result) {
    if(result.stat === "fail") {
      throw new Error(result.message);
    }

    // Process the result when everything is okay

  })
  .catch(function(err) {
    alert(err);
  });

Is there a way to capture an error message in the JSON fetch response?

Answer №1

Similar questions

The data from Ajax response is not showing up on the datatable when accessed through Firefox and Edge browsers

The AngularJS asynchronous directive in isolation is malfunctioning

Limit the length of text using jQuery by specifying the maximum pixel width

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

Searching for values within a JSON array in Postgresql using wildcard characters and comparison operators, while taking advantage of indexing

Quickly align with vertices using threejs

What is the best way to switch the CSS style of a button that has been mapped

Example using Three.js Collada: "file is either empty or does not exist"

What could be the reason my Backbone view is failing to render?

changing an array into json format using TypeScript

Guide to utilizing a web worker from an npm package in your primary webpack application

How to modify ID data with AngularJS ng-repeat

How can I ensure that a pop-up is shown only once per day in Vue.js

managing commitments in TypeScript

Substitute the attributes of one object with those of another

Why is "undefined" being used to alert an ajax call response?

Identifying changes in data streams

Inject the contents of an HTML file into a Vue div

What is the reason for the lack of uniqueness in Mongo ObjectIDs?

Creating various designs utilizing shared components through inheritance