最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Axios override, get status code from the data response instead of status - Stack Overflow

programmeradmin2浏览0评论

I'm calling an API that defines the statusCode from data instead of the response code:

{
  data: {
     statusCode: 422,
     message: "User's not found"
  }, 
 status: 200
}

In my axios get request it's getting the status code from the status instead in data.

return axios.get(`${process.env.BASE_URL}/users`)
      .then(response => {
        console.log(response);
      }).catch(err => {
        console.log(err.message);
      });

I'm getting the response but it should go to catch since it's 422.

How can I refer to the statusCode of the data response so that if it's not 200 it should go to catch statement

I'm calling an API that defines the statusCode from data instead of the response code:

{
  data: {
     statusCode: 422,
     message: "User's not found"
  }, 
 status: 200
}

In my axios get request it's getting the status code from the status instead in data.

return axios.get(`${process.env.BASE_URL}/users`)
      .then(response => {
        console.log(response);
      }).catch(err => {
        console.log(err.message);
      });

I'm getting the response but it should go to catch since it's 422.

How can I refer to the statusCode of the data response so that if it's not 200 it should go to catch statement

Share Improve this question edited Feb 10, 2019 at 8:23 AllenC asked Feb 10, 2019 at 8:19 AllenCAllenC 2,7541 gold badge46 silver badges79 bronze badges 2
  • I think the problem is from the backend side, backend should return 422 status code instead of 200 – Alvin Theodora Commented Feb 10, 2019 at 8:21
  • Yes I'm also thinking the backend should handle the status code properly. but is there any way I can refer from the statusCode of the data response? – AllenC Commented Feb 10, 2019 at 8:25
Add a ment  | 

3 Answers 3

Reset to default 4

You can intercept the response, inspect the data and throw a custom error in this case:

// Add a response interceptor
axios.interceptors.response.use(function(response) {
    if (response.data && response.data.statusCode && !(response.data.statusCode >= 200 && response.data.statusCode < 300)) throw new Error()
    return response;
}, function(error) {
    return Promise.reject(error);
});

// Make a GET request
axios.get(url)
    .then((data) => {
        console.log('data', data)
    })
    .catch((e) => {
        console.log('error', e)
    })

This way you configure your axios instance so you dont have to repeat yourself for every single request in your app

Also, you can override the status using following code. But since status validation has already executed, it will not throw errors on bad status codes

// Add a response interceptor
axios.interceptors.response.use(function(response) {
    if (response.data && response.data.statusCode) response.status = response.data.statusCode
    return response;
}, function(error) {
    return Promise.reject(error);
});

You can handle with standard if statement inside the .then()

return axios.get(`${process.env.BASE_URL}/users`)
      .then(response => {
        if(response.data.statusCode===442){
           ...//custom error handling goes here
        }else{
           ...//if statusCode is a success one
        }      
      }).catch(err => {
        console.log(err.message);
      });

Check the response.data.statusCode value, if it is 442 then you should ideally throw an Error and let it be handled in the .catch callback.

return axios.get(`${process.env.BASE_URL}/users`)
      .then(response => {
        if(response.data.statusCode===442){
           throw new Error(response.data.message); //using throw instead of Promise.reject() to break the control flow. 
        }else{
           //return the data wrapped in promise
        }      
      })
      .catch((err) => {
          console.log(err.message);
          return Promise.reject(err.message);
      });
发布评论

评论列表(0)

  1. 暂无评论