$.ajax の done, fail, always を Promise の then, catch に置き換える

はじめに

jQuery 3 から $.Deferred が Promises/A+ という Promise の標準規格に準拠するようになった。そこで、せっかくなので $.ajax のコールバック処理も then や catch で書いてみることにした。

done, fail, always を使う場合

$.ajax({
  type: 'GET',
  url: '/soul_gems',
  dataType: 'json'
})
  .done((data, textStatus, jqXHR) => {
    console.log('done', jqXHR.status);
  })
  .fail((jqXHR, textStatus, errorThrown) => {
    console.log('fail', jqXHR.status);
  })
  .always(() => {
    console.log('always');
  });

成功した場合

done 200
always

失敗した場合

fail 403
always

then, catch を使う場合

$.ajax({
  type: 'GET',
  url: '/soul_gems',
  dataType: 'json'
})
  .then((...args) => { // done
    const [data, textStatus, jqXHR] = args;

    console.log('done', jqXHR.status);
  })
  .catch((...args) => { // fail
    const [jqXHR, textStatus, errorThrown] = args;

    console.log('fail', jqXHR.status);
  })
  .then(() => { // always
    console.log('always');
  });

成功した場合

done 200
always

失敗した場合

fail 403
always