두 번째 Ajax 호출할 때 첫 번째 Ajax 호출의 응답 값을 parameter로 사용하기

두 번째 Ajax 호출할 때 첫 번째 Ajax 호출의 응답 값을 parameter로 사용하기

상황은 다음과 같다.

 

FE에서 첫 번째 Ajax를 호출한 응답의 결과 값을 두 번째 Ajax를 호출할 때 parameter로 전달하는 것이다.

 

Ajax는 기본적으로 비동기적(asynchronous)으로 동작하기 때문에, 두 번째 Ajax 호출이 첫 번째 호출의 응답을 받기 전에 실행될 가능성이 있다.

 

이로 인해 두 번째 Ajax 호출에 필요한 parameter가 아직 준비되지 않은 상태일 수 있다.

 

해결 방법을 알아보자.

 

 

반응형

해결 방법

결론부터 얘기하면 콜백 함수, Promise, async/await를 활용하여 순차적인 호출을 관리하는 방법을 사용하자.

 

1. 콜백 함수 사용

첫 번째 Ajax 호출이 끝난 후, 두 번째 Ajax 호출을 실행하도록 설정

$.ajax({
    url: 'first-request-url',
    type: 'GET',
    success: function(response1) {
        // 첫 번째 호출이 끝나고 response1을 받아옴
        $.ajax({
            url: 'second-request-url',
            type: 'GET',
            data: { param: response1.someValue },
            success: function(response2) {
                // 두 번째 호출 완료 후 처리
                console.log(response2);
            }
        });
    }
});

 

 

2. Promise 사용

function firstRequest() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: 'first-request-url',
            type: 'GET',
            success: function(response1) {
                resolve(response1);
            },
            error: function(err) {
                reject(err);
            }
        });
    });
}

function secondRequest(param) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: 'second-request-url',
            type: 'GET',
            data: { param: param },
            success: function(response2) {
                resolve(response2);
            },
            error: function(err) {
                reject(err);
            }
        });
    });
}

// 호출 순서 제어
firstRequest()
    .then(response1 => {
        return secondRequest(response1.someValue);
    })
    .then(response2 => {
        console.log(response2); // 두 번째 요청의 결과
    })
    .catch(err => {
        console.error('Error:', err);
    });

 

 

3. async / awit 사용

async function makeRequests() {
    try {
        const response1 = await $.ajax({ url: 'first-request-url', type: 'GET' });
        const response2 = await $.ajax({
            url: 'second-request-url',
            type: 'GET',
            data: { param: response1.someValue }
        });
        console.log(response2);  // 두 번째 요청의 결과
    } catch (err) {
        console.error('Error:', err);
    }
}

makeRequests();