从Flickr API使用JSONP获取JSON数据

问题描述：

我正面临一个新问题-Jsonp.我已阅读并观看了视频，但无法解决该问题.

I'm facing a new issue - Jsonp. I've read about and watched videos but couldn't get to the solution to fix my problem.

首先我正在使用Angular6.我试图从使用JSONP的api获取json响应，但是当我尝试在我的应用程序中使用它时，出现了CORS错误.因此，我想修复它而不必安装chrome的CORS插件.浏览器上的响应是这样的:

First I'm using Angular 6. I'm trying to get a json response from an api which uses JSONP, but when I try to use it in my app I got CORS error. So I want to fix it without having to install chrome's CORS plugin. The response on the browser is like this:

jsonFlickrFeed({
  "title": "Uploads from everyone",
  "link": "https:\/\/www.flickr.com\/photos\/",
  "description": "",
  "modified": "2018-10-13T21:16:50Z",
  "generator": "https:\/\/www.flickr.com",
  "items": [{
      "title": "photo 2504 was taken at 14:18:38",
      "link": "https:\/\/www.flickr.com\/photos\/barrycorneliusox\/30359327537\/",
      "media": {
        "m": "https:\/\/farm2.staticflickr.com\/1944\/30359327537_fac974807d_m.jpg"
      },
      "date_taken": "2018-10-13T14:18:38-08:00",
      "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/barrycorneliusox\/\">barrycorneliusox<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/barrycorneliusox\/30359327537\/\" title=\"photo 2504 was taken at 14:18:38\"><img src=\"https:\/\/farm2.staticflickr.com\/1944\/30359327537_fac974807d_m.jpg\" width=\"240\" height=\"160\" alt=\"photo 2504 was taken at 14:18:38\" \/><\/a><\/p> <p><a href=\"http:\/\/www.oxonraces.com\/photos\/2018-10-13-oxford\/\" rel=\"nofollow\">Click here for more photos of the 2018 Chiltern XC League Match 1 - Oxford<\/a>. If you put a photo somewhere public, please add the credit <em>Photo by Barry Cornelius<\/em>.<\/p>",
      "published": "2018-10-13T21:16:50Z",
      "author": "nobody@flickr.com (\"barrycorneliusox\")",
      "author_id": "159968055@N03",
      "tags": "2018 chilternxcleaguematch1oxford oxford jsvmenpointjfirstlap barrycornelius oxonraces"
    },
    .....,
  ]

})

我的服务:(使用jsonp)

my service:(using jsonp)

getImages() {
  return this.jsonp.request(this.imagesUrl).subscribe(res => {
    console.log(res);
  })
}

不起作用.我在做什么错了?

doesn't work. what am I doing wrong?

我的api URL:

https://api.flickr.com/services/feeds /photos_public.gne?format=json

答

由于您使用的是Angular 6，

Since you're using Angular 6,

您必须导入HttpClientModule, HttpClientJsonpModule并将其添加到要在其中进行调用的模块的imports数组中:

You'll have to import HttpClientModule, HttpClientJsonpModule and add them to your imports array of your Module that you want to make this call in:

...
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
...

@NgModule({
  imports: [..., HttpClientJsonpModule, HttpClientModule, ...],
  ...
})
export class AppModule { }

然后在服务中的API URL中，还必须指定jsoncallback=JSONP_CALLBACK而不是nojsoncallback=callback:

Then in your service, in the API URL, you'll also have to specify jsoncallback=JSONP_CALLBACK instead of nojsoncallback=callback:

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable()
export class PhotoService {

  imagesUrl = `https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSONP_CALLBACK`;

  constructor(private http: HttpClient) { }

  getImages() {
    return  this.http.jsonp(this.imagesUrl, 'JSONP_CALLBACK');
  }

}

然后在您的组件中:

...

import { PhotoService } from './photo.service';

...
export class PhotosComponent  {

  myArray: any[];

  constructor(private photoService: PhotoService) { 
  }

  ngOnInit() {
    this.photoService.getImages()
      .subscribe((res: any) => this.myArray = res.items);
  }

}

这是一个 示例StackBlitz 供您参考.

Here's a Sample StackBlitz for your ref.

PS:您还在getImages内部subscribe，它将返回Subscription而不是Observable

PS: You're also subscribeing inside getImages which would return a Subscription instead of an Observable

从Flickr API使用JSONP获取JSON数据

相关推荐