How to send a response in a callBack

Question

I'm pretty new to the fetch api and cant figure out why I can access response.json() locally but not once deployed.

EDIT: Just making the question clearer. When my response is NOT ok, I want to send response.json() to my errorCallBack function. This works locally and I set my error message to 'MyException'. However, when it is deployed to a new environment the parameter received by errorCallBack is a Promise with the status - 'Pending' and the catch in the errorCallBack function is hit.

Fetch:

    fetch(request)
        .then(response => {
            if (!response.ok) {
                errorCallBack(response.json());
                return;
            }
            successCallBack();
        })
        .catch(error => {
            console.log(error.message);
            errorCallBack();
        });

Error callback:

    errorCallBack = (jsonResponse) => {
        jsonResponse
            .then(data => {
                if (data) {
                    if (data.MyException) {
                        this.setErrorMessage("MyException");
                        return;
                    }
                }
            })
            .catch(() => {
                this.setErrorMessage("");
            });
    }

Oscar Rendón · Answer 1 · 2020-04-15T16:58:28.463

0

Some changes. response.json() can fail if you are returning an empty response, but you can add your logic there.

 fetch(request)
        .then(response => {
            if (!response.ok) {
                console.log(response.status) // Error code
                console.log(response.statusText); // Error message
                return errorCallBack(response.json()); // return response Promise
            }

            return successCallBack(response.json()); // This will return a Promise
        })
        .catch(error => {     
            console.log(error); // Log any error
            errorCallBack(error); // return an error object
        });

handle Error

errorCallBack = (response) => {

   response
   .then(jsonData => {

      if(jsonData.myException) {
         ...
      } else{
         ...
      }

   })
   .catch(error => {
      console.log(error)
      ...
   })
}

edited Apr 15 '20 at 16:58

answered Apr 15 '20 at 15:26

Oscar Rendón

52
1
8

I tried returning the errorCallBack(response) but this hasn't worked either – Apr 15 '20 at 16:00
You need to change your errorCallBack function to interpret the result – Oscar Rendón Apr 15 '20 at 16:06
Can you elaborate? – Apr 15 '20 at 16:09
errorCallBack = (response) => { if(response.MyException) { this.setErrorMessage("MyException"); }else{ this.setErrorMessage(""); } } – Oscar Rendón Apr 15 '20 at 16:13
Your expection is a JSON response? – Oscar Rendón Apr 15 '20 at 16:22
Yes a JSONBadRequest with an object to determine which kind of error has occured – Apr 15 '20 at 16:50
How would returning errorCallBack(response.json()); differ from the initial code in the question? – Apr 15 '20 at 17:07
basically the fetch response is an Object and response.json() is a Promise, you were only missing to add the response.json() in your callback – Oscar Rendón Apr 15 '20 at 17:17
Probably your response is not returning your exception – Oscar Rendón Apr 15 '20 at 18:06
it does locally but not on the server – Apr 15 '20 at 18:10

How to send a response in a callBack

1 Answers1