Is it possible to convert a Blob to Uint8Array without using a callback and just using JavaScript?

How to return the uint8array for the calling variable uint8data?

let str='content';

str2blob=(str,type='text/plain')=>new Blob([str],{type:type});

let blob=str2blob(str);

function blob2uint(blob){
    new Response(blob).arrayBuffer().then(buffer=>{
        uint=[...new Uint8Array(buffer)];
        console.log("Uint8Array",uint);
        return uint;
    });
}

let uint8data=blob2uint(blob);
console.log(uint8data); //Show Uint8Array

Is it possible to convert a Blob to Uint8Array without using a callback and just using JavaScript?

How to return the uint8array for the calling variable uint8data?

let str='content';

str2blob=(str,type='text/plain')=>new Blob([str],{type:type});

let blob=str2blob(str);

function blob2uint(blob){
    new Response(blob).arrayBuffer().then(buffer=>{
        uint=[...new Uint8Array(buffer)];
        console.log("Uint8Array",uint);
        return uint;
    });
}

let uint8data=blob2uint(blob);
console.log(uint8data); //Show Uint8Array

• javascript
• blob
• arraybuffer
• uint8array

• Do you have a problem with the asynchrony (and need to access it synchronously), or do you just not like the callback function (in which case async/await would be a solution)? – Bergi Commented Sep 1, 2021 at 13:48
• Precisely, how to make the uint8data variable wait for the return of the blob2uint function? – Spiderpoison Commented Sep 1, 2021 at 14:18
• Use async/await to do that. The entire function that uses uint8data will bee asynchronous, there's no way to avoid that. – Bergi Commented Sep 1, 2021 at 17:24
• I think I didn't express myself correctly. I will try again. What I need is for the blob2uint function to return the data to the uint8data variable in the same way that the str variable receives the data from the srt2blob function, without using a callback function. Could you give me an example? The blob variable was created just to illustrate my example. – Spiderpoison Commented Sep 1, 2021 at 18:51
• async/await does not use any callback functions. But no, you cannot immediately return the data from the function, best you can do is to return a promise for it. It's asynchronous, deal with it - or don't use blobs. See also stackoverflow./q/17068610/1048572 – Bergi Commented Sep 1, 2021 at 20:49

1 Answer 1

Assuming this is somewhere inside a function, you can make it async and use await to wait for the Promise to plete once you return it from the blob2uint function:

async function myBlobToUIntDemo() {
  let str='content';

  str2blob=(str,type='text/plain')=>new Blob([str],{type:type});

  let blob=str2blob(str);  

  function blob2uint(blob){
      return new Response(blob).arrayBuffer().then(buffer=>{
          uint=[...new Uint8Array(buffer)];
          console.log("Uint8Array",uint);
          return uint;
      });
  }
  
  let uint8data = await blob2uint(blob);
  console.log(uint8data); //Show Uint8Array
}

Let's spike this up with some more information:

Why do I need a callback in the first place?

Because you are doing asynchronous work by pulling the arrayBuffer from a response. JavaScript (as far as I know) only runs in a single thread. Waiting for a website in your code without using a callback would halt all other JavaScript execution on your page if you didn't put it in the background somehow; that's what callbacks and Promises do for you (from the outside at least).

Promises?

Functions doing asynchronous work typically return a Promise object, that promises to provide you with the value once the work pletes (by calling the function passed in the then callback with it) or an error in case something goes wrong (by calling the catch callback with it).

async / await

async / await was introduced to make working with Promises a bit nicer and readable, reducing the need for callbacks a lot. You can read more about that in this MDN article.

The code block above only contains the bare minimum changes to get things working. Let's simplify that a bit more!

async function myBlobToUIntDemo() {
  let str = 'content';
  let str2blob = (str, type = 'text/plain') => new Blob([str], { type: type });
  let blob = str2blob(str);

  const buffer = await new Response(blob).arrayBuffer();
  const uint = [...new Uint8Array(buffer)];
  
  console.log(uint);
}

Note that this returns a Promise as well (this automatically happens if you mark your function as async) so make sure to remember that if you were to use this function anywhere in your code.