How to fetch Azure Blob Storage with JavaScript
Tldr; This post introduces Azure Blob Storage and the Javascript fetch api and provides a code sample below for integrating public blobs quickly into your own applications.
The Azure Blob Service, provides scalable, cost-effective cloud storage for all your applications unstructured data.
With blob storage, developers pay only for what they use, and save money compared with on-premises storage options.
In web applications we can use blobs for anything from storing images and video content to actually hosting our client side application logic and style sheets for dynamic loading. In this way you only pay for hosting of the parts of the your site that users are actually using and you don’t need.
Choose from among four storage tiers, depending on how often you’ll access the data. Store performance-sensitive data in Premium, frequently accessed data in Hot, infrequently accessed data in Cool, and rarely accessed data in Archive. If you want to get started with Azure check out the link below for a free account.
The fetch API in JavaScript is used for making client side web requests.
While fetch natively supports JSON responses, it can be extended with the window.DOMParser to support XML data such the data returned from the Blob Storage REST API as in the sample below.
To learn more about what’s possible check out the blob service rest api docs below:
There you have it you have the code you need to get started with client side consumption of Azure Blob Storage hope this helps you with your azure journey.
About the Author
Aaron (Ari) Bornstein is an avid AI enthusiast with a passion for history, engaging with new technologies and computational medicine. As an Open Source Engineer at Microsoft’s Cloud Developer Advocacy team, he collaborates with Israeli Hi-Tech Community, to solve real world problems with game changing technologies that are then documented, open sourced, and shared with the rest of the world.
