Ajax(비동기 자바스크립트와 XML) – Ajax 요청과 응답 처리 – 3 – Promise와 async/await 사용

소제목: Ajax 요청과 응답 처리를 개선하는 Promise와 async/await

자바스크립트를 이용하여 웹 개발을 할 때, Ajax(비동기 자바스크립트와 XML)를 사용하면 웹 페이지에서 비동기적으로 서버와 통신하여 데이터를 주고받을 수 있습니다. Ajax를 이용하면 웹 페이지의 성능을 향상시킬 수 있고, 사용자 경험을 개선할 수 있습니다. Ajax 요청과 응답 처리를 보다 효율적이고 간결하게 다루기 위해 Promise와 async/await를 사용할 수 있습니다.

소제목: Promise – 약속을 이행하는 Ajax 처리 방법

Promise는 비동기 작업의 결과를 나타내는 객체입니다. Ajax 요청과 응답 처리를 Promise를 이용하여 처리할 수 있습니다. Promise를 사용하면 Ajax 요청을 보내고, 서버의 응답을 받은 후에 원하는 작업을 처리할 수 있습니다. 다음은 Promise를 이용한 Ajax 요청과 응답 처리의 예시입니다.

function makeAjaxRequest(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(Error('Network Error'));
    };
    xhr.send();
  });
}

makeAjaxRequest('https://api.example.com/data')
  .then(function(response) {
    console.log('서버 응답:', response);
    // 응답을 가지고 추가 작업 수행
  })
  .catch(function(error) {
    console.error('에러 발생:', error);
    // 에러 처리
  });

위의 예시에서 makeAjaxRequest 함수는 Promise 객체를 반환합니다. 이 함수를 호출하면 Ajax 요청을 보내고, 서버로부터 응답을 받아올 수 있습니다. then 메서드는 응답을 가지고 추가 작업을 수행하고, catch 메서드는 에러 처리를 담당합니다. 이렇게 Promise를 이용하면 Ajax 요청과 응답 처리를 보다 명확하게 관리할 수 있습니다.

소제목: async/await – 동기적인 코드 흐름으로 Ajax 처리하기

async/await는 자바스크립트의 비동기 처리를 동기적인 코드 흐름으로 작성할 수 있게 해주는 문법입니다. async 함수 내에서 await 키워드를 사용하면, Promise가 처리될 때까지 코드 실행이 멈추고 해당 Promise의 결과를 반환합니다. 이를 통해 Ajax 요청과 응답 처리를 보다 간결하게 작성할 수 있습니다. 다음은 async/await를 이용한 Ajax 요청과 응답 처리의 예시입니다.

async function makeAjaxRequest(url) {
  try {
    var response = await fetch(url);
    if (response.ok) {
      var data = await response.json();
      console.log('서버 응답:', data);
      // 응답을 가지고 추가 작업 수행
    } else {
      throw new Error('응답이 실패했습니다.');
    }
  } catch (error) {
    console.error('에러 발생:', error);
    // 에러 처리
  }
}

makeAjaxRequest('https://api.example.com/data');

위의 예시에서 makeAjaxRequest 함수는 async 함수로 선언되어 있습니다. 함수 내에서 await 키워드를 사용하여 fetch 함수를 호출하고, 서버의 응답을 받아옵니다. 응답이 성공적이라면 추가 작업을 수행하고, 응답이 실패한 경우에는 에러를 던집니다. try-catch 문을 이용하여 에러를 처리할 수 있습니다. async/await를 사용하면 코드의 가독성이 좋아지고, 비동기 처리를 직관적으로 이해할 수 있습니다.

주의해야 할 점:

• Promise와 async/await는 ES6부터 도입된 기능이므로, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 따라서 사용 환경에 따라 폴리필(polyfill)을 사용하여 호환성을 보장해야 합니다.
• Ajax 요청은 네트워크 요청이기 때문에 시간이 걸릴 수 있습니다. 따라서 네트워크 상황에 따라 타임아웃(timeout)이나 에러 핸들링을 적절히 처리해야 합니다.
• 비동기 처리 중에 발생하는 에러는 catch 블록에서 처리해야 합니다. catch 블록이 없으면 예외가 전파되어 애플리케이션의 전체 동작에 영향을 줄 수 있습니다.
• 여러 개의 Ajax 요청을 동시에 보내야 할 경우, Promise.all이나 Promise.race를 이용하여 병렬적으로 처리할 수 있습니다.

Ajax 요청과 응답 처리를 개선하기 위해 Promise와 async/await를 사용하면, 비동기 작업을 보다 편리하게 다룰 수 있습니다. Promise는 약속을 이행하고, async/await는 동기적인 코드 흐름으로 Ajax 처리를 가능하게 합니다. 이를 통해 웹 개발에서 효율적인 비동기 작업을 수행할 수 있습니다. 앞으로 자바스크립트를 사용하여 Ajax를 다뤄야 할 때, Promise와 async/await를 적절히 활용해보세요!