Promise を使用して、複数の非同期 Ajax リクエストによって引き起こされるコードのネストの問題を解決する

この記事では主に、複数の非同期 Ajax リクエストによって引き起こされるコードのネスト問題を解決するための Promise の使用方法を紹介します。必要な友人はそれを参照してください。

問題

フロントエンドの学生がページを作成したとき、彼はこう言いました。よくある間違いを犯しました エラー: 複数の 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);
        }
      }
    });

上記のコードには 2 つの問題があります:

*まず、action2 は action1 が戻る前に発行される可能性があり、パラメーター someData.attr1 が正しく送信されました

* 次に、2 つの ajax リクエストのコードの重複は非常に深刻です

物事

• コードの重複の問題は、特に自分のプロジェクトでは比較的簡単に解決できます。パラメータは仕様によって決定できます くそー、パラメータを減らして 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、データ、コールバックの 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
   }
};

これまでのところ、問題は完全に解決されているように見えますが、リクエストが 3 つ以上ある場合が考えられますが、 4 、 5、および相互に依存する他の非同期操作 (ページ内の Vue オブジェクトの初期化など) も存在します。人をめまいさせる可能性があります。

非同期呼び出しの表現を同期呼び出しのように見せる方法を見つける必要があります。

私は最近、たまたま Ruan Yifeng 先生の ES6 に関する本を読みました。ユーザーは IE ブラウザーとの互換性を主張しなかったため、Promise ソリューションを選択しました

ソリューション

• Promise の紹介

実際、最新のブラウザにはすでに Promise のサポートが組み込まれています。IE だけではそれができません

• が成功したら、これはresolve()を呼び出し、失敗した場合はreject()を呼び出し、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;
}

• 呼び出し元を変更します

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
)

上記は私がコンパイルしたものです将来すべての人にとって役立つことを願っています。

関連記事:

HTTPメッセージとajaxの基礎知識

Ajaxクロスドメインリクエストの原理(グラフィックチュートリアル)

Ajax非同期リクエスト技術の例を説明

以上がPromise を使用して、複数の非同期 Ajax リクエストによって引き起こされるコードのネストの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。