こんにちは、@yoheiMuneです。 「fetchを用いたAjax通信を行う」で紹介したfetchAPIについて、バイナリデータを扱う実装をブログに書きたいと思います。 目次 どのような場面で使うのか フロントエンドをReact / Vue / Angular などSPA(Single Page Application)で構成している場合に、サーバーAPIがバイナリーデータを返却する時に使います。例えば、サーバーAPIがPDFを返却したり、QRコード(=画像)を生成して返却する場合には、Ajax通信でバイナリーデータを扱う必要があります。 fetch APIでバイナリーデータを扱う 具体的には以下のように実装します。 (async () => { async function getImage() { // 送信先のURL. const url = '/image/001.jpg' //
![[フロントエンド] fetchAPIで画像(バイナリーデータ)を取得する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/ef078e9a2cec6b06eeeec67a2ceea46f5d286e8d/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F597.jpg)