我想 获取多张图片并将其转换为blob 。我是承诺的新手,我已经尝试但我无法通过。
下面是一个.fetch()
承诺
fetch('http://cors.io/?u=http://alistapart.com/d/_made/d/ALA350_appcache_300_960_472_81.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
document.getElementById('myImage').src = objectURL;
});
现在多个.fetch()
承诺(不起作用)
var promises = [];
for (var i = values.length - 1; i >= 0; i--) {
promises.push(fetch(values[i]));
}
Promise
.all(promises)
.then(function(response) {
for (var i = response.length - 1; i >= 0; i--) {
return response[i].blob();
}
})
.then(function(blob) {
console.log(blob.length); //undefined !!!
for (var i = blob.length - 1; i >= 0; i--) {
console.log(blob[i]);
lcl_images[i].value = URL.createObjectURL(blob[i]);
document.getElementById(lcl_images[i].id).src = objectURL;
}
})
.catch(function(error) {
console.log(error);
});
答案 0 :(得分:7)
一般规则是,承诺链成功路径中的完全同步的中间步骤可以与下一步合并,允许从链中省略一个then()
。
该声明实际上有一个附带条件,涉及中间捕获,但这个答案就足够了。
因此,如果.blob()
方法是同步的(它返回一个值),则只需要一个.then()
,而不是两个。
以下两种方法都利用Array.prototype.map(),两者都应该有效(尽管它们在错误条件下会有所不同):
<强> 1。简单.map()
包含Promise.all()
var promises = values.reverse().map(fetch); // you may need .reverse(), maybe not. I'm not 100% sure.
return Promise.all(promises).then(function(responses) {
responses.forEach(function(r, i) {
var imageObj = lcl_images[i],
element = document.getElementById(imageObj.id);
imageObj.value = URL.createObjectURL(r.blob());
if(element) { //safety
element.src = imageObj.value;
}
});
return responses; // here, return whatever you want to be made available to the caller.
}).catch(function(error) {
console.log(error);
});
如果您愿意,可以写下:
return Promise.all(values.reverse().map(fetch)).then(function(responses) {
// ...
});
<强> 2。 .map()
中的详细信息遵循简单的Promise.all()
var promises = values.reverse().map(function(val, i) {
return fetch(val).then(function(result) {
var imageObj = lcl_images[i],
element = document.getElementById(imageObj.id);
imageObj.value = URL.createObjectURL(result.blob());
if(element) { //safety
element.src = imageObj.value;
}
return result; // here, return whatever you want to be made available to the caller.
});
});
return Promise.all(promises).catch(function(error) { // return a promise to the caller
console.log(error);
});
注意:
fetch()
失败,imageObj.value ...
和element.src = ...
内容,即使一个或多个fetch()...
失败也是如此。任何单一故障都会导致Promise.all(promises)
返回被拒绝的承诺。.blob()
方法会返回一个promise,而不是一个值。答案 1 :(得分:2)
您在第一次响应后从then处理程序返回,而您需要做的是返回blob列表:
Promise
.all(promises)
.then(function(response) {
// CHANGED HERE
var blobPromises = [];
for (var i = response.length - 1; i >= 0; i--) {
blobPromises.push(response[i].blob());
}
return Promise.all(blobPromises);
})
.then(function(blob) {
console.log(blob.length);
for (var i = blob.length - 1; i >= 0; i--) {
lcl_images[i].value = URL.createObjectURL(blob[i]);
document.getElementById(lcl_images[i].id).src = objectURL;
}
})
.catch(function(error) {
console.log(error);
});