fetch: handle error and get error message from api response

Smith
Smith
Participant
350 Points
105 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?

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

Share:   fb twitter linkedin
Answers
Priya
Priya
Member
42 Points
21 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
46 Points
13 Posts
Marked as answer      

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
banner

Blog

Active User (0)

No Active User!
 Log In to Chat