개발자
React 버튼 클릭 시 api 호출 후 페이지 이동하면 api호출이 취소됩니다..
제목 그대로 버튼 클릭 시 onClick함수에 react-query로 axios api 통신하는 함수 2개를 호출 후 페이지를 이동하는데 페이지가 이동하면서 api 호출이 취소됩니다.. 비동기라 그런것인지 통신 후 페이지가 이동되게 할 수는 없을까요?
답변 1
인기 답변
안녕하세요 :) API 호출이 끝나기 전에 페이지 이동이 이루어지면서, 호출이 취소되는 경우라면 API 호출이 끝난 후 페이지 이동을 하도록 변경해주면 될 것 같아요. (하단에 예제 코드 참고) 코드가 동작하는 것을 확인하시는 편이 이해하기 쉬우실 것 같아, 아래 주소에 동작을 확인할 수 있도록 코드를 작성해놓았습니다. (Form 페이지에서 "제출하기" 버튼을 누르면, 비동기 함수가 하나씩 수행되면서 완료되기를 기다리고, 완료된 후 navigate 함수를 통해 다른 페이지로 이동합니다.) https://codesandbox.io/s/route-after-api-call-end-wtpt72 보시고, 이해 안되는 부분이 있으시다면 댓글로 알려주세요 ㅎㅎ
1<button onClick={async () => {
2 await 첫번째_비동기_함수();
3 await 두번째_비동기_함수();
4 navigate("/");
5}}>제출하기</button>구수정
작성자
Full-Stack Developer • 2023년 10월 05일
const handleFinishButton = async () => { mutate('N'); mutate_2(); alert('완료되었습니다.'); location.replace('/'); }; 해당 코드인데 저 mutate가 react-query의 useMutation의 mutate 비동기 함수라 차례대로 진행될 줄 알았는데..mutate가 진행되고 있는데 location.replace가 일어나더라구요ㅠ
김병훈
Software Engineer • 2023년 10월 05일
useMutation이라면 mutateAsync라는 함수가 따로 있어서, 그걸 사용하시면 될 것 같아요. 참고: https://tanstack.com/query/v4/docs/react/reference/useMutation 그리고, async 로 선언한 함수 내에서 다른 비동기 작업을 기다리도록 하려면 await을 붙여주어야 합니다. 참고: https://ko.javascript.info/async-await const handleFinishButton = async () => { await mutateAsync('N'); await mutateAsync_2(); alert('완료되었습니다.'); location.replace('/'); }
구수정
작성자
Full-Stack Developer • 2023년 10월 05일
mutateAsync로 해결했습니다ㅠㅠㅠㅠㅠㅠㅠㅠ정말 감사드려요...
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 05일
이 문제는 페이지 이동으로 인해 작업 중인 비동기 작업이 중단되는 것으로 보이며, React Component가 Unmount되면서 발생하는 사례입니다. 방법으로는 주로 다음 두 가지가 있습니다. 1. "wait for data": API 호출의 응답을 기다린 후에 페이지 이동을 합니다. async/await 패턴을 사용할 수 있습니다. ```jsx const myFunction = async () => { await axios.post('API_CALL_1'); await axios.post('API_CALL_2'); // Then navigate navigate('/nextPage') } ``` 위 코드에서, 첫 번째 API 호출이 완료 될 때까지 대기하며, 그 후 두 번째 API 호출을 하고, 마지막으로 페이지 이동합니다. 2. "Ignore the abort (but handle thrown errors)": try/catch 블록을 사용하여 연산 결과에 상관 없이 페이지를 이동합니다. 오류가 발생하더라도 캐치해서 처리하면 API 호출 취소로 인한 문제를 방지할 수 있습니다. ```jsx const myFunction = async () => { try{ axios.post('API_CALL_1'); axios.post('API_CALL_2'); }catch(error){ console.error(error); } // Then navigate navigate('/nextPage') } ``` 하지만 이럴 경우 API 응답 결과에 따라 조치를 취해야 할 경우 잘못된 접근방식일 수 있습니다. 따라서 어떤 방법을 사용할 지는 개발 상황과 요구사항에 따라 결정해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!