Ajax success,error 함수 안탈 때, 해결 방법(동기식 방식 사용)

오늘은 개발 도중에, ajax는 타서 Controller에서도 return을 잘 해주고 있었는데, success함수를 안타고 있었다. 

그래서, success 함수 내에 구현해 놓은 기능이 수행되지 않고, 로직을 뛰어 넘고 있었다..!

그래서 구글링을 해보니, ajax를 동기식으로 설정을 하면 해결이 된다는 이야기가 있어서 적용을 해 보았다.

//기존로직 

let data = {
          id: id,
          password: password,
          userName: userName,
          birthday : birthday
        };
        $.ajax({
          url	: "/joinInsert",
          type: "POST",
          contentType: 'application/json',
          data: JSON.stringify(data),
          success:function (result) {
              if(result == "1"){
                console.log("success : " + result);
                alert("회원가입 성공");
                //window.location.reload();
                location.href = "/login";

              }else{
                console.log("fail : " + result);
                alert("회원가입 실패");
                location.href = "/login";
              }
          },
          error:function(request,status,error){
            alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
          }
        });
        
        
    //변경 로직
    let data = {
          id: id,
          password: password,
          userName: userName,
          birthday : birthday
        };
        $.ajax({
          url	: "/joinInsert",
          type: "POST",
          contentType: 'application/json',
          data: JSON.stringify(data),
          async: false,
          success:function (result) {
              if(result == "1"){
                console.log("success : " + result);
                alert("회원가입 성공");
                //window.location.reload();
                location.href = "/login";

              }else{
                console.log("fail : " + result);
                alert("회원가입 실패");
                location.href = "/login";
              }
          },
          error:function(request,status,error){
            alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
          }
        });

[변경 된 부분]

ajax 함수 내에 async : false, 추가!!

바로 success 함수가 잘 탔다.

Ajax(Asynchronous JavaScript and Xml)  비동기 방식?? 동기 방식???

자바스크립트의 라이브러리 중 하나이며, 빠르게 동작하는 동적인 웹 페이지를 만들기 위한(전체 페이지를 새로 고치지 않고, 페이지의 일부만을 로드하는) 기법이다.

참고)

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
표현 정보를 위한 HTML과 CSS
동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest

출처 : 위키백과

 

비동기 방식

Ajax는 백앤드 서버와 통신하여, 그 return 값을 view에서 불러와 화면에 표현을 해주는데, ajax의 default는 비동기식 방식이다.

즉, 내가 고치기 전 로직은 비동기식 방식으로, 서버에 데이터를 요청을 하고, 수신이 완료될 때까지 기다리지 않고, 다른 작업을 실행하였기 때문에, return 한 값을 받을 수 없었다... (서버에서 return 주는 값을 받기도 전에 ajax 로직이 더 빠르게 끝났다고 생각하면 됨.)

그렇기 때문에 ajax에서 return 받는 값으로 로직 구현을 할 경우, 동기식 방식으로 구현하는 것이 좋다!!!(나도 계속 인지하자...)

 

동기 방식

동기 방식은 수정한 로직과 같이, async: false 설정을 추가하게 되면, ajax를 호출하고, 서버에서 응답을 기다렸다가 응답을 모두 완료 후 그 다음 로직이 실행할 수 있도록 하는 방식을 말한다.