jQuery – Ajax – 4 – Promise와 async/await 사용

작성자 wooah
ES6(ECMAScript 2015) - 객체 리터럴 확장 - 2 - 프로토타입 축약
jQuery – Ajax – 4 – Promise와 async/await 사용

Promise와 async/await를 사용한 jQuery Ajax 처리

소제목: Promise와 async/await를 사용하여 jQuery Ajax 처리하기

Promise: 약속을 지키는 것처럼 Ajax 처리하기

Promise는 자바스크립트에서 비동기 작업을 처리하는 데 사용되는 개념입니다. jQuery를 사용하여 Ajax 요청을 처리할 때도 Promise를 활용할 수 있습니다. Promise는 비유적으로 약속을 지키는 것과 같습니다.

예시: Promise를 사용한 jQuery Ajax 처리

function getUserData() {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: 'https://api.example.com/user',
      method: 'GET',
      success: function(data) {
        resolve(data); // 약속을 지킴: 데이터 전송
      },
      error: function(error) {
        reject(error); // 약속을 어기움: 에러 발생
      }
    });
  });
}

// Promise 사용
getUserData()
  .then(function(data) {
    console.log('데이터를 성공적으로 받아왔습니다:', data);
  })
  .catch(function(error) {
    console.error('데이터를 받아오는 도중 에러가 발생했습니다:', error);
  });

위의 예시에서는 getUserData 함수가 Promise를 반환합니다. 이 함수 내부에서는 jQuery의 $.ajax를 사용하여 비동기적으로 데이터를 받아옵니다. 성공적으로 데이터를 받아오면 resolve를 호출하여 약속을 지키고, 에러가 발생하면 reject를 호출하여 약속을 어깁니다.

이렇게 Promise를 사용하면 데이터를 성공적으로 받아올 때와 에러가 발생했을 때를 각각 다르게 처리할 수 있습니다. then 메서드는 데이터를 받아온 경우 호출되며, catch 메서드는 에러가 발생한 경우 호출됩니다.

async/await: 동기적인 코드 작성하기

async/await는 Promise를 기반으로 한 비동기 작업 처리를 동기적으로 작성할 수 있는 문법입니다. async 함수 내에서 await 키워드를 사용하면 Promise가 처리될 때까지 코드의 실행이 일시 정지됩니다. 이를 비유하자면, async/await는 마치 순차적으로 일을 처리하는 것처럼 동작합니다.

예시: async/await를 사용한 jQuery Ajax 처리

async function getUserData() {
  try {
    const data = await $.ajax({
      url: 'https://api.example.com/user',
      method: 'GET'
    });
    console.log('데이터를 성공적으로 받아왔습니다:', data);
  } catch (error) {
    console.error('데이터를 받아오는 도중 에러가 발생했습니다:', error);
  }
}

// async/await 사용
getUserData();

위의 예시에서는 getUserData 함수를 async 함수로 선언하여 비동기 작업을 동기적으로 처리합니다. await 키워드를 사용하여 $.ajax 함수가 Promise를 반환할 때까지 코드의 실행을 일시 정지합니다. 데이터를 성공적으로 받아오면 data 변수에 결과가 할당되고, 에러가 발생하면 catch 블록으로 제어가 이동합니다.

async/await를 사용하면 코드가 보다 읽기 쉽고 순차적인 흐름으로 작성될 수 있습니다.

주의해야 할 점

  1. Promise와 async/await는 자바스크립트 비동기 처리를 간편하게 해주는 도구입니다. 하지만 오용할 경우 코드의 가독성을 떨어뜨릴 수 있으므로 적절하게 사용해야 합니다.
  2. async 함수 내에서만 await를 사용할 수 있습니다. 따라서 일반적인 함수 내에서는 await를 사용할 수 없습니다.
  3. async 함수에서 반환되는 값은 항상 Promise 객체입니다. 따라서 async 함수를 호출한 후에도 Promise 기반으로 처리해야 합니다.
  4. async 함수를 사용할 때는 try-catch 블록을 활용하여 에러를 처리하는 것이 좋습니다.
  5. jQuery를 사용하여 Ajax 요청을 처리할 때 Promise와 async/await를 함께 사용할 수 있으며, 더욱 간결하고 가독성 있는 코드를 작성할 수 있습니다.

위의 내용을 참고하여 jQuery를 이용한 Ajax 요청 처리에서 Promise와 async/await의 사용 방법과 장점을 익히세요. 이를 통해 코드의 가독성을 높이고 비동기 작업을 효과적으로 처리할 수 있을 것입니다.

답글 남기기