如何在angularjs中处理子http请求收集

Question

在我的 service.ts 中，我阅读了包含书签列表的 bookmarks.json。

对于每个书签，我想通过调用来设置一个网站图标

https://www.google.com/s2/favicons?domain=...

这是完成这项工作的函数

    getBookmarks() {
        return this.$http.get('data/bookmarks.json').then((response: any) => {
            let bookmarks = response.data;
            bookmarks.forEach(bookmark => {
                    this.$http.get('https://www.google.com/s2/favicons?domain=' + bookmark.url).then(response2 => {
                        bookmark.icon = response2.data;
                    })
            });
            return bookmarks;
        });
    };

显然我做的不对。

代码永远不会命中

bookmark.icon = response.data;

我做错了什么？谢谢。

每个书签我都得到相同的错误集：

可能未处理的拒绝： {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback" ,"url":"https://www.google.com/s2/favicons?domain=https://app.pluralsight.com/library/","headers":{"接受":"application/json, 文本/纯文本，/"}},"statusText":"","xhrStatus":"error"}

如果我只是设置：

bookmark.icon = 'https://www.google.com/s2/favicons?domain=' + bookmark.url;

然后我仍然收到一堆带有 400 错误代码的请求

看起来是同一个问题……

更新

愚蠢的我:)

这就像一个魅力:)

<img ng-src="https://www.google.com/s2/favicons?domain={{bookmark.url}}" />

Answer 1

听起来您在该请求上遇到了 CORS 问题。最好的办法是将实际 URL 保存到 bookmark.icon 中，然后在需要显示时使用该来源。

<img ng-src='{{ bookmark.icon }}'></img>