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参数出现在请求网址中。此参数应该是一个函数名称，用于将响应对象包装成（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时出错

1 个答案: