ajax逐次処理でエラーが出た場合にrejectさせてループから抜けたい

Question

前提・実現したいこと

javascript(jquery)にて、あるまとまった非同期処理を実行させ、全ての処理が成功すればresolveさせ、途中でうまくいかなければ、その時にrejectさせ、後続の処理をさせないようにしたいです。

発生している問題・エラーメッセージ

ajax処理がうまくいかなかった場合の処理をイテレータの回数分実行した後rejectされてしまう。

該当のソースコード

let func = function(){
  return new Promise(function (resolve, reject){
    for(let i = 0; i < 10; i++){
      $.ajax({
        url: 'http://',
        type:'Get'
      }).done(function(response, status, jqXHR) {
        console.log("成功");
      }).fail(function(jqXHR, status, error) {
        console.log("エラー");
        reject("rejectされました");
      });
    }
    resolve();
  });
}

func().then(function(){
  console.log("終了");
})
.catch(function (error) {
  console.log(error);
});

試したこと

returnを記述する

let func = function(){
  return new Promise(function (resolve, reject){
    for(let i = 0; i < 10; i++){
      $.ajax({
        url: 'https://',
        type:'Get'
      }).done(function(response, status, jqXHR) {
        console.log("成功");
      }).fail(function(jqXHR, status, error) {
        console.log("エラー");
        reject("rejectされました");
        return;
      });
    }
    resolve();
  });
}

func().then(function(){
  console.log("終了");
})
.catch(function (error) {
  console.log(error);
});

• 結果

変化なし

breakを記述する

let func = function(){
  return new Promise(function (resolve, reject){
    for(let i = 0; i < 10; i++){
      $.ajax({
        url: 'https://',
        type:'Get'
      }).done(function(response, status, jqXHR) {
        console.log("成功");
      }).fail(function(jqXHR, status, error) {
        console.log("エラー");
        reject("rejectされました");
        break;
      });
    }
    resolve();
  });
}

func().then(function(){
  console.log("終了");
})
.catch(function (error) {
  console.log(error);
});

• 結果

SyntaxError: Illegal break statementというエラーが発生

補足情報（FW/ツールのバージョンなど）

jquery(3.4.1)

Answer 1

こんにちは

複数の非同期処理を実行させ、それらの全てが成功したときに resolve されて何らかの処理を後続の.then で行うような Promise を作りたいときは、Promise.all() が便利です。この際に、まとめる対象となる個々の非同期処理もPromiseにします。

以下、簡単なサンプルを挙げます。

以下は、HTTPリクエストを $.ajax で送信するPromiseを複数作り、それらのすべてが成功したときに、後続の .then に設定した関数に処理をつなげるために、Promise.all() を使った簡単なサンプルです。

const getter = (name, url) => new Promise(function(resolve, reject) {

  $.ajax({
        url,
        type:'get'
      }).done(function(response, status, jqXHR) {
        console.log(`成功: ${name}`);
        resolve(response.result);
      }).fail(function(jqXHR, status, error) {
        console.log(`エラー: ${name}`);
        reject({ name, status: jqXHR.status});
      });

});


const getters = [
    getter('foo', 'https://demo2746340.mockable.io/q191495/0.json'),
    getter('bar', 'https://demo2746340.mockable.io/q191495/1.json'),
    getter('baz', 'https://demo2746340.mockable.io/q191495/2.json'),    
];

Promise.all(getters)
  .then(results => { 
     console.log(results);
  })
  .catch(error => { 
     console.log(error); 
  });

上記で、https://demo2746340から始まる各URLをGETすると、HTTPステータス200で、以下

{ "result": 1000 }

のような形の簡単なJSONを返します。

上記のコードを動作確認するために 以下のjsFidle に上げています。

• 動作確認用のサンプル： https://jsfiddle.net/jun68ykt/uhoa5dk2/3/

Console に以下のように

