複数の非同期 Ajax リクエストによって引き起こされるコードのネストを解決する方法

今回は、複数の非同期 Ajax リクエストによって引き起こされるコードの入れ子の問題を解決する方法を説明します。以下は実際的なケースですので、一緒に見てみましょう。

問題フロントエンドの学生がページを作成していたとき、彼らはよくある間違いを犯しました。それは、複数の 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、data、callbackの3つの必要なパラメータだけを入力すればよく、他は固定です

実行順序の問題では、2 番目のリクエストを最初のリクエストのコールバックに入れることができます。次のようになります。

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

これまでのところ、問題は完全に解決されているように見えますが、それ以上のリクエストがある場合はリクエストは 2 つですが、4 つまたは 5 つあり、他の非同期操作 (私たちのページには Vue オブジェクトの初期化が含まれているなど) があり、それらの間には依存関係が存在します。ネストされた括弧のレイヤーだけでも、すでに人々はめまいを感じます。

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

最近たまたま阮宜峰先生の ES6 に関する本を読みましたが、ユーザーは

IE ブラウザ

との互換性を主張しなかったため、Promise ソリューションを選択しました

ソリューション

Promise の紹介
実際、最新のブラウザには既に Promise のサポートが組み込まれており、サードパーティのライブラリは必要ありません。IE だけが機能せず、諦めました。

ajax カプセル化関数を変換して、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
  )

この記事のケースを読んだ後、メソッドをマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

C と View の間でデータを通信する方法

Ajax の対話中に報告された status=parsererror エラーを解決する方法

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