Uncaught (in promise) Error: Network Error at createError-CodePudding

I'm going to use Axios to communicate API. But that kind of error keeps coming out. I don't understand this problem. I searched on the Internet and tried everything. Help me. All I want is to click on that button to see the low value in the developer tool.

  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()}>API호출버튼</button>

CodePudding user response：

Alway wrap await inside 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);
    // Do something with error
  }
};

CodePudding user response：

Try

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

CodePudding user response：

Note:

not sure about you response structure. Current code works as expected for structure:

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

if it is not so, then use if statement as !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 for catching error
    if (!res.data.success) {
      alert(res.data.message);
    }
  };