logo
TypeScriptでPromiseを使う
TypeScript

TypeScriptでPromiseを使う

作成日：2021年08月21日
更新日：2021年08月21日

Promiseを使って、ファイルをサーバーなどにアップロードするというイメージのコードを作ってみます。

まずは、upload関数を作ります。

upload関数の引数は、imageFileとしました。

imageFileの型指定をstringとします。

ts
let upload = function (imageFile: string) {};

この関数は、Promiseを返すつもりです。

Promiseに『<>』を入力し、『』の中にimageFile: stringを指定します。

ts
let upload = function (imageFile: string): Promise<{ imageFile: string }> {};

imageFile関数の中で、new Promiseを返します。

ts
let upload = function (imageFile: string): Promise<{ imageFile: string }> {
return new Promise(());
};

成功したときの処理を設定していきます。

今回は、console.log()で処理の状況を表示するようにします。

また、処理が成功したときに resolve を引き渡すようにするため、アロー関数を使います。

返したいのは、imageFile です。

resolve の中のキーと値は、共に imageFile を設定します。

ts
let upload = function (imageFile: string): Promise<{ imageFile: string }> {
return new Promise((resolve) => {
console.log(`ステータス：${imageFile}`);
resolve({ imageFile: imageFile });
});
};

また、3 秒後に resolve を引き渡すよう設定したいため、setTimeout関数を使います。

ts
let upload = function (imageFile: string): Promise<{ imageFile: string }> {
return new Promise((resolve) => {
console.log(`ステータス：${imageFile}`);
setTimeout(() => {
resolve({ imageFile: imageFile });
}, 3000);
});
};

画像ファイルを転送するというイメージで、transfer 変数を作成してみましょう。

ts
let transfer;

upload 関数を使ってみます。

処理手順は、まず『ステータス：アップロード中...』という内容が表示され、その後 transfer 変数で処理された後、『ステータス：アップロードが完了しました』という内容が表示されるようにします。

はじめに、『ステータス：アップロード中』を表示します。

ts
upload("アップロード中...");

確認すると、

image2

『ステータス：アップロード中...』が表示されました。

次に、then を使って、『ステータス：アップロードが完了しました』が表示されるまでの処理を行います。

その際、レスポンスされた内容を転送する処理を作成してみます。

ts
upload("アップロード中...").then((res) => {
transfer = res;
return upload("アップロードが完了しました");
});

確認すると、

image3

『ステータス：アップロード中...』が表示した 3 秒後に、『ステータス：アップロードが完了しました』が表示されました。

お知らせ

Udemy Online Cource

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

カテゴリ

最新順

© 2024あずきぱんウェブスタジオ