Pregunta Uso de apis de descanso http con angular 2


Por lo tanto, estoy siguiendo angular 2 guías en su sitio web a través de texto mecanografiado y estoy atrapado en http api integración. Intento hacer una aplicación simple que pueda buscar a través de la API de Soundcloud para una canción, sin embargo tengo dificultades para implementar y entender cómo ponerme en marcha y los recursos en línea lo hacen de muchas maneras diferentes (creo que los rápidos cambios de sintaxis angular 2) en mis tiempos).

Entonces, en este momento mi proyecto se ve así

app
  components
    home
      home.component.ts
      ...
    search
      search.component.ts
      ...
    app.ts
    ...
  services
    soundcloud.ts
  bootstrap.ts
index.html

No hay nada lujoso sucediendo en el ejemplo, los archivos principales serían

aplicaciones

import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {HomeComponent} from './home/home.component';
import {SearchComponent} from './search/search.component';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
  {path: '/search', name: 'Search', component: SearchComponent}
])

export class App { }

bootstrap.ts

    import {App}     from './components/app';
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(App, [
  ROUTER_PROVIDERS
]);

Y estaba tratando de descubrir soundcloud.ts sin embargo, no puedo hacerlo y hay errores en el siguiente enfoque, es decir @Inject no se encuentra (supongo que estoy usando sintaxis obsoleta aquí). Básicamente, me gustaría utilizar el servicio SoundCloud para llamadas de API dentro de mi componente de búsqueda de formularios de aplicaciones.

import {Injectable} from 'angular2/core'
import {Http} from 'angular2/http'

@Injectable()
export class SoundcloudService {
 http : Http

 constructor(@Inject(Http) http) {
   this.http = http;
 }
}

Soundcloud API no está incluido aquí ya que no puedo obtener los conceptos básicos primero.


32
2018-01-12 22:55


origen


Respuestas:


Bien, la respuesta fue proporcionada por @langley, pero me gustaría agregar algunos puntos más para publicar como respuesta.

En primer lugar, para consumir Rest APIs necesitamos el Http y HTTP_PROVIDERS módulos a ser importados Como estamos hablando de Http, el primer paso es obviamente.

<script src="node_modules/angular2/bundles/http.dev.js"></script>

Pero sí, es una buena práctica proporcionar HTTP_PROVIDERS en el archivo bootstrap porque al usarlo de esta manera se proporciona a nivel global y está disponible para todo el proyecto de esta manera.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

y las importaciones que se incluirán son ....

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

A veces tenemos que proporcionar Headers mientras consume API para enviar access_token y muchas más cosas que se hacen de esta manera:

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

Ahora a RequestMethods: bascialmente utilizamos GET, POST pero hay algunas opciones más que puedes refiérase aquí ...

Podemos usar métodos de solicitud como RequestMethod.method_name 

Hay algunas opciones más para las API, pero por ahora he publicado un ejemplo para la solicitud POST, que lo ayudará con algunos métodos importantes:

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

usted puede refiérase aquí también para más información.

ver también -

Actualizar

importación ha sido cambiada de

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

a

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';

36
2018-01-13 04:52



Necesita agregar esta línea:

<script src="node_modules/angular2/bundles/http.dev.js"></script> 

en su archivo index.html

Necesitas agregar HTTP_PROVIDERS:

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

en su archivo boot.ts / bootstrap.ts, e impórtelos por supuesto.

Necesita importar @Inject en tus DojoService archivo de clase:

import {Injectable, Inject} from 'angular2/core'

Al igual que importó @Injectable.


7
2018-01-12 23:21