fetch: handle error and get error message from api response

Smith
Smith
Participant
386 Points
113 Posts

I have an HTTP API endpoint that returns JSON data both on success and on failure and using vuejs frontend framework with fetch and promise:

UserService method:

saveData(data: Data) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new Promise((resolve, reject) => {
        fetch('/save', {
            body: JSON.stringify(data),
            method: 'POST',
            credentials: 'include',
            headers: headers
        })
            .then(response => {
                    resolve(response)
            })
            .catch(err => reject(err));
    });
};

calling service method as:

this.UserService.saveData(this.userData)
.then(data => {
    console.log('saved');
})
.catch(err => {
    console.log(err);
});

But it's not able to handle the error 400 or 500 and always showing success. Can anyone help me on this?

Views: 7213
Total Answered: 2
Total Marked As Answer: 1
Posted On: 28-Jan-2019 23:04

Share:   fb twitter linkedin
Answers
Priya
Priya
Member
62 Points
26 Posts
         

In .catch block only connection related error will catch, for other error like 400, and 500 can be catch using response.ok as:

saveData(data: Data) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new Promise((resolve, reject) => {
        fetch('/save', {
            body: JSON.stringify(data),
            method: 'POST',
            credentials: 'include',
            headers: headers
        })
            .then(response => {
                    if (response.ok) {
                      resolve(response)                
                    } else {                        
                      reject(response);  
                    }
            })
            .catch(err => reject(err));
    });
};
Posted On: 28-Jan-2019 23:31
Thanks Priya, Now control is going to .catch but nothing logging to console. I.e error message is not coming.
 - Smith  29-Jan-2019 04:19
use response.text().then(errorMessage=>reject(errorMessage)); instead of reject(response);
 - Rashmi  29-Jan-2019 11:48
edx
edx
54 Points
17 Posts
         

Use following:

saveData(data: Data) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new Promise((resolve, reject) => {
        fetch('/save', {
            body: JSON.stringify(data),
            method: 'POST',
            credentials: 'include',
            headers: headers
        })
            .then(response => {
                    if (response.ok) {
                      response.text().then(errorMessage=>reject(errorMessage));                
                    } else {                        
                      reject(response);  
                    }
            })
            .catch(err => reject(err));
    });
};
Posted On: 29-Jan-2019 23:26
thanks, it's work for me.
 - Smith  01-Feb-2019 22:56
 Log In to Chat