개발자
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 2 3 4 5<button onClick={async () => { await 첫번째_비동기_함수(); await 두번째_비동기_함수(); navigate("/"); }}>제출하기</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로 해결했습니다ㅠㅠㅠㅠㅠㅠㅠㅠ정말 감사드려요...
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!