La promesa anidada de JavaScript no se ejecuta en orden esperado -- javascript campo con promise camp Relacionados El problema

Javascript Nested Promise not run in expected order


2
vote

problema

Español

Intenté simplificar mi código, en esencia, tengo esto:

      function thirdPartyAPIMethod() { // Dummy method returning promise         return Promise.resolve();      }        function func1() {          console.log("func1 start");          return thirdPartyAPIMethod().then(() => {              console.log("func1 end");              // ...              resolve();          });      }            function func2() {          console.log("func2 start");          // ...          console.log("func2 end");      }            func1().then(func2());  

Quiero ejecutar <div *ngIf='responseData'> <div *ngFor="let response of responses" class="form-row"> {{response.responseId}} </div> <button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button> <button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button> 0 y cuando se completa, ejecute <div *ngIf='responseData'> <div *ngFor="let response of responses" class="form-row"> {{response.responseId}} </div> <button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button> <button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button> 1111. Así que estaba esperando que la producción fuera esto:

  <div *ngIf='responseData'> <div *ngFor="let response of responses" class="form-row">    {{response.responseId}} </div>  <button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button> <button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button> 2  

pero en lugar de eso imprime esto:

  <div *ngIf='responseData'> <div *ngFor="let response of responses" class="form-row">    {{response.responseId}} </div>  <button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button> <button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button> 3  

¿Puede alguien ayudarme a hacer esto?

Original en ingles

I tried to simplify my code, in essence I have this:

    function thirdPartyAPIMethod() { // Dummy method returning promise         return Promise.resolve();      }        function func1() {          console.log("func1 start");          return thirdPartyAPIMethod().then(() => {              console.log("func1 end");              // ...              resolve();          });      }            function func2() {          console.log("func2 start");          // ...          console.log("func2 end");      }            func1().then(func2());

I want to run func1 and when it completes then run func2. So I was expecting the output would be this:

func1 start func1 end func2 start func2 end 

But instead it prints this:

func1 start func2 start func2 end func1 end 

Can someone help me to do this?

     
     
     

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

MODIFICAR SU responseItem4 Para invocar responseItem5 Después de 99887776616 La promesa ha sido resuelto

  responseItem7  
 

Modify your func1 to invoke resolve after thirdPartyAPIMethod's promise has been resolved

function thirdPartyAPIMethod() //dummy method returning promise  {     return Promise.resolve();  }      function func1() {      return new Promise((resolve, reject) => {          console.log("func1 start");          thirdPartyAPIMethod().then( () => {             console.log("func1 end");             resolve(); //invoke resolve here so that func1() is chained with func2           });      });  }    function func2() {      console.log("func2 start");      console.log("func2 end");  }    func1().then( () => func2()); // then has function callback handler instead of return value of func2
 
 
1
 
vote

En la llamada a then de la primera promesa, no está pasando una referencia a func2 , pero llamándolo:

  func1().then(func2()).catch(...);   

Cámbialo a:

  func1().then(func2).catch(...);   

Si desea pasar parámetros:

  func1().then(() => func2(...)).catch(...);   

o, utilizando la sintaxis pre-ES6:

  funct1().then(function() { return func2(...); }).catch(...);   

Además, cuando defina la promesa que no está llamando resolve y reject , de forma teórica (excepto si no ha publicado todo su código) que prometa nunca completa:

  function func1(...) {     return new Promise((resolve, reject) => {         console.log("func1 start");         thirdPartyAPIMethod().then({             console.log("func1 end");             resolve(''); // resolve the promise with whichever value you want         })     }); }   
 

In the call to then of the first promise, you're not passing a reference to func2, but calling it:

func1().then(func2()).catch(...); 

Change it to:

func1().then(func2).catch(...); 

If you want to pass parameters:

func1().then(() => func2(...)).catch(...); 

Or, using the pre-ES6 syntax:

funct1().then(function() { return func2(...); }).catch(...); 

Besides, when you define the promise you're not calling resolve and reject, so theoretically (except if you haven't posted all your code) that promise never completes:

function func1(...) {     return new Promise((resolve, reject) => {         console.log("func1 start");         thirdPartyAPIMethod().then({             console.log("func1 end");             resolve(''); // resolve the promise with whichever value you want         })     }); } 
 
 
0
 
vote
  func1(...).then(func2(...)).catch(...);   

en el código anterior FUNC2 () se está ejecutando antes de pasar como entrada.

forma correcta sería

  func20  

P.S El siguiente código es equivalente a lo que desea lograr.

  func2111  
 
func1(...).then(func2(...)).catch(...); 

in above code func2() is executing before passing as input.

Correct way would be

func1(...).then(func2).catch(...); 

P.s the following code is equivalent to what you want to achieve.

thirdPartyAPIMethod().then(func2).catch(...) 
 
 

Relacionados problema

0  JS - Técnica de flip y solicitud de solicitud, refactor para no ser anidado  ( Js flip technique and requestanimationframe refactor to not be nested ) 
Estoy teniendo algunos problemas para entender la API de solicitud de solicitud. Creo que hace que el navegador espere a que se complete la devolución de llam...

1  ¿Por qué mi función recursiva de JavaScript con promesas falla?  ( Why my recursive javascript function with promises fails ) 
Tengo un objeto JSON que necesito para limpiar las propiedades que comienzan con $ . Así que se le da la estructura a continuación, debe deshacerse de $aaa ...

2  La transacción con secuelas no funciona  ( Transaction with sequelize doesnt work ) 
Quiero crear una forma web simple donde puede ingresar a una persona Nombre, apellido y seleccionar varios grupos para esta persona (pero uno por ahora) Est...

2  No se puede obtener la respuesta de PROMESEE con la llamada recursivamente a la función en NOde.js  ( Unable to get response from promiese with recursively calling the function in no ) 
Trabajando con nodo.js q Promises biblioteca Estoy en duda que sea útil con la llamada recursivamente a una función. Había intentado dos enfoques para resolve...

0  Los servicios dependientes de angular.js (API de geolocalización) no resuelven promesas  ( Angular js dependent services geolocation api not resolving promises ) 
Estoy tratando de obtener la ubicación de los usuarios en el navegador y luego consultar la API de OpenWatherMap para encontrar su clima actual. En este momen...

2  Promesas anónimas  ( Anonymous promises ) 
Así que las promesas son bastante nuevas para mí, pero me encanta la idea. anteriormente ... He usado previamente esto, que simplemente devuelve los datos...

1  TypScript - Método personalizado fuera de la promesa  ( Typescript custom method off promise ) 
He declarado un método que devuelve la promesa: confirm(title: string, message: string) { var promise = new Promise((resolve, reject) => { ......

330  ¿Cuál es la diferencia entre el valor devuelto o la promesa.resolve desde entonces ()  ( Whats the difference between returning value or promise resolve from then ) 
¿Cuál es la diferencia entre: import string def process_line(line_str,word_set): line_str=line_str.strip() list_of_words=line_str.split() for w...

1  Llame a la función recursiva de la promesa  ( Call recursive function from promise ) 
Soy nuevo en promesas. Tengo que recorrer un árbol que devuelve una promesa de su función getNode . He encontrado con éxito la primera llamada a root usando ...

0  ¿Qué está mal con mi promesa, la función ASYNC / AWAIT está devolviendo las matrices vacías?  ( Whats wrong with my promise async await function both are returning empty arrays ) 
Tengo una variedad de objetos en mi código que se muestra a continuación [ { name: 'JMCP', priority: 1 }, { name: 'OTC', priority: 2 }, { name: 'CMT', ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos