Ajax: done()、then()、和違いを徹底解説！
Ajaxでよく使われるdone()とthen()。似ているようで異なるこの2つのメソッドの違い、使い分け、そして注意点まで徹底解説！非同期処理をより深く理解し、JavaScriptコードをよりスマートに書きましょう。
done() とは？ - 従来からの成功時処理
- done()は、jQueryにおけるAjaxのDeferredオブジェクトのメソッド
- Ajaxリクエストが成功時に実行されるコールバック関数を登録
- 従来から使われてきた、馴染み深い記述方法
$.ajax({
url: '/path/to/api',
type: 'GET',
dataType: 'json'
})
.done(function(data) {
console.log('成功:', data);
})
.fail(function(error) {
console.error('エラー:', error);
});
then() とは？ - Promiseベースのモダンなアプローチ
- then()は、JavaScriptのPromiseオブジェクトのメソッド
- Ajaxリクエストが成功時に実行される処理を登録、さらに処理をつなげて書くことが可能
- 現代のJavaScript開発における標準的な非同期処理の記述方法
fetch('/path/to/api')
.then(response => response.json())
.then(data => {
console.log('成功:', data);
return data;
})
.then(processedData => {
// さらに処理を続ける
})
.catch(error => {
console.error('エラー:', error);
});
done() vs then() - 違いを理解して使い分けよう！
| 特徴 | done() | then() |
|---|---|---|
| 戻り値 | jqXHR オブジェクト | 新たな Promise オブジェクト |
| エラーハンドリング | fail() で処理 | then() の第二引数または catch() で処理 |
| 可読性 | 処理が複数になると複雑になる場合がある | 処理の流れが明確で、複数処理を繋げやすい |
注意点 - バージョンとライブラリに気をつけよう
- jQuery 1.8以降で、then() が jqXHR オブジェクトに追加
- 古いjQueryバージョンでは、then() は使用できない場合がある
- 他のライブラリでPromiseを利用する場合は、それぞれの仕様を確認
まとめ
- then() は、Promiseベースのモダンな記述方法で、可読性と柔軟性に優れている
- done() は、従来からの記述方法だが、jQueryのバージョンによっては使用できない場合もある
- 状況に応じて使い分け、より良いJavaScriptコードを目指そう！
参考資料
関連Q&A
Q1: then() を使わずにエラーハンドリングはできますか？
A1: then() を使う場合でも、catch() メソッドでエラーを一括処理できます。
Q2: done() と then() は一緒に使えますか？
A2: 一緒に使うことは可能ですが、可読性が低下するため、どちらかに統一することをおすすめします。
Q3: 古いjQueryバージョンを使っていますが、then() を使いたい場合はどうすれば良いですか？
A3: jQueryを最新バージョンにアップデートするか、Promiseをpolyfillで提供する必要があります。
その他の参考記事:jquery done