从 aurelia http 客户端检索 jsonp 时出错

Question

我有一个正在使用 Aurelia 创建的应用程序。我希望通过 ajax 从 instagram 中的用户检索最新图像。我尝试使用 Aurelia http client，因为这就是 Aurelia 入门页面上的 Flickr 示例所使用的。

如果我使用 http.get，那么我会从 instagram 收到 CORS 错误。尝试 http.jsonp，检查的响应显示 correct format，但在执行处理响应的回调之前我得到了一个看起来像解析错误的东西（意外标记“:”）。

我是能够使用 jQuery 通过 AJAX 成功检索图像，但我很想知道我在 Aurelia 上做错了什么http 客户端。

以下是视图模型的相关位：

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class Welcome {
  images = [];
  url = '[INSTAGRAM_URL]';

  constructor(http){
    this.http = http;
  }

  activate(){
    return this.http.jsonp(this.url).then(response => {
      this.images = response.data.map(function (d) {
            return {
                src: d.images.standard_resolution.url,
                caption: d.caption.text,
                when: d.created_time
            };
        });
    });
  }
}

Answer 1

Instagram API 期望 callback GET 参数出现在请求 URL 中。此参数应该是将响应对象包装到其中的函数名称（Aurelia 将添加类似 &callback=jsonp_callback_59563 的内容）。它与 jQuery.jsonp 一起工作的原因是它在幕后自动添加了 callback 参数。

正确的代码应该是：

return this.http.jsonp(this.url, 'callback').then(response => {
  this.images = response.content.data.map(function (d) {
        return {
            src: d.images.standard_resolution.url,
            caption: d.caption.text,
            when: d.created_time
        };
    });
});

从 aurelia http 客户端检索 jsonp 时出错

Error retrieving jsonp from aurelia http client

javascript

jsonp

instagram-api

aurelia