AbortController
gpt-4.icon
AbortControllerは、Web APIの一つで、Fetchリクエストやその他の非同期操作を中止するためのコントローラーです。これにより、不要になったリクエストを中断し、リソースを節約することができます。 基本的な使用法
code:js
const controller = new AbortController();
code:js
const signal = controller.signal;
Fetchリクエストのオプションにsignalを追加します。 code:js
.then(response => response.json())
.then(data => {
console.log('Data:', data);
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', error);
}
});
4. リクエストの中止
code:js
// 例えば、2秒後にリクエストを中止する
setTimeout(() => {
controller.abort();
}, 2000);
実際の使用例
code:js
const controller = new AbortController();
const signal = controller.signal;
.then(response => response.json())
.then(data => {
console.log('Data:', data);
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', error);
}
});
// 3秒後にリクエストを中止する
setTimeout(() => {
controller.abort();
}, 3000);
`
利点
1. リソースの節約
不要なリクエストを中断することで、サーバーとクライアントの両方のリソースを節約できます。
2. 競合状態の防止
非同期操作が複数同時に行われる場合、不要な操作を中断することで競合状態を防ぐことができます。
3. ユーザーエクスペリエンスの向上
ユーザーが次の操作を行った際に、前のリクエストを中断することで、応答性の高いアプリケーションを提供できます。
注意点