angular - change - httpclient ionic
¿Cómo usar/importar el módulo http? (13)
- Estamos trabajando en una capa de persistencia de datos separada, que cubrirá HTTP. Esto aún no está terminado.
-
Debido a
Zonein Angular 2, puede usar cualquier mecanismo existente para obtener datos. Esto incluyeXMLHttpRequest,fetch()y cualquier otra biblioteca de terceros. -
XHRen elcompilerestá destinado a ser privado, y podemos cambiar la API en cualquier momento y, como tal, no se debe utilizar.
He estado jugando con Angular 2 Quickstart .
¿Cómo puedo usar / importar el módulo http en Angular 2?
He visto Angular 2 Todo''s.js , pero no usa el módulo http.
"ngHttp": "angular/http",
a las
dependencies
en
package.json
porque escuché que Angular 2 es algo modular.
Aparte de todas las respuestas dadas a continuación si cubro algunos puntos adicionales Aquí está
Http
cómo usar / importar todo ...
ANGULAR2 HTTP (¡ACTUALIZADO a Beta!)
En primer lugar, a partir del nombre, tenemos que importar el archivo http en el index.html como este
<script src="node_modules/angular2/bundles/http.dev.js"></script>
o puede actualizar esto a través de CDN desde aquí
luego, el siguiente paso es importar
Http
y
HTTP_PROVIDERS
de los paquetes proporcionados por angular.
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 la siguiente manera.
bootstrap(App, [
HTTP_PROVIDERS, some_more_dependency''s
]);
y las importaciones son de ...
import {http} from ''angular2/http'';
Consumir Rest API''s o json usando Http
Ahora, junto con el http, tenemos algunas opciones más proporcionadas con el angular2 / http, es decir, como encabezados, solicitudes, detenciones, etc., etc., que se usa principalmente mientras se consumen datos de Rest API o Json temporales. Primero tenemos que importar todo esto como sigue:
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from ''angular2/http'';
a veces necesitamos proporcionar encabezados mientras consumimos 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 venga a RequestMethods: básicamente utilizamos GET, POST pero tenemos más opciones que puede consultar aquí ...
podemos usar use requestmethods usando
RequestMethod.method_name
hay algunas opciones más para las API, por ahora publiqué un ejemplo para que POST solicite la ayuda usando 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() }]
}
});
}
para más información encontré dos mejores referencias here.. y https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/
Creo que ahora (alpha.35 y 36) es necesario que sea:
import {Http} from ''http/http'';
Recuerde agregar (ya que ahora es un archivo separado) la referencia en su html: https://code.angularjs.org/2.0.0-alpha.36/http.dev.js
Después de algunas de las respuestas, aquí hay un ejemplo de trabajo completo del uso del módulo
http
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="../node_modules/es6-shim/es6-shim.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {''app'': {defaultExtension: ''js''}}
});
System.import(''app/app'');
</script>
</head>
<body>
<app>loading...</app>
</body>
</html>
app/app.ts
import {bootstrap, Component} from ''angular2/angular2'';
import {Http, Headers, HTTP_PROVIDERS} from ''angular2/http'';
@Component({
selector: ''app'',
viewProviders: [HTTP_PROVIDERS],
template: `<button (click)="ajaxMe()">Make ajax</button>`
})
class AppComponent {
constructor(public http: Http) { }
ajaxMe() {
this.http.get(''https://some-domain.com/api/json'')
.map(res => res.json())
.subscribe(
data => this.testOutput = data,
err => console.log(''foo''),
() => console.log(''Got response from API'', this.testOutput)
);
}
}
bootstrap(AppComponent, []);
En la versión 37 necesitas hacer esto:
///<reference path="typings/angular2/http.d.ts"/>
import {Http} from "angular2/http";
Y ejecuta este comando tsd:
tsd install angular2/http
Lo mismo ocurre con Alpha 42, pero se puede observar que los
Headers
y
HTTP_PROVIDERS
también provienen de
angular2/http
.
import {Http, Headers, HTTP_PROVIDERS} from ''angular2/http'';
export class App {
constructor(public http: Http) { }
getThing() {
this.http.get(''http://example.com'')
.map(res => res.text())
.subscribe(
data => this.thing = data,
err => this.logError(err),
() => console.log(''Complete'')
);
}
}
Más sobre esto y cómo usar los observables que se devuelven aquí: https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/
:)
Para Angular 4.3+, 5. +
// app.module.ts:
import {NgModule} from ''@angular/core'';
import {BrowserModule} from ''@angular/platform-browser'';
// Import HttpClientModule from @angular/common/http
import {HttpClientModule} from ''@angular/common/http'';
@NgModule({
imports: [
BrowserModule,
// Include it under ''imports'' in your application module
// after BrowserModule.
HttpClientModule,
],
})
export class MyAppModule {}
Y dentro de tu clase de servicio
import { HttpClient } from ''@angular/common/http'';
Otros paquetes que también podrías necesitar
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from ''@angular/common/http'';
En
package.json
"@angular/http": "^5.1.2",
La referencia está here
Un ejemplo simple usando el módulo http:
import {Component, View, bootstrap, bind, NgFor} from ''angular2/angular2'';
import {Http, HTTP_BINDINGS} from ''angular2/http''
@Component({
selector: ''app''
})
@View({
templateUrl: ''devices.html'',
directives: [NgFor]
})
export class App {
devices: any;
constructor(http: Http) {
this.devices = [];
http.get(''./devices.json'').toRx().subscribe(res => this.devices = res.json());
}
}
bootstrap(App,[HTTP_BINDINGS]);
Ya está en angular2, por lo que no necesita poner nada en package.json
Solo tienes que importarlo e inyectarlo así. (este es un servicio Stuff con un métodoThatUsesHttp () que solo registra la respuesta)
import {XHR} from ''angular2/src/core/compiler/xhr/xhr'';
export class Stuff {
$http;
constructor($http: XHR) {
this.$http = $http;
}
methodThatUsesHttp() {
var url = ''http://www.json-generator.com/api/json/get/cfgqzSXcVu?indent=2'';
this.$http.get(url).then(function(res) {
console.log(res);
}, function(err) {
console.log(err);
});
}
}
solo corre:
npm install --save @angular/http
y luego importar vía
import {HttpModule} from ''@angular/http''
Última actualización: 11 de mayo de 2016
Versión angular: 2.0.0-rc.2
Versión mecanografiada: 1.8.10
Un ejemplo simple de cómo usar el módulo Http con Observable:
import {bootstrap} from ''@angular2/platform-browser-dynamic'';
import {Component, enableProdMode, Injectable, OnInit} from ''@angular/core'';
import {Http, Headers, HTTP_PROVIDERS, URLSearchParams} from ''@angular/http'';
import ''rxjs/add/operator/map'';
const API_KEY = ''6c759d320ea37acf99ec363f678f73c0:14:74192489'';
@Injectable()
class ArticleApi {
constructor(private http: Http) {}
seachArticle(query) {
const endpoint = ''http://api.nytimes.com/svc/search/v2/articlesearch.json'';
const searchParams = new URLSearchParams()
searchParams.set(''api-key'', API_KEY);
searchParams.set(''q'', query);
return this.http
.get(endpoint, {search: searchParams})
.map(res => res.json().response.docs);
}
postExample(someData) {
const endpoint = ''https://your-endpoint'';
const headers = new Headers({''Content-Type'': ''application/json''});
return this.http
.post(endpoint, JSON.stringify(someData), { headers: headers })
.map(res => res.json());
}
}
@Component({
selector: ''app'',
template: `<ul>
<li *ngFor="let article of articles | async"> {{article.headline.main}} </li>
</ul>`,
providers: [HTTP_PROVIDERS, ArticleApi],
})
class App implements OnInit {
constructor(private articleApi: ArticleApi) { }
ngOnInit() {
this.articles = this.articleApi.seachArticle(''obama'');
}
}
enableProdMode();
bootstrap(App)
.catch(err => console.error(err));
import {Http, Response} from ''@angular/http'';
import {Injectable} from ''angular2/core'';
import {Http, HTTP_PROVIDERS} from ''angular2/http'';
@Injectable()
export class GroupSelfService {
items:Array<any>;
constructor(http:Http){
http.get(''http://127.0.0.1:8080/src/data/names.json'')
.subscribe(res => {
this.items = res;
console.log(''results found'');
})
}
}
Resultados en un 404:
Cambio de archivo detectado
Cambio de archivo detectado
GET / src / angular2 / http 404 0,124 ms - 30
Dos cosas extrañas:
1. / src / angular2 / http: no es la ruta donde se puede encontrar http y no la ruta que proporcioné en el código.
2. core.js se encuentra justo al lado de http.js en la carpeta node_modules / angular2 y se encuentra.
¿Qué tan extraño es eso?
Actualiza
Mea culpa: ninguno de los ejemplos mencionados menciona que necesitas hacer referencia a http.js en tu html como
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
... y luego funcionó.
Pero para la ruta en el mensaje de error todavía no tengo explicación.