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

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

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

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

let upload = function (imageFile: string) {}

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

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

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

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

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

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

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

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

返したいのは、imageFile です。

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

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

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

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

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

let transfer

upload 関数を使ってみます。

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

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

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

確認すると、

image2

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

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

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

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

確認すると、

image3

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

ブログ一覧