JavaScript
jQuery

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

More than 1 year has passed since last update.


はじめに

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


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