TypeScript 非同期関数とPromise
2024-10-07
TypeScriptで非同期関数からPromiseを返す
TypeScriptにおける非同期関数は、Promiseを返すことが一般的です。Promiseは、非同期操作の結果がいつ完了するかを表すオブジェクトです。
基本的な構造
async function myAsyncFunction(): Promise<ReturnType> {
// 非同期処理 (e.g., fetch, setTimeout)
const result = await someAsyncOperation();
// 処理の結果を返す
return result;
}
重要なポイント
- asyncキーワード
関数を非同期関数としてマークします。 - awaitキーワード
非同期操作の結果を待つために使用します。 - Promise<ReturnType>
関数の戻り値の型を指定します。ReturnTypeは、非同期操作の結果の型です。
例
async function fetchData(): Promise<string> {
const response = await fetch('https://api.example.com/data');
const data = await response. json();
return data;
}
具体的な使い方
fetchData().then(data => {
console.log(data); // 非同期操作の結果を処理
}).catch(error => {
console.error(error); // エラー処理
});
非同期操作の例
- Promise.reject
すぐに拒否されるPromiseを作成します。 - setTimeout
指定された時間後にコールバックを実行します。 - fetch
HTTPリクエストを送信して、レスポンスを取得します。
TypeScriptにおける非同期関数とPromiseの例
非同期関数からPromiseを返す例
async function fetchData(): Promise<string> {
const response = await fetch('https://api.example.com/data');
const data = await response. json();
return data;
}
fetchData().then(data => {
console.l og(data); // 非同期操作の結果を処理
}).catch(error => {
console.error(error); // エラー処理
});
解説
- fetchData関数
非同期関数として定義され、Promise<string>を返します。 - await response.json()
レスポンスをJSON形式に変換し、その結果を待機します。 - return data
変換されたJSONデータを返します。 - then
Promiseが解決された場合に実行されるコールバック関数。
非同期関数の他の例
async function delay(ms: number): Promise<void> {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function main() {
console.log('Before delay');
await delay(2000);
console.log('After delay');
}
main();
- delay関数
指定されたミリ秒間遅延し、その後Promiseを解決します。 - main関数
非同期関数内でdelay関数を呼び出し、待機します。 - await delay(2000)
delay関数の結果を待機し、その後処理を続行します。
- thenとcatch
Promiseの成功と失敗を処理するためのコールバック関数です。 - Promise
非同期操作の結果を表すオブジェクトです。 - await
非同期操作の結果を待機します。
コールバック関数
最も古い方法ですが、ネストが深くなり可読性が低下する可能性があります。
function fetchData(callback: (data: string) => void) {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(callback)
.catch(error => console.error(error));
}
fetchData(data => {
console.log(data);
});
Promises
非同期操作の結果を表すオブジェクトです。thenとcatchメソッドを使用して成功と失敗を処理します。
function fetchData(): Promise<string> {
return fetch('https://api.example.com/data')
.then(response => response.json());
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(er ror));
async/await
非同期操作を同期的に扱うことができるため、コードをより読みやすく、管理しやすくなります。
async function fetchData(): Promise<string> {
const response = await fetch('https://api.example.com/data');
const data = await response. json();
return data;
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error ));
RxJS
リアクティブプログラミングライブラリで、非同期操作をストリームとして扱うことができます。
import { from, map } from 'rxjs';
function fetchData(): Observable<string> {
return from(fetch('https://api.example.com/data'))
.pipe(map(response => response.json()));
}
fetchData()
.subscribe(data => console.log(data), error => console.error(error));
typescript
