winJS 从函数未定义返回 var

Question

我想从我的本地硬盘中获取图像。我的函数返回未定义。

function getImageFromLocal() {
    var imageurl = 0;
    return new WinJS.Promise(function () {
        picturesLib.getItemAsync("APP Folder X").then(function (appfolder) {
            appfolder.getItemAsync("Subfolder X").then(function (file) {
                file.getItemAsync("Image.jpg").done(function (image) {
                    imageurl = URL.createObjectURL(image);
                });
            });
        });
    });
  return imageurl;
}

Answer 1

当使用异步 API 调用（如 StorageFolder.getItemAsync）时，将最终结果分配给局部变量并尝试返回该结果是行不通的。

此外，在你的代码中，你有两个 return 语句，其中第一个返回一个 promise，其中包装了以 .done 结尾的 promise 链的返回值，这就是给你未定义的东西。永远不会到达第二个 return 语句，即使到达，也会返回初始值 0，因为到那时异步代码不会执行。

我会进一步指出，使用新的WinJS.Promise根本不是你想要的，但我不会详细说明细节。如果你真的想要关于承诺及其工作原理的完整故事，请参阅我的免费电子书，使用 HTML、CSS 和 JavaScript 编程 Windows 应用商店应用程序，第二版，在第 3 章（基础知识）和附录 A（完整故事）中。

回到你的代码，我不完全确定你想做什么。使用以"Local"命名的函数时，建议尝试从应用数据中检索图像，但使用名为 picturesLib 的变量表明你来自图片库。让我分别谈一谈这些问题。

首先，如果您使用的是本地 appdata，则只需使用 ms-appdata:///local/folder1/folder2/image.jpg 格式的 URI，即可绕过此处显示的整个过程。您可以将这样的 URI 直接分配给 img.src 属性，它就可以工作了。这将同步工作，也适用于引用包内资源的 ms-appx:///URI。

其次，当处理图像时，您无法方便地使用URI引用，您需要获取其StorageFile并将其传递给URL.createObjectURL，其结果也可以分配给img.src，我想你知道。但是，为了省去一些麻烦，您可以将完整的相对路径与StorageFile.getFileAsync一起使用。这样，您就不必编写承诺链来导航文件夹结构，并将所有这些减少到单个调用中。也就是说，如果 pictureLib 是 Windows.Storage.KnownFolder.picturesLibrary 中的 StorageFolder，那么您可以使用：

 picturesLib.getFileAsync("App folder Xsubfolder ximage.jpg");

现在，对于您的原始函数，其目的是返回该图像的 URI，它必须返回一个承诺本身，并且调用方将 .done 附加到该承诺以获取结果。通过在 getFileAsync 的已完成处理程序中返回所需的值来正确执行此操作，但请确保使用 .then，它返回该返回值的承诺（.done 将返回未定义）。

function getPicturesLibUriAsync(relativePath) {
    return picturesLib.getFileAsync(relativePath).then(function (file) {
        return URL.createObjectURL(file);
    });
}

然后像这样调用该方法，使用 .done 获取异步结果：

getPicturesLibUriAsync("folder1folder2image1.jpg").done(function (uri) {
    someImageElement.src = uri;
});

同样，请参阅我的书，了解有关承诺如何工作的完整详细信息，尤其是使用 .then 的返回值。