4일차 - Javascript 비동기처리

◇ 비동기처리란?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때 까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는

자바스크립트의 특성을 의미한다.

◇ Promise 객체

자바스크립트에서 제공하는, 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다.

정해진 기능을 수행하고 나서 결과에 따라 성공이나 실패에 대한 정보를 리턴한다.

const promise = new Promise((resolve, reject) => {
  console.log("install excutor");
  setTimeout(() => {
    resolve("data");
  }, 1000);
});

 

promise의 3가지 상태

• 대기(Pending): 작업을 아직 완료하지 않음
• 이행(Fulfilled): 작업을 성공적으로 완료함
• 거부(Rejected): 작업이 모종의 이유로 실패

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

◇ fetch

- 기본 골격

fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET
	.then(res => res.json()) 
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바

• .then() 통신요청을 받은 다음 할 명령어
• res => res.json() 받은 데이터를 res라는 변수명을 붙이고 JSON형태로 바꿔 조작
• .then(data => {}) JSON형태로 바뀐 데이터를 data라는 변수로 선언