JavaScript with "then" and "BLOB" is a bit not comfortable for me to work with, is there any alternative?

JavaScript
1

The following JavaScript file loader works; the remote JavaScript file is loaded and effective.

This file loader has two then commands and a BLOB which give me a bit of an odd feeling.

var scriptFileURL = fetch('https://raw.githubusercontent.com/USER/REPOSITORY/main/FILE.js');
scriptFileURL.then(function(fetchResponse) {
    if (!fetchResponse.ok) {
        return false;
    } else {
        return fetchResponse.blob();
    }
}).then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob); // fetch URL
    var scriptFile = document.createElement("script");
    scriptFile.setAttribute("src", objectURL);
    scriptFile.setAttribute("type", "text/javascript");
    document.head.appendChild(scriptFile);
})

Credit for User:rapehem112 in Stack Exchange for this code.

Is there any way to use the general pattern of the code without the then commands or without a BLOB or without both?

2

You could use await instead of then, but I don’t think you can get rid of the Blob. Why would you want to though?

3

I just think it will be easier to read for me at least in the long run, without either or both.

4

This is a shorter code that brings the same result

var myFetch = fetch('https://raw.githubusercontent.com/USER/REPOSITORY/main/FILE.js');
myFetch.then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  var scriptFile = document.createElement("script");
  scriptFile.setAttribute("src", objectURL);
  scriptFile.setAttribute("type", "text/javascript");
  document.head.appendChild(scriptFile);
});

Credit for User:Ogglas from Stack Exchange

@rpkamp

I misunderstand why the term “BLOB” is a must here; why work with a “binary large object” when just loading a remote JavaScript?

Shouldn’t both functions, response and myBlob come before we return a response just for readability?

5

Have you ever worked with asynchronous functions before? Because that’s what these are. If you don’t know how they work I can well imagine you are confused by them.

2 Likes
6

I rewrote your code to use async/await as RĂ©mon suggested:

async function fetchAndAppend() {
  const res = await fetch('https://raw.githubusercontent.com/.../FILE.js');
  const blob = await res.blob();
  
  const objectURL = URL.createObjectURL(blob);
  const scriptFile = document.createElement('script');
  scriptFile.setAttribute('src', objectURL);
  document.head.appendChild(scriptFile);
}

fetchAndAppend().catch(console.error);

Does that make it any easier to understand?

If you’d like a refresher we have some good tutorials over on the main site:

3 Likes
7

Never before. I think I want to do it only with async/await.

8

Thanks a lot, dear James.

This code is indeed more intuitive and more ordinal for me personally.

I understand that in line three you named the variable blob and in line five you created the ObjectURL according to the data in myBlob.
Instead of blob and myBlob, shouldn’t both be blob or myBlob?

9

Sorry. Typo. Fixed now :slight_smile: (both should be blob).

1 Like
10

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