javascript - 连接多个 API 调用的结果 - Javascript

Question

我很抱歉，因为我对 javascript 非常陌生并且没有经验，所以我的代码非常简陋，我会尽我所能解释自己。

我正在调用 API 以获取 blob，然后将其转换为 base64。然后我可以将这个 base64 字符串传递给 .map 数组中的一个单独的脚本——这样就可以多次调用我的脚本。但我想要做的是将base64 字符串连接成一个字符串，并通过我的脚本调用一次。

我知道这是异步的，我可能需要一些回调，但我不确定如何在我的情况下执行此操作。本质上，我想让 reader.onloadend 函数中的“base64data_1”变量在 .map 数组之外可用，但 reader.onloadend 函数是最后执行的操作。

function getPhoto() {

    const root = 'https://public-api.konectech.com/PROD/api/';

    var acc = document.getElementById("accID").value;

    var photoId1 = document.getElementById("photoID1").value;
    var photoId2 = document.getElementById("photoID2").value;
    var photoId3 = document.getElementById("photoID3").value;

    var root1 = (root + acc + "/attachment/id/overlay/")

    let uri = [root1 + photoId1,root1 + photoId2,root1 + photoId3];

    let filenames = [photoId1,photoId2,photoId3];

    var base64Array = [];

    let base64 = uri.map (function (url) {

    var xhr = new XMLHttpRequest();

        xhr.open('GET', url);
        xhr.setRequestHeader("accept", "image/jpg");
        xhr.setRequestHeader("content-type", "application/json");
        xhr.setRequestHeader("x-api-key", "xxxxxxxx");
        xhr.responseType = "blob";

        xhr.send();

        xhr.onload = function (data, filename, mime) {

        var filename = (url.slice(url.lastIndexOf('/') + 1) );

        const blob = new Blob([this.response], {type: mime || 'application/octet-stream'});

        var reader = new FileReader();
        reader.readAsDataURL(blob);  
        reader.onloadend = function() {

            var base64data = reader.result;

            const base64data_1 = (base64data.slice(base64data.lastIndexOf(',') + 1) );

            //console.log([base64data_1]);

            base64Array = base64data_1;

            console.log([base64Array]);

            return [base64Array];

            };
        }

    });
    //console.log([base64Array]);
}

我希望如果我可以访问将“base64data_1”变量作为数组传递，那么我可以使用 promise.all 和 .join 获得类似于下面的所需结果：

function getPhoto() {

    var array =['test_1','test_2','test_3','test_4','test_5'];

    var items = [];

    let newArray = array.map (function (array_1) {

        items = array_1 + '_appended';
        console.log(items);
        return [items];     
    })

    console.log(newArray);

    Promise.all(newArray)
        .then( function (arrayOfValues) {
        console.log(arrayOfValues.join(","));   // returns test_1_appended,test_2_appended,test_3_appended,test_4_appended,test_5_appended
      })
    }

标签： javascriptarraysapi