javascript - 중첩 - 자바스크립트 함수 실행 순서




비동기식 Ajax 요청이 아닌 동기식 jQuery를 수행하려면 어떻게해야합니까? (9)

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

jQuery.ajaxSetup({async:false});

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

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

jQuery.ajaxSetup({async:true});

아마 @Adam이 제안한 것과 똑같은 방식으로 작동하지만 jQuery.get() 또는 jQuery.post() 를보다 정교한 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 요청을 수행하는 방법이 있습니까?


나는 Carcione이 제시 한 대답을 사용하여 JSON을 사용하도록 수정했다.

 function getUrlJsonSync(url){

    var jqxhr = $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}    

function testGetUrlJsonSync()
{
    var reply = getUrlJsonSync("myurl");

    if (reply.valid == 'OK')
    {
        console.dir(reply.data);
    }
    else
    {
        alert('not valid');
    }    
}

'JSON'dataType 을 추가하고 .responseTextresponseJSON으로 변경했습니다.

또한 반환 된 객체의 statusText 속성을 사용하여 상태를 검색했습니다. 이것이 Ajax 응답의 상태이며, JSON이 유효한지 여부는 아닙니다.

백엔드는 올바른 (올바른 형식의) JSON으로 응답을 반환해야합니다. 그렇지 않으면 반환 된 객체가 정의되지 않습니다.

원래 질문에 대답 할 때 고려해야 할 두 가지 측면이 있습니다. 하나는 Ajax에 동기식 ( async : false 설정)을 수행하도록 지시하고 다른 하나는 콜백 함수가 아닌 호출하는 함수의 return 문을 통해 응답을 리턴합니다.

POST로 시도해 보았습니다.

GET을 POST로 변경하고 데이터를 추가했습니다 . postdata

function postUrlJsonSync(url, postdata){

    var jqxhr = $.ajax({
        type: "POST",
        url: url,
        data: postdata,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}

위의 코드는 asyncfalse 인 경우에만 작동합니다. async : true 를 설정하는 경우 반환 된 객체 인 jqxhr 은 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 : Aalse로 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();
}

참고 : 다음과 같은 이유로 비동기를 사용하면 안됩니다.

Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)부터 사용자 경험에 부정적인 영향을 주 스레드에 대한 동기 요청이 사용되지 않습니다.

Chrome은 콘솔에서 다음과 같이 경고합니다.

주 스레드의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향을주기 때문에 더 이상 사용되지 않습니다. 도움이 더 필요하면 https://xhr.spec.whatwg.org/ 확인 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)
}

jQuery 문서에서 : 동기 Ajax 요청을 얻으려면 비동기 옵션을 false 로 지정하십시오. 그런 다음 콜백은 마더 기능이 진행되기 전에 일부 데이터를 설정할 수 있습니다.

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

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
    });
}

async: false 를 사용하면 차단 된 브라우저를 사용할 수 있습니다. 비 차단 동기 솔루션의 경우 다음을 사용할 수 있습니다.

ES6 / ECMAScript2015

ES6를 사용하면 생성기 및 공동 라이브러리를 사용할 수 있습니다.

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

ES7을 사용하면 asyc를 사용할 수 있습니다.

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}

먼저 $ .ajax를 사용할 때와 $ .get / $를 사용할 때를 이해해야합니다.

요청 헤더 설정, 캐싱 설정, 동기 설정 등과 같은 아약스 요청에 대한 낮은 수준의 제어가 필요한 경우 $ .ajax를 사용해야합니다.

$ .get / $ post : 우리가 아약스 요청에 대한 낮은 수준의 제어를 필요로하지 않을 때. 서버에 데이터를 간단하게 보내고 올리십시오. 속기의 약자이다.

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

따라서 우리는 $ .get / $. post와 다른 기능 (동기화, 캐시 등)을 사용할 수 없습니다.

따라서 ajax 요청에 대한 낮은 수준의 제어 (sync, cache 등)를 위해 $ .ajax를 사용해야한다.

 $.ajax({
     type: 'GET',
      url: url,
      data: data,
      success: success,
      dataType: dataType,
      async:false
    });

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


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




asynchronous