成功: foo
成功: bar
成功: baz

表示されており（※順番は異なるかもしれませんが）、各々のリクエストが成功で返っており、かつ、 Promise.all で作られた Promise の then　に渡された関数が実行されて、console.log(results); により

[1000, 1001, 1002]

と表示されることが分かると思います。

次にどれか1つでも失敗する場合の例です。上記のコードで、 getters の2番目のURLの末尾を 3.json に変えます。

const getters = [
    getter('foo', 'https://demo2746340.mockable.io/q191495/0.json'),
    getter('bar', 'https://demo2746340.mockable.io/q191495/3.json'),
    getter('baz', 'https://demo2746340.mockable.io/q191495/2.json'),    
];

https://demo2746340.mockable.io/q191495/3.json はステータス 404 を返すようにしています。以下で動作確認できます。

• 動作確認用のサンプル： https://jsfiddle.net/jun68ykt/sp75a0ex/2/

上記では、 Promise.all で作られたPromise に catch で設定された関数が実行されて、以下のように表示されると思います。（※順番は異なるかもしれません）

成功: foo
エラー: bar
Object {name="bar", status=404}
成功: baz

以上、拙いサンプルですが、ご質問にある、

あるまとまった非同期処理を実行させ、全ての処理が成功すればresolveさせ

たい場合は、 Promise.all() を使うことをお勧めするのがこの回答の主旨となります。

参考になれば幸いです。

Comments

[defeatist]

ありがとうございます

Answer 2

考え方が2つあります。

仮にsend先をこうしておきます

• send.php

仕様：引数dataが1か3のときはエラーを返す、成功時は5秒待ってから出力

<?PHP
$data=filter_input(INPUT_GET,"data");
if(in_array($data,[1,3])){
header('HTTP/1.1 404 Not Found');
  print "incorrect";
  exit;
}
sleep(5); // 5秒待つ
print "success";

• 失敗を得ても「errorだった」という成功に流す

この場合失敗したとわかっていても成功処理を5秒まってから出力される

const func=()=>{
  var d=[];
  for(let i = 0; i < 5; i++){
    d[i]=$.Deferred();
    $.ajax({
    url: 'send.php',
    type:'GET',
    data:{data:i},
    }).done(data=>{
      d[i].resolve(data);
    }).fail((xhr,err)=>{
      d[i].resolve(err); //失敗でもresolveする
    });
  }
  return $.when.apply(null,d).done((...data)=>{
    return data;
  });
};

func().then((...data)=>{
  console.log(data);
}).fail(function(err){
  console.log(err);
});

※これならfailに流れないのでエラー状況を把握することができます。

• ちゃんとrejectする

この場合、成功処理の5秒は待たずにerrorになった瞬間にエラーがわかる

const func=()=>{
  var d=[];
  for(let i = 0; i < 5; i++){
    d[i]=$.Deferred();
    $.ajax({
    url: 'send.php',
    type:'GET',
    data:{data:i},
    }).done(data=>{
      d[i].resolve(data);
    }).fail((xhr,err)=>{
      d[i].reject(error);// ちゃんとリジェクトすると
    });
  }
  return $.when.apply(null,d).done((...data)=>{
    return data;
  });
};

func().then((...data)=>{
  console.log(data);
}).fail(function(err){
  console.log(err); // failに流れるので確認できるのはrejectした引数
});

Comments

[yambejp]

jQueryで処理する限りpromiseを利用するより$.Deferredの方が
処理が楽だと思います

[defeatist]

ありがとうございます
本題とは、ずれてしまうのですが、

return $.when.apply(null,d).done((...data)=>{
return data;
});

ではなく

return $.when(...d).done((...data)=>{
return data;
})

ではだめなのでしょうか？

[yambejp]

大丈夫ですよ
その方がよりES6っぽいですね

[defeatist]

すみません
自分で逐次処理と言っていたことを忘れていました
ありがとうございます