JavaScript onload, fetch, promise (feat.과제)

 

21.01.29(+21.02.01)

 

1. onload

const domArrayLike = document.getElementsByClassName("root");

const root = domArrayLike[0];

위의 두 줄의 코드를 작성한 후 root를 alert했을 때 undefined가 나왔다.

이유는 head에 script를 추가했기 때문이다.

문서파일보다 script가 먼저 load되었고, 그 상태에서 DOM에 접근했기 때문에 root가 undefined였던 것이다.

이것을 해결하려면 document.onload 메소드를 써주어야 해결 가능하다.

onload 메소드는 DOM트리 분석 후 모든 자원을 다 받고, 렌더링까지 완료된 후에 load하게 한다.

 

2. fetch()

    Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것을 가능하게 해준다.

ajax를 구현하는 방법

비동기식으로 동작한다.
    쿠키를 보내거나 받지 않는다.
    성공적인 fetch() 를 체크하는 정확한 방법은 promise 객체가  해결되었는지를 체크하는 것을 포함한다
    첫번째 인자는 url, 두번째 인자는 옵션 객체이며 Promise타입 객체를 반환한다.
    반환된 객체는 API 호출이 성공했을경우 response객체를 resolve한다.
    실패했을 경우 error객체를 reject한다.

fetch의 respoonse와 error

 

3. document.querySelector()

인자를 선택자로 받아 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 요소를 반환합니다.

 

4. Promise

fectch함수가 반환하는 Promise란 왜 필요하고 어떤 일을 하는가?

Promise는 비동기처리의 단점을 보완하기 위해 만들어졌다.

서버에서 데이터를 요청한 후 그 데이터를 화면에 띄우고 싶을 때, 요청한 데이터가

전달되지도 않았는데도 화면에 데이터를 띄우는 코드가 실행되는 경우가 있다. 이때 우리는 callback함수를

사용해야하는데, 이 callback함수 역할을 해주는 것이 Promise이다.

 

프로미스의 3가지 상태

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

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

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

 

 

--------------------문제점---------------------

1. innerHTML 또는 createTestNode를 사용했을 때 줄바꿈이 안된다.

해결 : innerText를 사용했더니 해결되었다. 그러나 알 수 없는 자동 줄바꿈때문에

그냥 innerHTML에 <br>을 썼다. \n만 안먹힌거였다.