Angular2 Flickr JSONP | 易学教程

问题

I am very new to AngularJS. I am making a Flickr public feed app using Angular2 but I encountered this problem.

I couldn't find a way to get the JSONP working. What should I do to return the JSON object?

Here's the codes

flickr.service.ts

import { Injectable } from '@angular/core';
import { Jsonp, Http } from '@angular/http'; //use jsonp module to fetch the data from the api call

import 'rxjs/Rx'; // use rxjs as the observable

@Injectable()

export class FlickrService {

  url: string;
  apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb';

  constructor(private _jsonp: Jsonp) {
    this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json&nojsoncallback=1`;
  }

  getFeed() {
    return this._jsonp.get(this.url)
      .map(res => res.json());
  }

  searchTag(searchTerm: string) {
    return this._jsonp.get(this.url+'&tag='+searchTerm)
      .map(res => res.json());
  }
}

flickr.component.ts

import { Component } from '@angular/core';
import { FlickrService } from '../services/flickr.service';
@Component({
  moduleId: module.id,
  selector: 'flickr',
  templateUrl: './flickr.component.html'
})
export class FlickrComponent {
  feedList: Array<Object>;
  searchList: Array<Object>;
  searchTerm: string;
  constructor(private _flickrService: FlickrService) {
    this._flickrService.getFeed().subscribe(res => {
      console.log(res);
    });
  }
}

回答1:

For anyone struggling to get this to work as I did, I finally got it to work in the following manner in Angular 5:

In app.module.ts add HttpClientJsonpModule

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

imports: [
    ...

    HttpClientModule,
    HttpClientJsonpModule
...
]

in an api service I have:

getFlickrFeed() {
    const url = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&id=YOUR_ID&jsoncallback=JSONP_CALLBACK';

    return this.http.jsonp(url, 'JSONP_CALLBACK').pipe(
            tap(
                data => data
            )
        );
}

In my module:

    this.api.getFlickrFeed().subscribe(
        data => {

            this.flickrFeed = data['items'];

            console.log(this.flickrFeed);
        }
    );

回答2:

In order to have the Jsonp library work for me I've needed to end my queries with callback=JSONP_CALLBACK. So try updating your service to this...

import { Injectable } from '@angular/core';
import { Jsonp, Http } from '@angular/http';

import 'rxjs/Rx'; // use rxjs as the observable

@Injectable()

export class FlickrService {

  url: string;
  apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb';

  constructor(private _jsonp: Jsonp) {
    this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json`;
  }

  getFeed() {
    return this._jsonp.get(this.url+'&callback=JSONP_CALLBACK')
      .map(res => res.json()).catch(this._handleError);
  }

  searchTag(searchTerm: string) {
    return this._jsonp.get(this.url+'&tag='+searchTerm+'&callback=JSONP_CALLBACK')
      .map(res => res.json()).catch(this._handleError);
  }

  private _handleError(error: Response | any) {
    console.log(error);
    return Observable.throw(error.code);
  }
 }

Also, I'm not 100% sure if the callback=JSONP_CALLBACK needs to be the last argument of the query... But any and all documentation I've ever read has it there, so I've just done that and it has worked just fine for me.

来源：https://stackoverflow.com/questions/44638143/angular2-flickr-jsonp

标签

angular

jsonp