fetch 방법의 기본적인 사용 방법 [조회 매개 변수와 요청 주체의 차이 사용]

JavaScript로 외부에서 JSON 데이터를 가져올 때fetchAPI를 사용합니다.나는 이런fetch 방법을 알고 싶은 사람이 아직 매우 적기 때문에 이 보도에서

fetch의 사용 방법

조회 매개 변수의 추가 방법

조회 매개 변수와 요청 매개 변수의 구분

내가 이 일들을 설명할게.

fetch는 부식의 일종?

우선fetch가 무엇인지 외부 자원을 얻기 위한 방법이다.이 방법을 사용하면 웹 API의 JSON 데이터 등을 얻을 수 있습니다.
첫 번째 매개 변수는 가져올 리소스의 경로(URL)를 지정합니다.두 번째 파라미터는 요구에 적응하고자 하는 설정 대상을 임의로 전달할 수 있다.이렇게 하면 POST와 GET 등의 방법과 요구 사항에 추가하고자 하는 본문의 바디를 설정할 수 있다.
그런 다음 반환 값은 Promise로 돌아갑니다.따라서 웹 API 등에서 반환된 데이터를 가져오는 두 가지 방법이 있습니다.

then

async/await

then

() => {
  const url = "http://localhost:3000/api/user";
  const params = {method : "POST", body : JSON.stringify({id : "123", name:"しゅう"})};
  fetch(url, params)
    .then(response => response.json())
    .then(data => console.log(data));
}

async/await

async () {
  const url = "http://localhost:3000/api/user";
  const params = {method : "POST", body : JSON.stringify({id : "123", name:"しゅう"})};

  const response = await fetch(url, params);
  const data = await response.json();
  console.log(data);
}

가독성을 높이고 싶은 분들은 async/await를 추천합니다.

질의를 추가하려면

질의 매개변수를 추가하려면 URLSearchParams를 사용합니다.URLSearchParams는 Lenovo 정렬에 따라 질의 매개변수를 만드는 API입니다.

const params = {q : "嫌われる勇気"};
const query = new URLSearchParams(params);

//「https://www.googleapis.com/books/v1/volumes?q=嫌われる勇気」にアクセス
const response = await fetch (`https://www.googleapis.com/books/v1/volumes?${query}`);
const data = await response.json();
console.log(data);

요청 매개 변수와 요청 주체의 구분 사용

웹 API 작업 매개 변수를 사용할 때 두 가지 방법이 나타납니다.

조회 매개 변수

요청주체

다음은 이러한 용법을 어느 장소에서 사용하는지에 대해 설명한다.

1. 질의 매개변수를 사용하는 경우

조회 파라미터를 사용하는 것은 목록 데이터를 가져오는 장면입니다.따라서 REST의 사상을 바탕으로 GET 방법이 주요 방법이 되었다.

검색

정렬

호출

검색 처리

const params = {q : "嫌われる勇気"};
const query = new URLSearchParams(params);

const response = await fetch (`https://www.googleapis.com/books/v1/volumes?${query}`);
const data = await response.json();

2. 바디 요구사항 사용 시

자원 업데이트와 제작에 주체를 요청합니다.따라서 질의와 달리 PUT 방법 및 POST 방법이 적용됩니다.그나저나 HTTP 방법이 GET라면 요구되는 몸을 사용할 수 없기 때문에 주의가 필요하다.

데이터 제작

데이터 업데이트

등록 처리

  const url = "http://localhost:3000/api/user";
  const params = {method : "POST", body : JSON.stringify({id : "123", name:"しゅう"})};

  const response = await fetch(url, params);
  const data = await response.json();

총결산

fetch 외부 자원을 얻기 위한 API

fetch 방법의 반환값은Promise형이기 때문에then 또는 async/await

을 사용합니다

HTTP 메서드가 GET인 경우 질의 매개변수를 사용하고 그 외에 요청 바디를 사용합니다.

참고 자료

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams
https://qiita.com/sakuraya/items/6f1030279a747bcce648