2. Fetch API & CORS

키워드

• Fetch API란

• Promise

• ReadableStream

• Unicode

• CORS란

Fetch API

네트워크를 통해서 리소스를 가져올 수 있는 인터페이스

fetch()

• Promise를 반환

• 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받음

• API 호출이 성공했을 때는 response 객체를 resolve

• 실패했을 때는 예외(error) 객체를 reject

• 옵션을 통해 HTTP Method, 요청 헤더, 요청 body 등을 설정 가능

• response 객체는 HTTP 응답상태(status), header, body등을 읽어올 수 있음

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

Promise

• 자바스크립트 비동기 처리에 사용되는 객체

• 자바스크립트는 특정코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행

• 서버에 요청을 보내고 응답을 받기 전에 데이터를 표시하려고 하면 오류가 발생

• 응답을 받은 뒤에 다음 명령을 수행하려면 콜백함수를 사용할 수 있는데, 프로미스는 콜백이 중첩되어 코드가 읽기 어려워지는 걸 예방할 수 있음

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

프로미스의 세가지 상태

• Pending(대기) : 비동기 처리 로직이 완료되지 않은 상태

• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

new Promise() 메서드를 호출하면 Pending 상태가 됨

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve와 reject

resolve를 실행하면 Fulfilled 상태가 됨

이행(완료)상태가 되면 then()을 이용해서 처리 결과 값을 받을 수 있음

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

reject를 실행하면 Reject 상태가 됨

실패상태가 되면 Error를 catch()로 받을 수 있음

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

GET 방식 호출하기

fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
  console.log(response)
);

// 결과
Response {status: 200, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts/1", …}

대부분의 REST API는 JSON 형태의 데이터를 응답하기 때문에 response 객체는 json() 메서드 제공

응답 객체로부터 JSON 포맷의 응답 전문을 자바스크립트 객체로 변환하여 얻을 수 있음

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}

POST 호출

method 옵션을 POST로 지정, headers 옵션으로 JSON 포맷을 사용한다고 알려주고, 요청 전문을 JSON 포맷으로 직렬화하여 body 옵션에 설정

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
}).then((response) => console.log(response));

// 결과
Response {type: "cors", url: "https://jsonplaceholder.typicode.com/posts", redirected: false, status: 201, ok: true, …}

마찬가지로 response.json() 호출하면 응답 전문을 객체로 얻을 수 있음

{title: "Test", body: "I am testing!", userId: 1, id: 101}

json() 메소드 없이 response 읽어오기

fetch('http://localhost:3000/products');
// → Promise

await fetch('http://localhost:3000/products');
// → Response

const response = await fetch('http://localhost:3000/products');
// → response.body는 ReadableStream

const reader = response.body.getReader();

const chunk = await reader.read();
// → chunk.value는 Uint8Array 타입.
// → 원래는 chunk.done이 true일 때까지 반복해야 한다.

const body = new TextDecoder().decode(chunk.value);

const data = JSON.parse(body);

response.body()는 ReadableStream

• ReadableStream은 바이트 데이터를 읽을 수 있는 스트림 제공

• ReadableStream.getReader() : Reader를 만들고 스트림을 Reader에 고정. 스트림이 고정되어 있는 동안에는 다른 Reader를 얻을 수 없음

읽어온 값은 byte array -> 디코딩해서 읽음 -> json.parse()로 객체로 만들기

CORS

동일 출처 정책(Same Origin Policy)

• 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안방식

• 두 URL의 프로토콜, 포트, 호스트가 모두 같아야 함

• 웹 브라우저는 Same Origin Policy에 따라 웹 페이지와 리소스를 요청한 곳(서버)이 서로 다른 서버일 때 서버에서 얻은 결과를 사용할 수 없게 막음

• 이 때 서버에 요청하고 응답을 받아오는 건 진행된 상태이지만 사용할 수 없게 됨

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

• 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

• REST API 서버에서 Headers에 Access-Control-Allow-Origin 속성을 추가하면 됨

• Express에서는 CORS 미들웨어를 설치하면 됨