fetch()의 두 번째 매개변수

우리는 수업시간에 함수를 사용하려고 할 때 fetch()웹사이트의 API에서 데이터를 가져오기 위해 함수를 사용하는 경향이 있습니다.

https://reqres.in/개발자가 코드를 테스트할 수 있도록 API를 제공하는 웹 사이트입니다. 개발자는 다양한 HTTP 메서드를 테스트하고 실제 응답을 얻을 수 있지만 데이터는 가짜입니다(REQRES, 2023). 이 웹 사이트를 사용하여 코드를 여러 번 테스트합니다.

예를 들어, 우리는 사용자의 이름을 알기 위해 가짜 데이터를 얻을 수 있습니다.https://reqres.in/. fetch()_

Test fetch() to Get data 버튼을 클릭하면 가져오기가 '에서 데이터 가져오기를 시도합니다.https://reqres.in/api/users/2'GET 방식으로 아래에 "Janet"이 추가된 것을 볼 수 있습니다.

그러나 가져오기는 데이터를 가져오는 데만 사용할 수 있는 것은 아닙니다. 가져오기 기능으로 수행하려는 작업을 사용자 정의할 수 있는 두 번째 매개변수가 있습니다.

선택 사항 이므로 완전히 무시할 수 있으며 이전과 마찬가지로 여전히 데이터를 가져옵니다.

두 번째 매개변수는 객체 여야 합니다 . 그리고 이 개체 안에는 본문, 헤더, 방법 등 여러 하위 매개변수를 포함할 수 있습니다(MDN, 2023).

예가 있습니다.

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

어떻게 사용합니까?

이 예에서 사용자가 게시 테스트 버튼을 클릭하면 앱에서 사용자의 이름과 작업을 서버에 게시합니다. 그리고 사용자에게 생성 시간을 알려주는 타임스탬프가 아래에 표시됩니다.

.catch((오류) =>{})

우리 모두 알다시피, fetch() 함수는 를 반환합니다 a Promise Object. 그러나 서버가 응답하지 않고 약속이 이행되지 않으면 어떻게 될까요?

오류가 발생합니다!

catch((error) => {})따라서 충돌을 피하기 위해 오류를 포착하는 데 사용해야 합니다 .

예제 코드를 보자.

이 예에서는 '우연히' 잘못된 링크를 얻었습니다. 따라서 약속이 이행되지 않고 오류가 발생합니다. 따라서 사용자가 Test Post 버튼을 클릭하면 콘솔에 'Error!!!'가 출력됩니다.

Response 개체의 추가 사용

오류가 발생하여 Promise Object가 이행되지 않는 상황에 대해 논의했습니다. 그러나 에서 반환한 약속 객체가 이행되면 Response 객체를fetch() 반환합니다 .

몇 가지 인스턴스 속성이 있습니다(MDN, 2023).

• 응답.ok
• 응답.상태
• 응답.상태 텍스트
• 응답.url
• …

Response.statusHTTP 상태 코드를 반환하는 와 부울 값을Response.ok 반환하는 를 사용하여 가져오기가 성공했는지 확인할 수 있습니다.

이 예에서 사용자가 Test Post 버튼을 클릭하면 성공 여부를 확인하기 위한 HTTP 상태 코드와 부울 값이 표시됩니다.

가져오기 중단

사용자는 를 사용하여 가져오기를 중단할 수도 있습니다 AbortController Object.

별도로 생성해야 합니다 AbortController Object.

let controller = new AbortController();

따라서 새로운 두 번째 매개변수는 다음과 같습니다.

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

abort()를 수행할 간격을 설정했습니다. 따라서 먼저 중단을 클릭하면 Test Post가 콘솔에 AbortError를 발생시킵니다. 그리고 HTTP 상태와 코드는 이전처럼 Test Post 버튼 아래에 표시되지 않습니다.

참조

MDN. (2023). Fetch() — 웹 API: MDN. 웹 API | MDN. 2023년 3월 31일에 검색함https://developer.mozilla.org/en-US/docs/Web/API/fetch

요구사항 (2023). Ajax 요청에 응답할 준비가 된 호스팅된 rest-API입니다. 요구사항 2023년 3월 31일에 검색함https://reqres.in/

MDN. (2023). 응답 — 웹 API: MDN. 웹 API | MDN. 2023년 3월 31일에 검색함https://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller — 웹 API: MDN. 웹 API | MDN. 2023년 3월 31일에 검색함https://developer.mozilla.org/en-US/docs/Web/API/AbortController