여러 비동기 Ajax 요청으로 인한 코드 중첩을 해결하는 방법

이번에는 다중 비동기 Ajax 요청으로 인한 코드 중첩 문제를 해결하는 방법을 알려드리겠습니다. 다중 비동기 Ajax 요청으로 인한 코드 중첩 문제를 해결할 때 주의해야 할 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 함께 살펴보겠습니다.

Problem

프론트엔드 학생들이 페이지를 만들 때 흔히 저지르는 실수가 있습니다. 여러 Ajax 요청을 순차적으로 기록했고, 후속 요청은 이전 요청의 반환 결과에 특정한 결과를 가져왔습니다. 매달린. 아래 코드에서 볼 수 있듯이:

var someData;
$.ajax({      url: '/prefix/entity1/action1',
      type: 'GET' ,
      async: true,
      contentType: "application/json",
      success: function (resp) {
        //do something on response
        someData.attr1 = resp.attr1;
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        //在这个页面里，所有的请求的错误都做同样的处理
        if (XMLHttpRequest.status == "401") {
          window.location.href = '/login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
      }
    });
$.ajax({
      url: '/prefix/entity2/action2',
      type: 'POST' ,
      dataType: "json",
      data: JSON.stringify(someData),
      async: true,
      contentType: "application/json",
      success: function (resp) {
        //do something on response
       },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        //在这个页面里，所有的请求的错误都做同样的处理
        if (XMLHttpRequest.status == "401") {
          window.location.href = '/login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
      }
    });

위 코드에는 두 가지 문제가 있습니다.

*첫째, Action1이 반환되기 전에 Action2가 실행될 가능성이 높기 때문에 someData.attr1 매개변수가 발생하지 않습니다. 올바르게 전달되었습니다

*둘째, 두 Ajax 요청의 코드 중복이 매우 심각합니다

Things

• 코드 중복 문제는 상대적으로 해결하기 쉽습니다. 특히 자신의 프로젝트에서는 다양한 매개변수를 사용할 수 있습니다. 사양을 통해 결정하고 캡슐화합니다. 매개변수가 적은 ajax 메소드가 좋을 것 같습니다

//url：地址
//data：数据对象，在函数内部会转化成json串，如果没传，表示用GET方法，如果传了，表示用POST方法
function ajax(url, data, callback) {
    $.ajax({
      url: url,
      type: data == null ? 'GET' : 'POST',
      dataType: "json",
      data: data == null ? '' : JSON.stringify(data),
      async: true,
      contentType: "application/json",
      success: function (resp) {
        callback(resp);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.status == "401") {
          window.parent.location = '/enterprise/enterprise_login.html';
          self.location = '/enterprise/enterprise_login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
      }
    });
}

이렇게 하면 url, data, callback의 필수 매개변수 3개만 채우고 나머지는 수정됩니다

• 실행 순서는 두 번째 요청을 넣을 수 있습니다. 첫 번째 요청의 콜백에는 다음과 같습니다.

ajax('/prefix/entity1/action1',null, function(resp){
   //do something on response
   someData.attr1 = resp.attr1;
   ajax('/prefix/entity2/action2', someData, function(resp){
     //do something on response
   }
};

지금까지는 문제가 완벽하게 해결된 것 같지만, 두 가지만 없다면 그럴 수도 있습니다. 요청은 4개 또는 5개이며 다른 비동기 작업(예: 페이지에 Vue 개체의 초기화가 포함되어 있음)이 있으며 이들 사이에 중첩된 괄호 레이어만으로도 이미 사람들이 현기증을 느끼고 있습니다.

비동기 호출 표현을 동기 호출처럼 보이게 만드는 방법을 찾아야 합니다.

최근 ES6에 관한 Ruan Yifeng 선생님의 책을 읽었는데, 사용자들이 IE 브라우저와의 호환성을 고집하지 않아서 Promise 솔루션

Solution

• Introducing Promise

사실 최신 브라우저에는 이미 Promise 지원 기능이 내장되어 있습니다. 타사 라이브러리도 필요하지 않습니다. IE만 작동하지 않고 포기했습니다.

• Ajax 캡슐화 기능을 변환하고 해결()을 호출하세요. 성공하면 이를 호출하고 실패하면 Promise 객체를 반환합니다

function ajax(url, data, callback) {
  var p = new Promise(function (resolve, reject) {
    $.ajax({
      url: url,
      type: data == null ? 'GET' : 'POST',
      dataType: "json",
      data: data == null ? '' : JSON.stringify(data),
      async: true,
      contentType: "application/json",
      success: function (resp) {
        callback(resp);
        resolve();
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.status == "401") {
          window.parent.location = '/enterprise/enterprise_login.html';
          self.location = '/enterprise/enterprise_login.html';
        } else {
          alert(XMLHttpRequest.responseText);
        }
        reject();
      }
    });
  });
  return p;
}

• Modify the caller

ajax('/prefix/entity1/action1',null, function(resp){
   //do something on response
   someData.attr1 = resp.attr1;
}).then(
   ajax('/prefix/entity2/action2', someData, function(resp){
     //do something on response
   }
).then(
   initVue() ;
).then(
   //do something else
)

이 기사의 사례를 읽은 후 메서드를 마스터했다고 생각합니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 자료:

C와 View 간에 데이터를 통신하는 방법

Ajax 상호 작용 중에 보고된 status=parsererror 오류를 해결하는 방법

위 내용은 여러 비동기 Ajax 요청으로 인한 코드 중첩을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!