가져오기를 사용하여 웹 요청 만들기

페치란 무엇입니까?

Fetch 메서드는 웹에서 리소스에 액세스하고 조작할 수 있는 인터페이스를 제공합니다.

데이터를 가져오려는 리소스에 대한 URL만 필요하므로 기본 가져오기는 매우 간단합니다.
예시fetch("https://fakestoreapi.com/products")가져오기 메소드는 다음 질문으로 이어지는 약속을 반환합니다.
약속이란 무엇입니까?

Promise는 요청이 처리되고 있으며 곧 응답을 받을 것이라는 보증입니다. 가져오기 요청이 완료되면 응답 개체로 약속이 해결됩니다.
JavaScript 약속 객체는 다음과 같을 수 있습니다.

대기 중

이행됨

거부됨

약속 개체는 상태와 결과의 두 가지 상태를 지원합니다.
이것은 다음과 같이 증명될 수 있습니다.
약속.상태 약속.결과
"보류 중"정의되지 않음
결과 값 "이행"
오류 개체를 "거부"

응답 읽기

fetch()가 완료되면 객체가 응답으로 반환됩니다. 개체는 json, 텍스트와 같은 몇 가지 방법으로 읽을 수 있습니다.
요청을 완료한 후 응답 개체를 특정 형식으로 변환하도록 JavaScript에 알리기 위해 .then 메서드를 연결합니다.
예시

fetch("url")
.then(response =>response.json())
.then(data => console.log(data))

응답의 상태 코드

응답 개체는 요청이 성공하면 상태 코드 200과 ok의 상태 텍스트를 제공하고 오류가 발생하거나 요청된 리소스가 존재하지 않는 경우 404를 제공합니다.
예시

function fetchText() {
    fetch("url")
    .then(response => console.log(response.status) // 200
    if (response.status === 200) {
        .then(response => response.json)
    }
}

fetchText();

다른 유형의 상태 코드가 있습니다.
500-요청된 URL에서 서버 오류가 발생하면 발생합니다.
300-309-요청된 URL이 응답과 함께 새 페이지로 리디렉션될 때 발생합니다.

일반적인 동작은 GET입니다. 다음과 같이 가져오기 개체에 개체를 추가하여 이를 재정의할 수 있습니다.fetch("url",object)개체 내부는 특정 속성이 정의되는 곳입니다.

속성

방법
GET,POST,PATCH,DELETE와 같은 요청 방법.

헤더
요청에 헤더를 추가하려는 경우.
헤더 개체 내에 포함되어 있습니다.
예시

Content-Type 및 Accept는 요청 본문 및 출력의 콘텐츠 유형을 지정합니다. json 파일의 경우 application/json일 수 있습니다.

API 호출 목록에서 페이지 매김을 범위 제어합니다

.

압축. 응답의 데이터를 압축하는 데 사용되며 Accept-Encoding 헤더를 설정하여 수행됩니다

.

신체
여기에서 개체 형식으로 보내려는 모든 것을 전달한 다음 JSON.stringify 메서드를 사용하여 개체를 웹을 통해 보낼 수 있도록 개체를 문자열 형식으로 변환합니다. 본문의 콘텐츠가 전달된 URL에 도착하면 다시 객체로 변환됩니다.

잡다
catch()라는 함수를 추가합니다. 이를 통해 fetch() 요청에서 무언가 잘못되었을 때 오류를 "처리"하는 코드를 작성할 수 있습니다.

예시

const name = { username: 'example' };

//POST request with body equal on data in JSON format
fetch('https://example.com/profile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(name),
})
.then((response) => response.json())
//Then with the data from the response in JSON...
.then((data) => {
  console.log('Success:', data);
})
//Then with the error genereted...
.catch((error) => {
  console.error('Error:', error);
});