お世話になっております。
Promiseの戻り値の扱い方を教えていただきたいです。
■やりたいこと
Promiseで処理した配列の値を取得したい。
■プログラム
外部JSONファイルに書かれた画像のパスにアクセスしてBase64Imageに変換(5回繰り返し)。←ここまでOK
変換したBase64Imageの文字列を渡して(←今ここ)、PDFに画像を表示させる予定。
■できないこと
後述のプログラムで、
myData
に、
img_image01:base64,iVBORw0KG(…中略…)'
img_image02:base64,iVBORw0KG(…中略…)'
img_image03:base64,iVBORw0KG(…中略…)'
といった感じで、Base64Imageの文字列は渡せているのですが、
console.log(resolvedata)
すると、
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: Array(1)}
とPromise
でラップされてたものが出てきてしまいます。(マニュアルどうりですが。)
Array(1)
の部分だけ取り出して、配列として使いたいです。
例えば、
resolvedata['img_image01']
とすると
'data:image/png;base64,iVBORw0KG(…中略…)'
が返ってくるイメージです。
// ------------------------------------------------------------
// Promiseで順番に画像を変換してmyDataに格納
// ------------------------------------------------------------
var resolvedata = getContent().then((myData) => {
getBase64Image(myData[0]['path_img'], myData[0]['image01'], myData);
return myData;
}).then((myData) => {
getBase64Image(myData[0]['path_img'], myData[0]['image02'], myData);
return myData;
})
(…中略…)
.then((myData) => {
getBase64Image(myData[0]['path_img'], myData[0]['image05'], myData);
return myData;
}).catch(() => {console.log('error')});
// ------------------------------------------------------------
// 画像のパスが書かれた外部JSONファイルを取り込んでmyDataに格納 (Promise)
// ------------------------------------------------------------
function getContent() {
return new Promise((resolve,reject) => {
httpObj = new XMLHttpRequest();
httpObj.open('get', '(任意のファイル).json', true);
httpObj.send(null);
httpObj.onload = function(){
var myData = JSON.parse(this.responseText);
resolve(myData);
}
});
}
// ------------------------------------------------------------
// ファイルを指定してBase64に変換 (then)
// ------------------------------------------------------------
function getBase64Image(imgpath, imgfile, myData) {
return new Promise((res,rej) => {
if (imgfile == '') {
res();
} else{
var path = imgpath;
var thisimagekey = 'img_' + imgfile.split('.')[0];
var getimg = '(任意のURL)' + path + '/' + imgfile;
var encoding = false;
if(encoding) return;
encoding = true;
var xhr = new XMLHttpRequest();
xhr.open('GET',getimg);
xhr.responseType = 'arraybuffer';
xhr.send(null);
xhr.onload = () => {
var array_buffer = xhr.response;
Base64_From_ArrayBuffer_Async(array_buffer,function(base64){
var data_url = 'data:' + xhr.getResponseHeader('Content-Type') + ';base64,' + base64;
myData[0][thisimagekey] = data_url;
});
res(myData);
};
}
});
}
// ------------------------------------------------------------
// Base64に変換
// ------------------------------------------------------------
function Base64_From_ArrayBuffer_Async(ary_buffer,callback,increment){
var dic = [
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P',
'Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f',
'g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v',
'w','x','y','z','0','1','2','3','4','5','6','7','8','9','+','/'
];
var base64 = "";
var ary_u8 = new Uint8Array( ary_buffer );
var num = ary_u8.length;
var n = 0;
var b = 0;
if(increment === undefined){
increment = 10240;
}
var i = 0;
var j = 0;
function f(){
while(i < num){
b = ary_u8[i];
base64 += dic[(b >> 2)];
n = (b & 0x03) << 4;
i ++;
if(i >= num) break;
b = ary_u8[i];
base64 += dic[n | (b >> 4)];
n = (b & 0x0f) << 2;
i ++;
if(i >= num) break;
b = ary_u8[i];
base64 += dic[n | (b >> 6)];
base64 += dic[(b & 0x3f)];
i ++;
j += 3;
if(j > increment){
j = 0;
setTimeout(f,1);
return;
}
}
var m = num % 3;
if(m){
base64 += dic[n];
}
if(m == 1){
base64 += "==";
}else if(m == 2){
base64 += "=";
}
callback(base64);
}
setTimeout(f,1);
}
何と書けば、myData
を取り出せるのでしょうか。
どうぞよろしくお願い致します。
Promise
が非同期処理であることは理解されていますでしょうか?resolvedata
をグローバル変数のように扱って強引に値を格納する方法も考えられますが、非同期処理であることを理解されてなければおそらく正しく扱えません(また実装としても好ましくありません)。最後に.then((resolvedata)=>{console.log(resolvedata)});
とメソッドチェーンをつなげてその中でresolvedata
として扱う方法が素直ではないでしょうか。resolvedata
のメソッドチェーン内にresolvedata
を入れることができるのは知りませんでした。。メソッドチェーン内で処理が完了できるように試してみます。