fetch: handle error and get error message from api response

Smith

None

2568 Points

74 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: 8463
Total Answered: 2
Total Marked As Answer: 1
Posted On: 28-Jan-2019 23:04

Share:

Answers

Priya

Participant

936 Points

28 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

Member

506 Points

24 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));
    });
};