Javascriptのfetchメソッドは非同期的に実行され、thenメソッドの中でレスポンスを処理するというのが一般的な使い方だと思います。
今回、このfetchのレスポンスをthenメソッドで処理するのではなく、変数に格納する方法について共有したいと思います。
通常のfetchメソッドの使い方
おそらく通常のfetchメソッドは下記のように記述すると思います。
これだけで数行使うし、thenメソッドの中にしか続きを書けないという制限があります。
const url = 'http://fuga.com/img/sample.png'
fetch(url)
.then(response => {
//responseに対する処理
})thenメソッドを使わずにfetchしようとしてみる
thenメソッドを使わずにfetchしようと考える時、下記のようなコードを思いつきます。
しかしこれはうまく動きません。
response変数にはPromiseオブジェクトが入ってしまいます。
const url = 'http://fuga.com/img/sample.png'
response = fetch(url)
console.log(response) //Promiseオブジェクトが入っているfetchメソッドの結果を変数に格納する
下記のようにasync/awaitを使うとfetchメソッドの結果を変数に格納することができます。
取得自体のコードは1行になりthenメソッドも使う必要がなくなりました。
;(async function() {
const url = 'http://fuga.com/img/sample.png'
response = await fetch(url)
console.log(response) //Responseオブジェクトが入っている
})()
awaitはasync関数の中でしか使えません。上記では最終行に()を付けることでasync関数を即時関数として実行しています。なのでawaitを使う可能性がある時はすべてのコードをasync即時関数で囲ってしまってもいいのではないかなと思います。（下記のようなイメージ）
;(async function() {
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
const url = 'http://fuga.com/img/sample.png'
response = await fetch(url)
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
})()Blobとして取得する
先ほどはヘッダー情報などを持ったresponseとして取得していましたが、下記のように書くことでblobとして取得することもできます。
let blob = await (await fetch(url)).blob()fetchを関数としてまとめる
先のコードではawaitが入れ子になっていてわかりにくいので、関数としてまとめてしまうのもありだと思います。
async function url2Blob(url) {
return (await fetch(url)).blob()
}
下記のように使います。
;(async function() {
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
const url = 'http://fuga.com/img/sample.png'
const blob = await url2Blob(url)
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
//なにかしらの記述
})()
async function url2Blob(url) {
return (await fetch(url)).blob()
}
下記の記事を参考にさせていただいたのですが、thenメソッドを使わずにfetchする方法をずっと探してたので、とても感謝しております。
JavaScriptでdata URLとblobを相互に変換する方法
以上、Fetch Apiの取得結果を変数に入れる方法でした！
