비동기 자바스크립트

Why Async & Non-blocking

Synchronous 동기적인
Asynchronous 비동기적인

통신 요청이나 오래 걸리는 작업은 비동기로 작동시킬 수 있다.

Callback

//callback 함수로 표현하기
const fetchData = (cb) => {
  setTimeout(()=>{
    cb('Done!');  
  }, 2000) 
};

setTimeout(()=>{
  console.log('Timer is done!');
  fetchData((text)=>{
    console.log(text);
  });
}, 2000);

console.log('first log');
console.log('second log');
//first log
//second log
//Timer is done!
//Done!

//Promise로 표현하기
const fetchData = () => {
  const promise = new Promise((resolve,reject) => {
    setTimeout(()=>{
      resolve('RESOLVED');
    }, 2000)
  });
}

setTimeout(()=>{
  console.log('Timer is done!');
  fetchData()
  .then(res => {
    console.log(res);
    return fetchData();
  })
  .then(res => {
    console.log(res);
  });
}, 2000);
console.log('first log');
console.log('second log');
//first log
//second log
//Timer is done!
//RESOLVED!
//RESOLVED!

Promise

• Promise는 자바스크립트에서 제공하는 객체
• new Promise를 통해 instance를 만든다
• Promise는 resolve와 reject 함수를 인자로 입력받는 콜백함수를 인자로 입력받는다.
• Promise 객체를 리턴하는 함수 내에서 또다른 Promise 객체를 리턴하는 함수를 리턴시키면, 즉 함수 내에서 적절하게 리턴을 활용하면 promise chain을 통해 promise hell을 방지할 수 있다.

const printString = (string)=>{
  return new Promise((resolve,reject)=>{
    setTimeout(
      ()=>{
        console.log(string);
        resolve()
      },
      Math.floor(Math.random()*100)+1
    )
  })
}
const printAll = ()=>{
    printString("A")
    .then(()=>{
      return printString("B") //이 부분을 통해 .then으로 이어서 프로미스 객체를 사용할 수 있다
    })
    .then(()=>{
      return printString("c") //이 부분을 통해 .then으로 이어서 프로미스 객체를 사용할 수 있다
    })
}
printAll();
                     

fetch API

• fetch는 최대 2개의 매개변수를 입력받을 수 있는데, 첫번째 매개변수는 url이고, 두 번째 매개변수는 options(옵션 객체)로 HTTP method, HTTP 요청 헤더(headers), HTTP요청 전문(body)를 설정해줄 수 있다.
• 서버에 요청을 보내면 Response 오브젝트를 포함한 프로미스 객체를 리턴한다.
• fetch의 두 번째 인자는 어떤 메소드를 사용하는지에 따라 작성여부가 달라진다.
  • fetch는 디폴트로 GET 방식으로 작동하고, GET은 서버로부터 데이터를 가져오는 기능만하므로 옵션객체를 작성해줄 필요가 없다.
  • 서버에 데이터를 생성할 경우, 옵션객체에 POST 메소드를 쓰고, headers와 body부분을 작성해준다.(PUT 메소드는 나머지는 모두 동일하고 옵션객체의 메소드를 PUT으로만 바꾸면 된다)
  • 서버에서 데이터를 삭제할 경우, POST와 다르게 보낼 데이터가 없기 때문에 옵션객체에 DELETE 메소드만 작성해주면 된다.

//인자가 1개인 경우 (GET)
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data)); //fetch한 response가 객체형태로 콘솔에 찍힌다. 

//POST
fetch('주소',{
 method: "POST", 
 headers: {
   "Content-Type":"application/json"
 },
 body: JSON.stringify({
   title: "hello"
   body: "hello world",
   userId: 1,
 }),
})
.then(response => response.json())
.then(data => console.log(data)); //추가한 body의 내용이 객체 형태로 콘솔에 찍힌다

//PATCH
fetch('topics/2',{
  method: "PUT",
  headers: {
    "Content-Type":"application/json"
  },
  body: JSON.stringify({
  	title: "hi"
  })
})
.then(response=> response.json())
.then(data => console.log(data)); 
// topics라는 collection의 두 번째 element의 title만 바뀐다 
// body에서 전송하지 않은 데이터는 삭제되지 않는다

//PUT
fetch('topics/2',{
  method:"PUT",
  headers: {
    "Content-Type":"application/json"
  },
  body: JSON.stringify({
    title: "hi"
  })
})
.then(response => response.json())
.then(data => console.log(data));
// topics라는 collection의 두 번째 element의 title만 바뀐다 
// body에서 전송하지 않은 데이터는 삭제된다
  

//DELETE 
fetch('주소',{
  method:"DELETE",
})
.then(response => response.json())
.then(data => console.log(data)); //콘솔에 빈객체 {}가 찍힌다

async await

• promise의 syntactic sugar
• 비동기적으로 동작시킬 함수 앞에 async 키워드를 붙이고, URL로부터 데이터를 모두 fetch 해올때까지 기다린다(await).
• promise, .then을 사용하는 것과 동일하게 비동기적으로 기능하지만, 마치 동기적으로 작동하는 것처럼 코드를 작성할 수 있어 코드 가독성이 높다.

직접 해보기

async, await를 2번 활용하여 /data/latest 의 응답 내용과 /data/weather 응답 내용을 합친 새로운 객체를 리턴시켜라

var newsURL = "http://localhost:5000/data/latestNews";
var weatherURL = "http://localhost:5000/data/weather";

async function getNewsAndWeatherAsync() {
  //fetch API로 주소로부터 뉴스정보를 GET해서 Response를 변수에 담을때까지 기다린다. 
  const news = await fetch(newsURL); 
  //fetch API로 주소로부터 날씨정보를 GET해서 Response를 변수에 담을때까지 기다린다. 
  const weather = await fetch(weatherURL);
  let obj = {};
  
  return news
    .json()
    .then(response => {
          obj.news = response.data
          return weather.json() //json메소드는 프로미스 객체를 리턴한다
    })
    .then(weatherData => { 
          obj.weather = weatherData;
          return obj
    });
}