setTimeout을 호출하면 일어나는 일

• setTimeout이 콜스택에 담겨서 실행이 되면 10초를 세고 콜백함수가 이벤트큐에 들어가고 콜스택이 비어있는지 이벤트루프가 확인해서 없으면 넣어준다.

addEventListner

위와 똑같음.

• promise는 윈도우 스펙임. 자바스크립트 아님!

Ajax

• Asynchronous JavaScript And XML
• 비동기 통신
• XML이라는 포멧으로 예전에는 주고 받았음
• 예전에 주소가 변경되면 html을 통째로 줌
• XML을 줘서 부분적으로만 변경할 수 있게 했음
• 요새는 JSON을 씀. 객체 형태라서 파싱하기 쉬움.
• 비동기 통신이 너무 많아지면 콜백 지옥이 생김. 이때 Promise 를 도입하게 된다.
• Promise를 API 에 도입한 것이 fetch 이다.
• async 타입도 Promise 를 반환한다. 그래서 프로미스가 중요하다~

XML

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

fetch

• fetch(url).then(cb).then(cb2)
• fetch는 XHR 과 비슷하게 네트워크 요청을 해주는 것
• XHR과 다른 점은 promise를 반환하는 것
• promise를 반환해서 콜백헬을 해결함
• 크롬 42 이전에는 서비스 워커 영역에서 작동하고 이후부터는 윈도우 스코프에서 작동
• fetch() 로 반환되는 것은 Stream object.
• stream을 읽는 것도 promise임
• Response object 안에 header, status, statusText, type, url 등 여러 프로퍼티가 들어있음

fetch('./api/some.json')
    .then(
    function(response) {
        if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
            response.status);
        return;
        }

        // Examine the text in the response
        response.json().then(function(data) {
        console.log(data);
        });
    }
    )
    .catch(function(err) {
    console.log('Fetch Error :-S', err);
    });

Response Types

• basic, cors, opaque

• 위 타입들은 응답을 어떻게 대해야 하는지 알려준다.

• basic: 제한 없음

• cors: 다른 origin에서 리소스가 만들어졌을 때 cors header를 반환. Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma 등을 보는 것을 제한함

• opaque: cors 헤더를 리턴하지 않는 다른 origin 의 리소스를 위해 만들어진 응답. 요청 성공 여부를 확인할 수 없음.

• same-origin은 적절한 cors 헤더를 리턴하는 같은 origin의 에셋들에서 온 요청들만 허용함.

• cors는 cors 헤더를 제대로 리턴하는 경우 다른 origin 도 허용

• cors-with-forced-preflight는 요청 전에 항상 preflight check를 한다

• no-cors는 다른 origin 에게는 opaque 응답을 준다. 현재 윈도우 글로벌 스코프에서는 사용할 수 없다.

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

Chaining Promise

• status에서 프로미스 반환
• json에서 프로미스 반환
• 위 각각의 로직에서 발생한 에러는 catch 에서 처리가 된다.

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

catch

Promise 내부에서 명시적으로 거부(rejected) 상태가 되는 경우:
Promise.reject('Error message');

Promise 내부에서 발생한 오류를 명시적으로 던지는 경우:
throw new Error('Error message');

Promise 체인 내부에서 발생한 오류가 처리되지 않은 경우:
new Promise((resolve, reject) => {
  // 이렇게 처리되지 않은 오류가 발생하면, 자동으로 거부(rejected) 상태가 됩니다.
  nonExistentFunction();
});

then 블록에서 발생한 오류:
somePromise
  .then((data) => {
    throw new Error('Error in then');
  })
  .catch((error) => {
    console.error('Caught error:', error.message);
  });