AbortController

fetch 요청 보낸 후, 요청 중단 버튼 클릭시 abort() 실행하기

해도해도 안됐는데 요청마다 새로운 controller를 생성해야했다 ㅋ

자바스크립트 메소드지만 controller를 state로 관리해서 react에서만 참고할 수 있겠다

• MyComponent.js

const [controller, setController] = useState(new AbortController());

const fetchData = () => {

	const abortController = new AbortController();
    setController(abortController); // 요청마다 controller 생성하기
    .
    .
    .
    fetchInstance(url, formData, abortController)
    .then((res)=>{
    	if(resjson==='AbortError') {
        	// 에러처리
        }
    })
    .
    .
    .
    
}

• commonFunctions.js

export const fetchInstance = async (url, formData, controller, timeout=1000000) => {

  const config = {
    method: 'POST',
    headers: {
      "Content-Type": "application/json",
      "accept": "application/json",
      "Access-Control-Allow-Origin":"*",
    },
    body: JSON.stringify(formData),
    signal: controller.signal
  };
  try {
    const response = await fetch(url, config);


    if (!response.ok) {
      throw new Error('Network response was not ok');//no response
    }

    // response를 받은 후에도 controller.abort()를 호출하여 확실하게 통신을 중단합니다.

    const result = await response.json();
    return result;

  } catch (error) {
    if (error.name === 'AbortError') {
      return error.name
    }
    return error; // 또는 오류 처리에 맞게 수정
  }
};