从aurelia http客户端检索jsonp时出错 [英] Error retrieving jsonp from aurelia http client

问题描述

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

I have an application I am creating using Aurelia. I wish to retrieve the latest images from a user in instagram via ajax. I tried using the Aurelia http client because that's what the Flickr example on Aurelia's getting started page uses.

如果我使用 http.get ，那么我从instagram收到一个CORS错误。尝试 http.jsonp ，检查的响应显示正确的格式，但是在执行处理响应的回调之前，我得到的解析错误（意外的令牌：）。

If I use http.get, then I get a CORS error from instagram. Trying http.jsonp, the inspected response shows the correct format, but I get what looks like a parsing error (Unexpected token ":") before the callback that handles the response is being executed.

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

I am able to successfully retrieve the images via AJAX using jQuery, but I am curious to know what I am doing wrong with the Aurelia http client.

这里有视图模型的相关位：

Here are the relevant bits of the view model:

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
            };
        });
    });
  }
}

推荐答案

Instagram API期望回调 GET参数出现在请求URL中。这个参数应该是一个函数名来包装响应对象（Aurelia会添加类似& callback = jsonp_callback_59563 ）。它与jQuery.jsonp一起使用的原因是它在场景后面自动添加了 callback 参数。

Instagram API expects callback GET parameter to be present in request URL. This parameter should be a function name to wrap response object into (Aurelia will add something like &callback=jsonp_callback_59563). The reason why it works with jQuery.jsonp is that it adds callback parameter automatically behind the scene.

正确的代码然后应该是：

Correct code then should be:

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时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！