[javascript] jQuery가 비동기 Ajax 요청이 아닌 동기식을 수행하도록하려면 어떻게해야합니까?

표준 확장 점을 제공하는 JavaScript 위젯이 있습니다. 그중 하나가 beforecreate기능입니다. false항목이 작성되지 않도록 돌아 가야 합니다.

jQuery를 사용하여이 함수에 Ajax 호출을 추가했습니다.

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false)
        alert(result.message);
  });
}

그러나 위젯이 항목을 생성하지 못하게 false하려면 콜백이 아닌 어머니 기능으로 돌아와야 합니다. jQuery 또는 다른 브라우저 내 API를 사용하여 동기 AJAX 요청을 수행하는 방법이 있습니까?



답변

로부터 의 jQuery 문서 : 당신은 지정 비동기 로 옵션을 거짓 동기 Ajax 요청을 얻을. 그런 다음 어머니 기능이 진행되기 전에 콜백에서 일부 데이터를 설정할 수 있습니다.

제안 된대로 변경하면 코드는 다음과 같습니다.

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}


답변

호출하여 jQuery의 Ajax 설정을 동기 모드로 설정할 수 있습니다

jQuery.ajaxSetup({async:false});

그런 다음 다음을 사용하여 Ajax 호출을 수행하십시오. jQuery.get( ... );

그런 다음 다시 한 번 켜십시오.

jQuery.ajaxSetup({async:true});

@Adam이 제안한 것과 똑같이 작동하지만, 재구성 jQuery.get()하거나 jQuery.post()더 정교한 jQuery.ajax()구문 을 원하는 사람에게는 도움이 될 수 있습니다 .


답변

훌륭한 솔루션! 성공 조항에서 값을 반환하면 정의되지 않은 것으로 돌아온 것을 구현하려고 시도했습니다. 변수에 저장하고 해당 변수를 반환해야했습니다. 이것이 내가 생각해 낸 방법입니다.

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}


답변

이 모든 대답은 async : false로 Ajax 호출을 수행하면 Ajax 요청이 완료 될 때까지 브라우저가 중단된다는 점을 놓칩니다. 흐름 제어 라이브러리를 사용하면 브라우저를 끊지 않고도이 문제를 해결할 수 있습니다. 다음은 Frame.js 의 예입니다 .

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}


답변

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);


답변

참고 : async: false이 경고 메시지로 인해 사용하지 않아야 합니다.

Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)부터는 사용자 경험에 부정적인 영향을 미쳐 메인 스레드의 동기 요청이 더 이상 사용되지 않습니다.

Chrome은 콘솔에서 이에 대해 경고합니다.

기본 스레드의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향으로 사용되지 않습니다. 도움이 필요하면 https://xhr.spec.whatwg.org/를 확인 하십시오 .

하루 종일 작동을 멈출 수 있기 때문에 이와 같은 작업을 수행하면 페이지가 손상 될 수 있습니다.

동기식이지만 여전히 차단하지 않는 것처럼 느끼는 방법을 원한다면 async / await 및 아마도 새로운 Fetch API 와 같은 약속을 기반으로하는 일부 아약스를 사용해야 합니다

async function foo() {
  var res = await fetch(url)
  console.log(res.ok)
  var json = await res.json()
  console.log(json)
}

페이지 편집 에서 동기화 XHR 허용 안 함
에서 크롬 편집 중사용자가 페이지를 탐색하거나 닫을 때 . 언로드, 언로드, 페이지 숨기기 및 가시성 변경이 포함됩니다.

이것이 유스 케이스 인 경우 대신 navigator.sendBeacon을 보고 싶을 수도 있습니다

페이지가 http 헤더 또는 iframe의 allow 속성으로 sync req를 비활성화 할 수도 있습니다.


답변

교차 도메인 Ajax 호출을 수행하는 경우 ( JSONP 사용 ) 동 기적으로 수행 할 수 없으면async 플래그는 jQuery에 의해 무시됩니다.

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

JSONP 통화의 경우 다음을 사용할 수 있습니다.

  1. 자신의 도메인으로 Ajax 통화-도메인 간 통화 서버 측
  2. 비동기식으로 작동하도록 코드 변경
  3. Frame.js와 같은 “함수 시퀀서”라이브러리를 사용하십시오 (이 답변 )
  4. 실행을 차단하는 대신 UI를 차단하십시오 (이 답변 ) (내가 가장 좋아하는 방법)