[Nuxt.js] useFetch와 $fetch

⚠️ 마운트된 후에 api를 연동할 경우

파일 업로더 페이지를 제작중에 file 업로드를 서버측 endPoint를 이용해 구현중에 심각한 에러는 아니지만 계속 노랭이 warn 에러가 떴다. plz use $fetch 라는데,,,, useFetch랑 무슨 차이이길래..!

거슬리는 노랭이 에러

아래는 기존에 작성한 common.js 파일이다.

export const request = (url, method, body) => {

    const config = useRuntimeConfig();

    return useFetch(`${url}`, {
        method,
        headers: {
            Authorization: `Bearer ${sessionStorage.getItem("jwt")}`,
            'X-API-key': config.app.api.key,
        },
        body
    });
}

 

⭕ 해결방안

에러문구에서 계속 useFetch대신에 $fetch를 사용해달라해서 변경했더니

export const request = async (url, method, body) => {

    const config = useRuntimeConfig();

    return await $fetch(`${url}`, {
        method,
        headers: {
            Authorization: `Bearer ${sessionStorage.getItem("jwt")}`,
            'X-API-key': config.app.api.key,
        },
        body
    });
}

감쪽같이 에러가 사라졌다 ..!

 

✨useFetch와 $fetch의 차이점

[제가 개발한 내용을 바탕으로 기록한 것이기 때문에 틀린내용이 있을 수 있습니다.]

내가 구현한 것은 upload 버튼을 눌렀을 때 file.js에서 common.js를 호출하여 endPoint를 가져와 file을 업로드하는 것이다.

useFetch같은 경우는 마운트되기 전 초기화 단계에서 데이터를 가져올 수 있도록 설계된 함수이다. common.js는 로그인한 사용자의 정보를 가져오기 위해서도 사용되는 파일이기 때문에 useFetch를 사용했는데, 파일 업로드를 할 때 useFetch를 다시 호출하면 충돌이 발생할 수 있어 저렇게 노랭이 에러가 나타나는 것이였다!

그래서 마운트된 이후에도 데이터를 가져오기 위해서는 $fetch를 사용하는 것이 더 적합하다 :)