TIL 10일차 + fetch(), Promise.all()

fetch API 

■ Fetch API는 HTTP 파이프라인을 구성한느 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는
   인터페이스를 제공합니다.

■ Fetch API가 제공하는 전역 fetch()메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.

■ 서비스 워커에서도 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제입니다. 

■ CORS를 포함한 고급 개념을 HTTP확장으로 정의합니다.

 

 

fetch()

■ fetch()는 첫번째 인자로 URL을 받고, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다.

■ Promise타입의 객체를 반환하기 때문에 API호출이 성공하면 응답객체(response)를 resolve하고,
   실패했을 경우에는 예외(error)객체를 reject합니다.

■ 기본값은 GET방식이고 GET방식은 요청 전문을 받지 않기 떄문에 옵션인자도 필요없습니다.

■ 대부분의 REST API들은 JSON형태의 데이터를 응답하기 때문에 응답객체는 json()메서드를 제공합니다.

 

 

형식

// 기본적인 리소스 취득 요청 방법
async function logJSONData() {
  const response = await fetch(URL, Option); //가져오고자 하는 리소스의 경로로 하나의 인수만 받음, 설정하는 옵션
  const jsonData = await response.json(); // 응답은 Response객체이지만, Json응답 본문을 바로 반환하지 않음
  console.log(jsonData);
}

/* --------------------------------------------------------- */

// fetch()사용 형식
fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

 

옵션객체(option) 객체 설정 종류
■ HTTP방식(method)   ■ HTTP요청헤더(headers)   ■ HTTP요청전문(body)

응답객체(response) 읽어 오는 종류
 ■ HTTP응답상태(status)  ■ HTTP응답헤더(headers)   ■ HTTP응답전문(body) 

 

 

 

 

Promise.all()

 ■ 복수의 URL에 동시에 요청을 보내고, 다운로드가 완료된 후에 콘텐츠를 처리할때 사용할 수 있습니다. 

 ■ 요소 전체가 Promise인 배열(깊게 들어가면 이터러블 객체)을 받고 새로운 Promise를 반환합니다.

 ■ 배열 안 Promise가 모두 처리되면 새로운 Promise가 이행되는데, 배열 안 Promise의 결괏값을 담은 배열이 새로운 Promise의 result가 됩니다.

 ■ 배열의 요소 순서는 Promise.all()에 전달되는 Promise 순서와 상응합니다. 그렇기 때문에 첫번째 Promise가 가장 늦게 실행되어도 배열의 첫번째 요소에 저장됩니다 

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert); 
// 프라미스 전체가 처리되면 1, 2, 3이 반환됩니다. 각 프라미스는 배열을 구성하는 요소가 됩니다.

■ 작업해야할 데이터가 담긴 배열을 프라미스 배열로 매핑하고, 이 배열을 Promise.all로 감쌀수도 있습니다.

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/Violet-Bora-Lee',
  'https://api.github.com/users/jeresig'
];

// fetch를 사용해 url을 프라미스로 매핑합니다.
let requests = urls.map(url => fetch(url));

// Promise.all은 모든 작업이 이행될 때까지 기다립니다.
Promise.all(requests)
  .then(responses => responses.forEach(
    response => alert(`${response.url}: ${response.status}`)
  ));

■ 주의 할점
   - Promise.all에 전달되는 프라미스 중 하나라도 거부되면,
     Promise.all이 반환하는 Promise는 에러와 함께 바로 거부됩니다.
     거부에러는 Promise.all 전체의 결과가 됩니다. 

 

 

활용

저는 두개의 URL을 사용할 것이고 동시에 정보를 받아서 처리해야 하기 때문에 비동기 처리를 하기 위해서 사용을 해봤습니다.

 

기본적으로 fetch()함수는 단일 URL을 처리하는데 사용하므로 Promise.all()과 함께 사용하기 위해 

여러 URL에 대해 병렬로 호출하여 데이터를 모아오는 목적으로 사용하기 위한 함수 표현식을 만들었습니다.

const fetchData = async (urls) => {
    const response = await fetch(urls, options);
    const data = await response.json();
    return data;
};

 

그 후 fetchData함수에서 여러 URL을 호출하고 Promise.all()은 이러한 Promise들이 모두 완료될 때까지 기다립니다.

완료가 다 되면 .then블록에서는 각 URL에 대한 데이터를 담고있는  response(응답객체)를 받아 필요한 작업을 하게 됩니다.

Promise.all(urls.map(url => fetchData(url)))
    .then(dataArray => {
    // 응답 객체를 이용하여 필요한 작업 하는 블럭
    })
    .catch(error => {
        console.error('Error during fetch:', error);
    });

 

 

작업중 나온 에러

for문을 돌리는 와중에 배열을 전역변수를 가져와 저장하는 코드를 만들었습니다.

totmovieCards = movieCards.map(div => div);

총 2번을 for문안에서 반복하면서 도는데 1번째 사이클에서 도는 배열은 2번째 들어오는 배열들로 교체가 되어서

항상  2번째의 배열들만 들어오게 되는 상황이 일어났습니다.

그래서 단순하게 "그러면 중첩으로 들어올수 있게 다 더해주면되겠다"라는(반복학습 부족의 결과) 생각을 하면서

totmovieCards += movieCards.map(div => div);

+ 연산자를 붙이게 되었습니다.

+연산자는 배열도 문자열 형태로 변환하여 문자열로 만들어 주는걸 간과하고 결국 모든 것들이 문자열로 결합되는 상황이 발생되었습니다.

 

여기서 공부의 중요성을 한번 더 깨닫고 배열의 메서드들을 찾다가 push와 전개 연산자인 ...표현 방법이 있다는걸 깨달았습니다.

push - 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하는 메서드

전개연산자 - 명시적으로 할당되지 않은 나머지 배열 값들을 사용

이 두가지 문법을 사용하여

totmovieCards.push(...movieCards);

배열값들을 잘 넘길 수 있게 되었고 정보를 올바르게 전달할 수 있게 되었습니다. 

 

정리를 열심히 하면 기억에 오래 남을거라고 생각했는데 정리에서 끝나는게 아닌 계속 반복해서 찾아보고

사용해야 비로소 남는다는걸 느꼇습니다..

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