Ajax 요청 내에서 한번 더 비동기 작업하기

Ajax로 API 요청을 사용할 때, 종종 서버로부터 암호화된 데이터를 받아 이를 비동기적으로 복호화해야 하는 경우가 있는데 이때 success에서 처리하면 실행되지 않는 경우가 발생하곤 합니다.

 

아래는 기본 Ajax 요청입니다.

$.ajax({
    url: '/path/to/api',
    dataType: 'json',
    success: function (data) {
        console.log("Data received:", data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.error("Ajax request failed:", textStatus, errorThrown);
    }
});

 

이때 다음과 같은 비동기 작업(암호화 등)이 success에 들어가야 할 경우

async function decryptData(encryptedData) {
    // 암호화된 데이터를 복호화하는 가상의 함수
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 복호화된 데이터 반환
            resolve(JSON.parse(atob(encryptedData)));
        }, 1000);
    });
}

 

아래와 같이 success에 즉시 실행되는 비동기 함수로 만들어 넣으면 됩니다.

$.ajax({
    url: '/path/to/api',
    dataType: 'json',
    success: function (encryptedJson) {
        (async function() {
            try {
                let json = await decryptData(encryptedJson);
                console.log("Decrypted JSON:", json);
                // 복호화된 데이터를 사용하여 DOM을 업데이트하는 등의 작업 수행
            } catch (error) {
                console.error("Decryption or processing error:", error);
            }
        })();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.error("Ajax request failed:", textStatus, errorThrown);
        console.error("Response text:", jqXHR.responseText);
    }
});

즉 아래 코드처럼 비동기 작업을 하면 됩니다.

(async function() { ... })();