Error: The promise was not caught due to a network issue, resulting in a creation error

Question

Error: The promise was not caught due to a network issue, resulting in a creation error

I'm trying to use Axios for API communication and I keep encountering this error. Despite researching online and attempting various solutions, I am still unable to resolve the problem. Can someone please assist me? All I want is to be able to click on a button and see the low value in the developer tools.

  useEffect(() => {
    setJwt(getClientCookieFromClient('jwt'));
  }, []);

  const customFetch = async () => {
    const res = await axios
      .get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
        headers: {
          Authentication: jwt,
        },
      })
      .then((res) => res.data);
    if (!res.data.success) {
      alert(res.data.message);
    }
  };

...

<button onClick={() => customFetch()}>Call API Button</button>

javascript reactjs typescript next.js

Answer 1

Answer №1

It is important to always enclose the await inside a try/catch block.

const customFetch = async () => {
  try {
    const res = await axios
      .get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
        headers: {
          Authentication: jwt,
        },
      })
      .then((res) => res.data);
    if (!res.data.success) {
      alert(res.data.message);
    }
  } catch (error) {
    console.log(error);
    // Handle error appropriately
  }
};

Answer 2

It is important to always enclose the await inside a try/catch block.

const customFetch = async () => {
  try {
    const res = await axios
      .get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
        headers: {
          Authentication: jwt,
        },
      })
      .then((res) => res.data);
    if (!res.data.success) {
      alert(res.data.message);
    }
  } catch (error) {
    console.log(error);
    // Handle error appropriately
  }
};

Answer 3

Answer №2

Give this a shot

useEffect(() => {
    setJwt(getClientCookieFromClient('jwt'));
  }, []);

  const customFetch = async () => {
    const res = await axios.get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
      headers: {
        Authentication: jwt,
      },
    });
    if (!res.data.success) {
      alert(res.data.message);
    }
  };

Answer 4

Give this a shot

useEffect(() => {
    setJwt(getClientCookieFromClient('jwt'));
  }, []);

  const customFetch = async () => {
    const res = await axios.get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
      headers: {
        Authentication: jwt,
      },
    });
    if (!res.data.success) {
      alert(res.data.message);
    }
  };

Answer 5

Answer №3

Important Note:

Your response structure may need to be adjusted for optimal performance. The current code is functioning correctly with the following structure:

res = { data: { data: {success: true}}}

If this is not the case, consider using an if statement like !res.success

useEffect(() => {
    setJwt(getClientCookieFromClient('jwt'));
  }, []);

  const customFetch = async () => {
    const res = await axios
      .get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
        headers: {
          Authentication: jwt,
        },
      })
      .then((res) => res.data)
      .catch((err) => console.log("Error while fetching", err)); // Use .catch to handle errors
    if (!res.data.success) {
      alert(res.data.message);
    }
  };

Answer 6

Important Note:

Your response structure may need to be adjusted for optimal performance. The current code is functioning correctly with the following structure:

res = { data: { data: {success: true}}}

If this is not the case, consider using an if statement like !res.success

useEffect(() => {
    setJwt(getClientCookieFromClient('jwt'));
  }, []);

  const customFetch = async () => {
    const res = await axios
      .get(`${process.env.NEXT_PUBLIC_WECODE_URI}/subscription/master_table`, {
        headers: {
          Authentication: jwt,
        },
      })
      .then((res) => res.data)
      .catch((err) => console.log("Error while fetching", err)); // Use .catch to handle errors
    if (!res.data.success) {
      alert(res.data.message);
    }
  };

Error: The promise was not caught due to a network issue, resulting in a creation error

Answer №1

Answer №2

Answer №3

Important Note:

Similar questions

Tips for concealing an alert using an 'if' statement

A guide to querying JSON data in a backend database with JavaScript

What is the reason for the retrieval of jquery-3.5.1.min.js through the request.params.id expression?

troubleshooting issues with nextjs13 and styledcomponent

What could be the reason for the lack of error handling in the asynchronous function?

Retrieve a Vue Component by utilizing a personalized rendering method for a Contentful embedded entry

Issue: $injector:unpr Angular Provider Not Recognized

Incorporate and interpret a custom JSON object within my Shopify Liquid theme

Presenting a dynamic selection of files from a database in a dropdown menu with looping functionality using Laravel

React JS displayed the string of /static/media/~ instead of rendering its markdown content

"Development environment running smoothly for NextJS 14 site, but encountering issues when deployed on Verc

Using ngFormModel with Ionic 2

Switching the Checkbox Data Binding Feature in Angular

Issue with reCAPTCHA callback in Firebase Phone Authentication not functioning as expected

Posting data in ASP.NET Core from the frontend to the backend (specifically with React) involves sending information

The NextJS API route functions flawlessly when tested locally, generating over 200 records. However, upon deployment to Vercel, the functionality seems to

Revamp the HTML page by automatically refreshing labels upon every Get request

Having trouble with images not showing up when using Material UI components within a Next.js route

Tips for adjusting the MUI datagrid's display mode specifically for mobile users

What steps do I need to take to activate the AWS Location Services map in a React application, allowing unauthenticated users through AWS C