가져오기로 요청 처리

이번 주에 저는 axios을 사용하는 앱 요청을 Fetch API을 사용하는 것으로 다시 작성해야 했습니다.

그것에 들어가자!

실패할 일이 아니었을까?

try {
    const response = await fetch(`${url}`, requestOptions);
    return await handleResponse(response);
  } catch (error) {
    return Promise.reject(error);
  }

위의 코드를 보면 요청이 404 또는 500과 같은 오류로 응답하면 포착되어 거부될 것이라고 예상할 수 있습니다. 멋지고 깔끔하죠?

아니요. catch는 요청이 완료되지 않은 경우(예: 네트워크 오류)에만 호출됩니다. 요청이 오류를 반환하면 정상적으로 해결되지만 ok는 false로 설정됩니다. (ok는 HTTP 응답의 속성입니다.)

그러면 내 오류를 어떻게 처리합니까?

따라서 API는 일반적으로 다음 패턴을 구현할 수 있습니다. 요청을 시도하고, 성공하면 무언가를 하고, 실패하면 무언가를 하십시오. 오류를 잡아서 기록하십시오.

    try {
         const result = fetch(url);
            // do something after request succeeds
    } catch (e) {
         // log error
                // notify user something went wrong
    }

따라서 이를 염두에 두고 첫 번째 코드 블록에서 가져오기 코드를 살펴보고 요청이 오류를 반환하는 경우 요청이 거부되지 않았기 때문에 catch를 트리거하지 않고 여전히 정상적으로 해결되는지 확인할 수 있습니다. 우리는 이것을 원하지 않고 catch가 트리거되어 오류가 기록되고 사용자에게 문제가 발생했음을 알리기를 원합니다.

처리해

async function handleResponse(response) {
  if (response.status === 204) {
    return Promise.resolve({});
  } else if (response.status >= 200 && response.status < 300) {
    const json = await response.json();
    return Promise.resolve(json);
  } else {
    const error = await response.json();
    return Promise.reject(error);
  }
}

이를 처리하기 위해 handleResponse 함수를 작성했습니다. 이 함수는 가져오기에서 반환된 응답을 받아 상태를 확인합니다. (여기서는 다른 사례를 처리하기 위해 특별히 상태를 확인하고 싶었지만 ok 속성을 확인할 수도 있습니다.)

위의 코드에서 상태 204가 빈 개체로 확인되는 것을 볼 수 있습니다. 이는 204가 No-Content 응답이므로 풀 필요가 없기 때문입니다.

200에서 300 사이의 응답에 대해 우리는 json을 풀고 데이터로 약속을 해결합니다.

그렇지 않으면 json을 해결하고 오류와 함께 약속을 거부합니다. 이 거부는 사가에서 catch를 호출하여 오류를 기록하고 사용자에게 알립니다.

마무리

이 가져오기 논리의 대부분을 캡슐화하는 래퍼 함수를 ​​작성하기로 결정했습니다. 이렇게 하면 동료 개발자가 래핑 해제에 대해 걱정하지 않고 각 요청에 대한 응답을 해결하거나 거부할 필요 없이 쉽게 요청할 수 있습니다.

또 다른 이점은 Authorization 헤더가 한 곳에서 설정되고 항상 각 요청에 첨부된다는 것입니다.

아래는 Typescript의 fetchRequestWrapper입니다. 우리는 여전히 사용자에게 많은 제어권을 부여하지만 응답과 오류가 일관된 방식으로 처리되도록 합니다.

async function handleResponse(response: any) {
  if (response.status === 204) {
    return Promise.resolve({});
  } else if (response.status >= 200 && response.status < 300) {
    const json = await response.json();
    return Promise.resolve(json);
  } else {
    const error = await response.json();
    return Promise.reject(error);
  }
}

interface IFetchRequestOptions {
  method: HTTPMethods;
  data?: any;
  headers?: { [key: string]: string };
}

export const fetchRequest = async (url: string, options?: IFetchRequestOptions) => {
  const authHeader = `Get your auth token`;

  const requestOptions: any = {
    method: options?.method ? options.method : HTTPMethods.GET,
    body: JSON.stringify(options?.data),
    headers: {
      Authorization: authHeader,
      ...options?.headers,
    },
  };

  try {
    const response = await fetch(`${url}`, requestOptions);
    return await handleResponse(response);
  } catch (error) {
    return Promise.reject(error);
  }
};

추가 GOTCHA:

이것들은 내가 잠시 나를 붙잡은 몇 가지 작은 것들입니다.

JSON 게시:

가져오기와 함께 POST를 사용하여 서버에 JSON을 보낼 때 기억해야 할 두 가지 주요 사항이 있습니다.

먼저 Content-Type 헤더를 application/json으로 설정해야 합니다.

headers: { 'Content-Type': 'application/json' }

둘째, 본문에 전달하는 데이터는 JSON.stringify로 래핑해야 합니다.

body: JSON.stringify(data)

데이터 업로드 중:

일부 요청에는 사용자가 파일을 업로드해야 합니다. Content-Type 헤더를 내가 필요하다고 생각한 multi-part/form-data로 설정했는데도 요청이 계속 실패했기 때문에 몇 시간 동안 당황했습니다.

운 좋게도 문제를 해결하는 데 도움이 된 this post를 우연히 발견했습니다. 주요 학습은 데이터를 업로드할 때 Content-Type 헤더를 설정하지 않으면 브라우저가 자동으로 이를 수행하고 업로드에 필요한 웹 경계를 추가한다는 것입니다.

추가 팁: TypeScript를 사용하는 경우 본문이 FormData 유형인지 확인하십시오.

래퍼에서 다른 기능을 분리하고 기본 가져오기 요청을 어지럽히지 않도록 업로드를 처리하는 별도의 기능을 추가하는 것이 더 깔끔할 것이라고 결정했습니다. 다음은 Typescript의 가져오기 업로드 기능입니다. 여기에서 요청 옵션에 대한 인터페이스가 훨씬 더 엄격하고 방법이 항상 POST임을 알 수 있습니다.

interface IFetchRequestUploadOptions {
  data: FormData;
}

export const fetchRequestUpload = async (url: string, options: IFetchRequestUploadOptions) => {
  const authHeader = `Get your auth token`;

  const requestOptions: any = {
    method: HTTPMethods.POST,
    body: options.data,
    headers: {
      Authorization: authHeader,
    },
  };

  try {
    const response = await fetch(`$url}`, requestOptions);
    return await getResponse(response);
  } catch (error) {
    return Promise.reject(error);
  }
};

그리고 그것이 페치와 함께한 나의 여정이었습니다. 읽어 주셔서 감사합니다! 마음에 드셨다면 좋아요와 공유 부탁드립니다! 이것이 여러분의 코딩 여정에 도움이 되기를 바랍니다!