承诺Pouch不会从调用返回到内部代码 [英] Promise with Pouch not returning from call to inside code
问题描述
我有一个似乎在以前但不是现在起作用的承诺。
我想我已经准备好了一切，但是在调用.get之后，它永远都无法实现
它跳转到末尾并超出了promise，然后返回到return（在.get内部），然后返回到resolve，然后退出。 / p>
如果有错误，应该应该抓住但没有，那么它怎么会错过for循环？
这是代码：
函数readAllImagesFromPouch（id，imageDisplay）{
返回新的Promise（函数（解析，拒绝）{
var startElement = document.getElementById（imageDisplay）;
var image =;
//获取此id的所有附件
DB_TaskImages.get（id，{附件：true}）。然后（函数（doc）{
用于（doc._attachments中的var key ）{
DB_TaskImages.getAttachment（doc._id，key）.then（函数（blob）{
var img = document.createElement（’img’）;
blob = resizeImage（blob， 100， 60）;
var url = URL.createObjectURL（blob）;
img.src =网址；
//警报（img.outerHTML）;
//startElement.appendChild(img）;
$（startElement）.append（< div class ='row'style ='border：1px solid black'>< div class ='col-xs-10'> +
img.outerHTML +
< / div> +
< div class ='col-xs-1'style ='padding-top：20px'> +
< img src ='.. / Images / delete.png'alt ='删除'class ='taskimage'> +
< / div>< / div>
）;
的回报；
}）。catch（function（）{
console.log（ doc._id无附件： + doc._id +和密钥： +密钥）;
}）
}
回报；
}）。then（function（）{
resolve（）;
}）。catch（function（err）{
console.log（ id不存在该图像： + id）;
showMsg（ id不存在的图像： + id）;
reject（err）;
}）
}）; //承诺结束
}
从此代码中调用它：
readAllImagesFromPouch（ 006， divImages）。then（function（）{
}）。catch（function（err ）{
console.log（使用err捕获readAllImagesFromPouch： + err）;
}）
谢谢
Tom
这可能不是执行此操作的正确方法，但我想显示更改后的代码，以查看它是否正确。这确实是@jaromandaX回答的另一个问题的一部分。
这确实是同一问题-如何在承诺中履行承诺。
在您的代码中查看resizeImage代码有一个问题，因为blob并不是真正的blob，这就是我不得不在另一个示例中使用blobutil的原因。这真的是一个关于如何按诺言处理问题的问题-如果我需要这样做的话。
我的旧代码是：
function resizeImageOld（blob，maxWidth，maxHeight）{
//将img src设置为ObjectURL
var showImage = document.createElement（'img '）;
var url = URL.createObjectURL（blob）;
showImage.src =网址;
var newImage;
showImage.onload = function（）{
URL.revokeObjectURL（showImage.src）;
var canvas = document.createElement（ canvas）;
var ctx = canvas.getContext（ 2d）;
var MAX_WIDTH = maxWidth，maxHeight;
var MAX_HEIGHT = 60;
var width = showImage.width;
var height = showImage.height;
if（宽度>高度）{
if（宽度> MAX_WIDTH）{
height * = MAX_WIDTH /宽度;
width = MAX_WIDTH;
}
} else {
if（height> MAX_HEIGHT）{
width * = MAX_HEIGHT / height;
高度= MAX_HEIGHT；
}
}
canvas.width = width;
canvas.height =高度;
ctx.drawImage（showImage，0，0，宽度，高度）;
newImage = canvas.toDataURL（ image / png）;
}
返回newImage;
}
做出承诺是一种将Blob调整大小并附加到DOM处理另一个图像之前。这样，它就不会执行onload事件。
我将其更改为：
function resizeImage（blob，maxWidth，maxHeight）{
//将img src设置为ObjectURL
return new Promise（function（resolve，reject）{
var showImage = document.createElement（'img'）;
var url = URL.createObjectURL（blob）;
var newImage;
showImage.onload = function（）{
URL.revokeObjectURL（showImage.src）;
var canvas = document.createElement（ canvas）;
var ctx = canvas.getContext（ 2d）;
var MAX_WIDTH = maxWidth，maxHeight;
var MAX_HEIGHT = 60;
var width = showImage.width;
var height = showImage.height;
如果（宽度>高度）{
如果（宽度> MAX_WIDTH）{
高度* = MAX_WIDTH /宽度；
宽度= MAX_WIDTH;
}
}否则{
if（height> MAX_HEIGHT）{
宽度* = MAX_HEIGHT /高度；
高度= MAX_HEIGHT；
}
}
canvas.width = width;
canvas.height =高度;
ctx.drawImage（showImage，0，0，宽度，高度）;
newImage = canvas.toDataURL（ image / png）;
resolve（newImage）;
}
showImage.src = url;
}）
}
然后我更改了代码，现在将其称为对以下内容的承诺，并想看看这是否是处理它的正确方法，还是只是跳出承诺并继续进行下去，然后再经过其他图像后再回来。似乎确实更好，但不确定。
您的代码：
函数readAllImagesFromPouch（id，imageDisplay）{
var startElement = document.getElementById（imageDisplay）;
var img =;
var imgBlob;
var base64str;
var fileName;
ClearImagePanel（）;
//获取此ID的所有附件
return DB_TaskImages.get（id，{attachments：true}）。then（function（doc）{
//链接到的承诺-以下所有任务将串行执行，而不是并行执行-可以更改
var promise = Promise.resolve（）;
Object.keys（doc._attachments）.forEach（function（key）{
promise = promise.then（function（）{
return DB_TaskImages.getAttachment（doc._id，key）.then（函数（blob）{
img = document.createElement（'img'）;
返回resizeImage（blob， 100， 60）。then（function（ blob）{
var url = URL.createObjectURL（blob）;
img.src = myUrl;
$ {startElement）.append（img.outerHTML）;
}}
}）。catch（function（err）{
alert（ doc._id没有附件： + doc._id +和key： + key）;
}）
}）;
}）;
的回报承诺；
}）。catch（function（err）{
console.log（ id不存在的图像： + id）;
showMsg（ id不存在的图像： + id ）;
throw err;
}）
}
是
我还有另外两个我似乎在其他地方找不到的问题。
-
在链的最初承诺（在本例中为DB_TaskImages.getAttachment）上，我们是否要执行返回，因为我们要返回接下来的然后？我不确定，因为我看到了第一个承诺有回报的例子，而另一些却没有回报。
-
在我的例子中，对于 return resizeImage承诺，我是否需要一个.then及其后的内容？我注意到在您做出退还承诺之后，没有.then，但是有一个陷阱。
只是好奇。
谢谢。
I have a promise that seemed to work before but not now.
I think I have everything in place but after the .get is called, it never gets to the for loop.
It jumps to the end and out of the promise, then back to the return (inside the .get) then to the resolve and then out.
If there were an error, it should have jumped to the catch but didn't, so how does it miss the for loop?
Here is the code:
function readAllImagesFromPouch(id, imageDisplay) {
return new Promise(function (resolve, reject) {
var startElement = document.getElementById(imageDisplay);
var image = "";
// Get all attachments for this id
DB_TaskImages.get(id, { attachments: true }).then(function (doc) {
for (var key in doc._attachments) {
DB_TaskImages.getAttachment(doc._id, key).then(function (blob) {
var img = document.createElement('img');
blob = resizeImage(blob, "100", "60");
var url = URL.createObjectURL(blob);
img.src = url;
//alert(img.outerHTML);
//startElement.appendChild(img);
$(startElement).append("<div class='row' style='border:1px solid black'><div class='col-xs-10'>" +
img.outerHTML +
"</div>" +
"<div class='col-xs-1' style='padding-top:20px'>" +
"<img src='../Images/delete.png' alt='Delete' class='taskimage'>" +
"</div></div>"
);
return;
}).catch(function () {
console.log("No attachment for doc._id: " + doc._id + " and key: " + key);
})
}
return;
}).then(function () {
resolve();
}).catch(function (err) {
console.log("Image not there for id: " + id);
showMsg("Image not there for id: " + id);
reject(err);
})
}); // end of promise
}
And it is called from this code:
readAllImagesFromPouch("006", "divImages").then(function () {
}).catch(function (err) {
console.log("In catch for readAllImagesFromPouch with err: " + err);
})
Thanks,
Tom
This may not be the correct way to do this but I wanted to show the code I changed to see if it was the correct way to do this. This is really part of the other question that @jaromandaX answered.
This is really the same question - how to handle a promise in a promise.
Looking at your code the resizeImage code had a problem because the blob was not really a blob, I think, which was why I had to use blobutil in my other example. This is really a question on how to handle this with a promise - if I needed to go this way.
My old code was:
function resizeImageOld(blob, maxWidth, maxHeight) {
// Set img src to ObjectURL
var showImage = document.createElement('img');
var url = URL.createObjectURL(blob);
showImage.src = url;
var newImage;
showImage.onload = function () {
URL.revokeObjectURL(showImage.src);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = maxWidth, maxHeight;
var MAX_HEIGHT = 60;
var width = showImage.width;
var height = showImage.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(showImage, 0, 0, width, height);
newImage = canvas.toDataURL("image/png");
}
return newImage;
}
Making it a promise was a way to get the blob resized and appended to the DOM before it handled another image. This way it never did the onload event.
I changed it to:
function resizeImage(blob, maxWidth, maxHeight) {
// Set img src to ObjectURL
return new Promise(function (resolve, reject) {
var showImage = document.createElement('img');
var url = URL.createObjectURL(blob);
var newImage;
showImage.onload = function () {
URL.revokeObjectURL(showImage.src);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = maxWidth, maxHeight;
var MAX_HEIGHT = 60;
var width = showImage.width;
var height = showImage.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(showImage, 0, 0, width, height);
newImage = canvas.toDataURL("image/png");
resolve(newImage);
}
showImage.src = url;
})
}
I then changed your code, which now calls this promise to the following and wanted to see if this was the correct way to handle it or would it just jump out of the promise and continue on and come back later after it went through the other images. It does seem better but not sure.
Your code:
function readAllImagesFromPouch(id, imageDisplay) {
var startElement = document.getElementById(imageDisplay);
var img = "";
var imgBlob;
var base64str;
var fileName;
ClearImagePanel();
// Get all attachments for this id
return DB_TaskImages.get(id, { attachments: true }).then(function (doc) {
// a promise to chain to - all following tasks will be performed in series, not parallel - this can be changed
var promise = Promise.resolve();
Object.keys(doc._attachments).forEach(function (key) {
promise = promise.then(function () {
return DB_TaskImages.getAttachment(doc._id, key).then(function (blob) {
img = document.createElement('img');
return resizeImage(blob, "100", "60").then(function(blob) {
var url = URL.createObjectURL(blob);
img.src = myUrl;
$(startElement).append(img.outerHTML);
})
}).catch(function (err) {
alert("No attachment for doc._id: " + doc._id + " and key: " + key);
})
});
});
return promise;
}).catch(function (err) {
console.log("Image not there for id: " + id);
showMsg("Image not there for id: " + id);
throw err;
})
}
Is this right or is it the same type of anti-pattern you mentioned before?
I also had two other questions I couldn't seem to find elsewhere.
On the initial promise of a chain (DB_TaskImages.getAttachment, in this case), do we do a "return" because we are returning to the following "then"? I was not sure, since I had seen examples where there was a return and others where there wasn't a return on the first promise.
In my example, for the "return resizeImage" promise, do I need a .then after it as well as the catch? I noticed that after you did a "return promise", there was no .then but there was a catch.
Just curious.
Thanks.
这篇关于承诺Pouch不会从调用返回到内部代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
