fetch api

今日のTILテーマは初めて聞いたAPI fetchapiについてのまとめです
まず、fetch apiは
API

非同期HTTPリクエストの書き込みが容易

XMLHTTPRequestに代わる

Promiseベースの操作

fetch APIの使用
fetchの基本応答結果応答オブジェクトは、jsonまたはtextに変換する処理が必要である.blob画像処理用

const $image = document.createElement('img')
                const imageUrl = '이미지 주소'
                fetch(imageUrl)
                .then(res => {
                    return res.blob()
                })
                .then(data => {
                    const url = URL.createObjectURL(data)

                    console.log(url)

                    $image.src = url

                    document.querySelector('body').appendChild($image)
                })

もう一つ重要な事実があります!
fetchは404などのHTTPエラーを拒否しません.
実際にネットワーク障害が発生したり、リクエストが完了しなかったりした場合にのみ拒否されます.
したがって、サーバリクエスト中にエラーが発生した場合、thenにも低下します.
responseのstatus codeまたはokをチェックしたほうがいいです!
まだあります.res.okはstatusが200~299の間だけtrueを返します!

一日の終わり

🖤 実践の学習と理解には長い時間がかかる.
🖤 本当にこれから一人でこのようなコードを作ることができますか?🙄
🖤 また、エラーが発生した場合は、検索して修正し、次のレッスンに進みます.見つからない場合は...ふんふん😱