javaScript - 비동기 함수 동기식으로 실행하기(Promise와 async)

1. promise

function test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('성공');
    }, 2000);
    //reject('error');
  });  
};


test().then((response) => {
  console.log(response);	// 성공
});

promise 기본형으로 프로미스 객체를 리턴합니다. 

test().then(...) 과 같이 함수 호출 후 then() 절에 호출 이후의 행위를 기술하면 됩니다. 

then(response)에서 response 파라미터로 test 함수의 반환 값(response)을 받을 수 있습니다.

test 함수의 success 반환 값은 resolve로 error 반환 값은 reject에 넣어주면 됩니다.

 

 

2. promise 체인

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('성공1');
  }, 2000);
  //reject('error');
});

p.then(function(respose) {
  console.log(respose);	// 성공1
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('성공2');
    }, 2000);
  });
}).then(function(response) {
  console.log(response);	// 성공2 
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('성공3');
    }, 2000);
  }); 
}).then(function(response) {
  console.log(response);	// 성공3
}).catch(function(error) {
  console.log(error);
});

프로미스를 사용하는 이유 중의 하나가 콜백 지옥을 해결하기 위함입니다. 

여러 개의 비동기 함수를 순차적으로 호출하려면 콜백 함수로 구현하게 되면 콜백지옥을 경험하게 될 것입니다.

이를 해결하기 위해 프로미스 체인을 활용하면 됩니다. 

성공1, 성공2, 성공3를 순차적으로 실행하기 위해서 프로미스 객체를 반환하여, then() 구문을 통해서 response를 받아 또 다시 프로미스를 구현하고 반환하는 형식으로 구현하시면 됩니다. 

 

 

3. async와 awiat를 이용한 ajax 비동기함수 동기식으로 호출하기

async function activeTest() {
  let newsList = await getNewsList();
  console.log(newsList);
  let newsDetail = await getNewsDetail(newsList[0].id);
  console.log(newsDetail);
}

function getNewsList() {
  var url = 'https://api.hnpwa.com/v0/news/1.json';
  return fetch(url).then((response) => {
  	return response.json();
  });
  /*
  var ajax = new XMLHttpRequest();
  ajax.open('get', url, false);	// 비공기 통신 여부
  ajax.send();
  return JSON.parse(ajax.response);
  */
}

function getNewsDetail(id) {
  var url = 'https://api.hnpwa.com/v0/item/'+ id +'.json';
  return fetch(url).then((response) => {
    return response.json();
  });
}

activeTest();

fetch를 사용한 getNewsList함수와 getNewsDetail함수는 프로미스 객체가 반환됩니다. 

getNewsList에서 반환된 id 값을 getNewsDetail에 넘겨서 다시 api를 호출해서 데이터를 호출합니다.

activeTest 함수에 async 지시어를 넣고 함수 내에서 순서대로 실행할 비동기함수(promise 반환하는 함수)에 await 지시어를 넣어주면 됩니다. 

await getNewsList(), await getNewsDetail(newsList[0].id)

 

promise와 async의 차이점은 무엇일까요?

promise는 콜백을 이용해서 비동기 함수를 순차적으로 실행하는 것입니다.

하지만 콜백이 아닌 함수 내부에서 비동기 함수를 동기식으로 호출하기 위해서는 async, await을 사용해야 합니다.

async, await를 사용할 때 주의할 점은 await는 꼭 promise 객체를 반환하는 비동기 함수에 사용해야합니다. 

참고로 fetch는 자동으로 promise 객체를 반환합니다.

 

 

 

4. jquery ajax로 프로미스 체인 구현 예시(참고 코드)

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('성공1');
  }, 1000);
  //reject('error');
});

p.then(function(respose) {
  console.log(respose);	// 성공1
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      var url = 'https://api.hnpwa.com/v0/news/1.json';  
      $.ajax({
        type: 'get',
        url: url,
        //contentType: "application/json;charset=UTF-8",
        //dataType: 'json', //binary',
        data: '',
        success : function(response) {
          resolve(response)
        },
        error: function(xhr, status, error) {
        }
      })
    }, 3000);
  });
}).then(function(response) {
  console.log(response);	// 성공2 
  var url = 'https://api.hnpwa.com/v0/item/'+ response[0].id +'.json';
  return $.ajax({
    type: 'get',
    url: url,
    //contentType: "application/json;charset=UTF-8",
    //dataType: 'json', //binary',
    data: '',
    success : function(response) {
    },
    error: function(xhr, status, error) {
    }
  });
}).then(function(response) {
  console.log(response);	// 성공3
}).catch(function(error) {
  console.log(error);
});

 

 

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

 

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

https://velog.io/@ksh4820/Ajax-fetch

Ajax, fetch