What is a "BLOB" of a fetch response?

JavaScript
1

I understand that a response of a fetch(), if there is one, will arrive asynchronously as some kind of a “promise” Object, but what is a “BLOB” of such a response Object.

The first time I learned about the term BLOB ("Binary Large OBject) was about BIOS or firmware.
Why should we talk about BLOBs in the context of vanilla JavaScript? :sweat_smile:

2

Blobs would be good in generating images in the browser or performing client-side image manipulation, such as resizing, cropping, applying filters or transformations, and so on.

3

A BLOb is binary data. There is no specified format, everything in the BLOb requires the software/developer to know what the format is.

If you search for other answers and for articles you will find plenty about that.

4

By “There is no specified format” do you mean that there is no file extension like .json or .yml or .txt or .exe and so forth?

5

There is no predefined “first in the blob there is 16 bytes of data that identify its type, and then there’s…”
Like in an HTML page, first there is an HTML tag. It has a specified format. Blobs dont have that. They are unspecified data; it’s just “whatever the fetch got, regurgitate it. Maybe its text, maybe its binary gibberish, but spit it out”.

6

I said nothing about file extension. If I meant to say something about file extensions then I would have said file extension(s).

7

Fair enough.

So, what did you mean by specified format?

8

What he means is that when you call fetch there are zero runtime guarantees of what you get back. Depending on the URL it might be Javascript, CSS, an exe file, a zip file, a movie,…

The lowest common denominator of all of these is that they are blobs of data. Hence blob.

9

Coming across this thread help me out in a game that I’m developing as I’m doing what is called lazy preloading and I thought to myself hey this could be useful with using blob.

// Function to fetch and load image
const fetchAndLoadImage = async (imagePath) => {
    try {
        let response = await fetch(imagePath);
        let blob = await response.blob();
        let img = new Image();
        img.src = URL.createObjectURL(blob);
        return img;
    } catch (error) {
        console.error(error);
    }
};

        // parse the response as JSON
        const data = await response.json();

        id = data.first_id;
        let imagePath = baseUrl + data.image;
        imageObj = await fetchAndLoadImage(imagePath);
        await updateImageSource(imageObj);
        await fetchWord(); // fetch the answers
        await fetchQuestion();

maybe this might help?

10

Quite off-topic, but it’s either preloading (loading something before you need it) or lazy loading (deferring the loading of something until you really need it). Lazy preloading is an oxymoron :slightly_smiling_face:

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.