skip to Main Content

While working with Vuex, I encountered an issue in a particular section where I’m making a GET request to my API. Despite knowing that the response should be a 404 error, my code doesn’t seem to enter the try-catch block when this happens at the line

var rptReq = await investigacionApi.get(url);

. I even attempted to nest two sets of try-catch blocks, but the behavior remained the same.

export const getUserByEmail = async ({ commit }, { dni, password }) => {
  var path = `/api/usuarios/dni`;
  try {
    const params = { dni, password };
    const url = `${path}?${new URLSearchParams(params)}`;
    console.log(url)
    try {
      var rptReq = await investigacionApi.get(url);
      console.log(rptReq)
      if (!rptReq || !rptReq.data) {
        throw new Error('La respuesta recibida es inválida');
      }
      const { status, data } = rptReq.data;
      commit('setUserProvider', { status, data, message: null })
    } catch (errores) {
      const { status, error } = errores.response.data;
      commit('setUserProvider', { status, data: null, message: error })
    }
  } catch (error) {
    console.log(error);
    commit('setUserProvider', { status: false, data: null, message: "error.message" })
  }
}

enter image description here

The screenshot displays my console error, indicating that my code broke on line 29, which corresponds to the API GET request. However, when I tested the same scenario in POSTMAN, I received a 404 response with a body.

And this is my investigacionApi.js

import axios from 'axios'
const apiUrl = process.env.VUE_APP_API_URL;
const investigacionApi = axios.create({
    baseURL: apiUrl
})

export default investigacionApi

2

Answers


  1. I see the issue here, actually 404 is not error or exception it’s a status code. That’s why it will not goes into catch block.

    Instead you can try this

    export const getUserByEmail = async ({ commit }, { dni, password }) => {
      var path = `/api/usuarios/dni`;
      try {
        const params = { dni, password };
        const url = `${path}?${new URLSearchParams(params)}`;
        console.log(url)
        try {
          var rptReq = await investigacionApi.get(url);
    
          // check here for specific scenario from the rptReq.
    
          console.log(rptReq)
          if (!rptReq || !rptReq.data) {
            throw new Error('La respuesta recibida es inválida');
          }
          const { status, data } = rptReq.data;
          commit('setUserProvider', { status, data, message: null })
        } catch (errores) {
          const { status, error } = errores.response.data;
          commit('setUserProvider', { status, data: null, message: error })
        }
      } catch (error) {
        console.log(error);
        commit('setUserProvider', { status: false, data: null, message: "error.message" })
      }
    }
    
    Login or Signup to reply.
  2. By default, axios throws an error when the response status code is not within the 2xx range

    Your code looks like this.

    try
    {
       try
       {
          throw new Error("Hi");  
       }
       catch(innerErr)
       {
           console.log("inner");
           console.error(innerErr);
       }
    }
    catch(err)
    {
        console.log("outer");
        console.error(innerErr);
    }

    You can see only "inner" is printed. Because the error is properly handled by the inner try-catch block and not getting re-thrown. Error happens within the inner try-catch block will never get thrown to the outer try-catch block.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search