javascript 과 Promise 와 async await

원본 코드 (callback 지옥에 빠질랑 말랑)

url의 json 데이터와 json 중 title 데이터를 비동기적으로 출력시키는 code

1초 후 json 출력

그로부터 2초 후 json.title 출력

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then( (json)=> {
    setTimeout(() => {
      console.log(json);
      setTimeout( () => {
        console.log(json.title);
      },2000);
    },1000);
  })

 콜백 함수 분리와 then 사용 

Promise를 사용해보자

const delay = (data,ms) =>new Promise((resolve) => setTimeout(()=> resolve(data),ms));

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then((json)=> delay(json,1000))
  .then( json => { 
    console.log(json)
    return json;
  })
  .then( (json)=> delay(json,2000))
  .then( (result) => console.log(result.title)))

함수의 흐름을 한눈에 파악 가능 

 

 

 

async await 

초기작(실패)

(async function() {
    const res = await fecth('https://jsonplaceholder.typicode.com/todos/1')
const jsondata = await res.json();
console.log(delay(1000,jsondata));
console.log(delay(2000,jsondata.title))})();

async 함수명 없음

delay 인자 값 순서 틀림

 

async function run() {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    
	const jsondata = await res.json();
	await delay('',1000);
	console.log(jsondata);
    
	await delay('',2000);
	return jsondata; 
 }

run().then((res)=>{ console.log(res.title);});

---

 

 

javascript 에서 aysnc 와 await 사용 시 주의할 점 

async fuction {
 await funcA();
 funcB();
 
}

funcA() 와 funcB()가 어떤 연결도 되어있지 않다면 

funcB()는 A가 처리될 때까지 blocking 될 수도 있으므로 주의

 

 

 

 

---

중첩된 setTimeout -> await async 이용하기

setTimeout(()=>{
	funcA()
    
    setTimeout(()=>{
    	funcB()
    },1000);
  
},2000);  

 

↓

const delay = (data,ms) =>new Promise((resolve) => setTimeout(()=> resolve(data),ms));

await delay(1000);
funcA();

await delay(1000);
funcB();

 

 

중첩된 setTimeout은 callback 지옥에 빠지기 쉽다.

차라리 나만의 delay함수를 만들어 await/async 처리를 하던지,

promise.then 기능을 쓰는게 나음