example async javascript angular typescript promise subscribe

javascript - async - Angular 2: cómo llamar a una función después de obtener una respuesta de suscribirse http.post



promise angular 6 (5)

Necesito llamar a un método después de obtener los datos de la solicitud de publicación http

servicio: request.service.TS

get_categories(number){ this.http.post( url, body, {headers: headers, withCredentials:true}) .subscribe( response => { this.total = response.json(); }, error => { } ); }

componente: categorias.TS

search_categories() { this.get_categories(1); //I need to call a Method here after get the data from response.json() !! e.g.: send_catagories(); }

Solo funciona si cambio a:

servicio: request.service.TS

get_categories(number){ this.http.post( url, body, {headers: headers, withCredentials:true}) .subscribe( response => { this.total = response.json(); this.send_catagories(); //here works fine }, error => { } ); }

Pero necesito llamar al método send_catagories() dentro del componente después de llamar a this.get_categories(1); Me gusta esto

componente: categorias.TS

search_categories() { this.get_categories(1); this.send_catagories(response); }

¿Qué estoy haciendo mal?


Actualice su método get_categories() para devolver el total (envuelto en un observable):

// Note that .subscribe() is gone and I''ve added a return. get_categories(number) { return this.http.post( url, body, {headers: headers, withCredentials:true}) .map(response => response.json()); }

En search_categories() , puede suscribir el observable devuelto por get_categories() (o podría seguir transformándolo encadenando más operadores RxJS):

// send_categories() is now called after get_categories(). search_categories() { this.get_categories(1) // The .subscribe() method accepts 3 callbacks .subscribe( // The 1st callback handles the data emitted by the observable. // In your case, it''s the JSON data extracted from the response. // That''s where you''ll find your total property. (jsonData) => { this.send_categories(jsonData.total); }, // The 2nd callback handles errors. (err) => console.error(err), // The 3rd callback handles the "complete" event. () => console.log("observable complete") ); }

Tenga en cuenta que solo se suscribe UNA VEZ , al final.

Como dije en los comentarios, el método .subscribe() de cualquier observable acepta 3 devoluciones de llamada como esta:

obs.subscribe( nextCallback, errorCallback, completeCallback );

Deben ser pasados ​​en este orden. No tienes que pasar los tres. Muchas veces solo se implementa el nextCallback :

obs.subscribe(nextCallback);


Puede agregar una función de devolución de llamada a su lista de parámetros get_category (...).

Ex:

get_categories(number, callback){ this.http.post( url, body, {headers: headers, withCredentials:true}) .subscribe( response => { this.total = response.json(); callback(); }, error => { } ); }

Y luego puedes llamar a get_category (...) así:

this.get_category(1, name_of_function);


Puede codificar como una expresión lambda como el tercer parámetro (al completar) al método de suscripción. Aquí vuelvo a configurar la variable departmentModel a los valores predeterminados.

saveData(data:DepartmentModel){ return this.ds.sendDepartmentOnSubmit(data). subscribe(response=>this.status=response, ()=>{}, ()=>this.departmentModel={DepartmentId:0}); }


Puedes hacer esto usando un nuevo Subject también:

Mecanografiado:

let subject = new Subject(); get_categories(...) { this.http.post(...).subscribe( (response) => { this.total = response.json(); subject.next(); } ); return subject; // can be subscribed as well } get_categories(...).subscribe( (response) => { // ... } );


get_categories(number){ return this.http.post( url, body, {headers: headers, withCredentials:true}) .map(t=> { this.total = t.json(); return total; }).share(); ); }

entonces

this.get_category(1).subscribe(t=> { this.callfunc(); });