Aurelia：如何处理视图中的异步请求？

Question

我有一个 dotnet 核心 api，它返回一个 FileContentResult ..

return new FileContentResult(bytes, contentType)
{
    FileDownloadName = Path.GetFileName(request.Filename)
};

通过邮递员，我可以完美地读出图像。现在我想通过 aurelia fetch 客户端读取图像，并将其显示在我的 html 视图中。这是我从api检索图像的功能。

public image(filename: string) {
    return this.http.fetch(AppConfiguration.base_url + 'assets/image',
        {
            method: 'post',
            body: json({
                filename: filename
            })
        });
}

我尝试使用此值转换器转换响应中的 blob。但我不能让它工作

转换器：

export class BlobToUrlValueConverter {
    public toView(blob) {
        return URL.createObjectURL(blob);
    }
}

视图模型：

export class Dashboard {

    public blob: any;

    constructor(
        public assets_service: AssetsService
    ) { }

    async attached() {
        let response = await this.assets_service.image('test.png');
        this.blob = response.blob();
    }
 }

看法

<div if.bind="blob">
   ${ blob | blobToUrl }
</div>

我不确定这是正确的方法。也不确定如何处理它的异步请求部分。让图像响应显示在 html 视图中的最佳方法是什么？让我们说通过 img 标签？

Answer 1

我离得很近。这是我如何显示图像。

视图模型：

export class Dashboard {

    public url: string;

    constructor(
        public assets_service: AssetsService
    ) { }

    async attached() {
        let blob = await this.assets_service.image('test.png')
            .then(response => response.blob());
        this.url = URL.createObjectURL(blob);
    }
 }

看法：

<div if.bind="url">
    <img src.bind="url">
</div>

编辑：

使用上面写的部分找到了更好的解决方案：

执行调用的导出函数（用于 ts 和 html 端的可重用性）：

export function image_request(filename: string): Promise<Response> {
    let http = new Http();
    return http.fetch(<your-url-that-fetches-the-image>,
        {
            method: 'post',
            body: json({
                filename: filename
            })
        });
}

使用上述函数的值转换器

import { image_request } from './AssetsRequests';

export class ImageRequestValueConverter {
    public toView(filename: string) {   
        return image_request(filename);
    }
}

解决方案中最重要和最棒的部分。非常感谢http://www.sobell.net/aurelia-async-bindings/ 让我上路。您可以覆盖绑定行为。您可以使用此覆盖在视图中结合值转换器处理异步 Promise。

export class AsyncImageBindingBehavior {

    public bind(binding, source): void {
        binding.originalupdateTarget = binding.updateTarget;
        binding.updateTarget = (target) => {
            // When we have a promise
            if (typeof target.then === 'function') {
            // Set temp value to loading so we know its loading
            binding.originalupdateTarget('Loading...');  
            // Process the promise 
            target
                .then(response => response.blob())
                .then(blob => binding.originalupdateTarget(
                    URL.createObjectURL(blob)
                ));
            }
            else {
                binding.originalupdateTarget(target);
            }
        };
    }

    unbind(binding) {
        binding.updateTarget = binding.originalupdateTarget;
        binding.originalupdateTarget = null;
    }
}

最后视图很简单

 <img src="${ 'test.png' | imageRequest & asyncImage }">