…Despite the ubiquitousness of needing to make a POST request from a browser (or, perhaps for this very reason) there seems to be just as many ways, methods, libraries, and standards of implementing http functions in JavaScript as there are people doing said implementing. Between the adoption of the fetch api in browsers and the prevalence and power of Promises in JS, asynchronous http needn’t be a hassle!

/*
...happily processing some data in a browser, when suddenly...
....panik!
you need to complete a portion of this processing elsewhere on some server...:
*/

const handleBlobPOST = (blob: Blob, destination: string) => {
    /*

   `blob` is some data you've been processing available in the DOM
    (such as a photo or audio) .

    some blob objects to upload:
    */
    const file = blob;

    // file is wrapped in `formData` for POST:
    const formData = new FormData();

    /*
     `name: 'file'` is the ID the server will use to find and parse
     the POSTs contents of fileName: 'fluffy.chonk':
    */
    formData.append('file', file, 'fluffy.chonk');

    // make the POST w/ fetch, no one should be using IE anyway xD:
    fetch(destination, {
    method: 'POST',
    body: formData
  }) // make, then handle the Promise:
    .then(response => {
      /*
      we can .then wait for the Promise Object `response`...
      */
        response.json().then(data => {
             /*
             ...and .then once we have the the `response` Object,
              take only the  important json part:
             */
            console.log('received JSON!');

            /*
            but wait- json is unstructured, how can we continue
            working with this data?
            zing the response json (here just as key: value pairs)
             into an Array:
            */
            let ix;
            let results = [];
            for (ix in data) {
                results.push([ix, data[ix]]);
            }

            /*
            sort the Array by descending value:
            while the json returned is to remain unstructured,
            with this Array we can preform all sorts of nifty operations,
            like so:
            (key: value pairs in this case are string: number,
              so sort pairs by decending value)
            */
            results = results.sort((a, b) =>  b[1] - a[1]);

            // print the sorted scores:
            let i;
            for (i in results) {
                console.log(i + ' ' + results[i]);
            }
        });
    })
    .catch(error => {
        console.error(error);
    });
};

/*
Now that we've got everything sorted by Promise,
we can use this as an async function:
*/
async function postClassifyWaveform() {
    // posts blob directly:
    return handleBlobPOST(someBlobs, '/cool_endpoint');
}

Some extra notes spawned from web demos with Merlin AI:

-Jess