Detaillierte Erläuterung der Promises_javascript-Techniken in Javascript und AngularJS

Promises werden beispielsweise verwendet, wenn die Seite die Google Maps API aufruft.

function success(position){
  var cords = position.coords;
  console.log(coords.latitude + coords.longitude);
}

function error(err){
  console.warn(err.code+err.message)
}

navigator.geolocation.getCurrentPosition(success, error);
 

■ Umgang mit mehreren asynchronen Methoden

Was ist, wenn es viele asynchrone Methoden gibt, die nacheinander ausgeführt werden müssen? async1(Erfolg, Misserfolg), async2(Erfolg, Misserfolg), ...asyncN(Erfolg, Misserfolg), wie geht man damit um?

Das einfachste könnte so geschrieben werden:

async1(function(){
  async2(function(){
    ...
    asyncN(null, null);
    ...
  }, null)
}, null)
 

Der obige Code ist relativ schwer zu warten.

Wir können eine Benachrichtigung erscheinen lassen, nachdem alle asynchronen Methoden ausgeführt wurden.

var counter = N;
function success(){
  counter--;
  if(counter === 0){
    alert('done');
  }
}

async1(success);
async2(success);
...
asyncN(success);

 

■ Was sind Versprechen und Aufschub?

deferred stellt das Ergebnis einer asynchronen Operation dar, stellt eine Schnittstelle zum Anzeigen der Operationsergebnisse und des Status bereit und stellt eine Versprechensinstanz bereit, die das Operationsergebnis abrufen kann. „Aufgeschoben“ kann den Vorgangsstatus ändern.

Promise bietet eine Schnittstelle für die Interaktion mit verwandten Deferreds.

Das Erstellen eines zurückgestellten Status entspricht einem ausstehenden Status
Wenn die Auflösungsmethode ausgeführt wird, entspricht sie einem aufgelösten Zustand.
Wenn die Reject-Methode ausgeführt wird, entspricht dies einem abgelehnten Status.

Wir können nach dem Erstellen der Verzögerung eine Rückruffunktion definieren, und die Rückruffunktion beginnt mit der Ausführung, nachdem die Statusaufforderungen „Gelöst“ und „Abgelehnt“ eingegangen sind. Die asynchrone Methode muss nicht wissen, wie die Rückruffunktion funktioniert. Sie muss lediglich die Rückruffunktion benachrichtigen, um mit der Ausführung zu beginnen, nachdem sie den Status „Aufgelöst“ oder „Abgelehnt“ erhalten hat.

■ Grundlegende Verwendung

→ Verzögert erstellen

var myFirstDeferred = $q.defer();

Hier lautet der Status für „myFirstDeferred“ „Ausstehend“. Wenn die asynchrone Methode erfolgreich ausgeführt wird, wird der Status „aufgelöst“. Wenn die asynchrone Methode fehlschlägt, wird der Status „Abgelehnt“.

→ Diesen Fehler auflösen oder ablehnen

Angenommen, es gibt eine solche asynchrone Methode: async(success, failed)

async(function(value){
  myFirstDeferred.resolve(value);
}, function(errorReason){
  myFirstDeferred.reject(errorReason);
})
 

In AngularJS hängen die Auflösung und Ablehnung von $q nicht vom Kontext ab und können ungefähr so ​​geschrieben werden:

async(myFirstDeferred.resolve, myFirstDeferred.reject);

→ Versprechen in aufgeschobener Form verwenden

var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
  .then(function(data){
  
  }, function(error){
  
  })
 

Aufgeschoben kann mehrere Versprechen haben.

var anotherDeferred = $q.defer();

anotherDeferred.promise
  .then(function(data){
  
  },function(error){
  
  })
  
//调用异步方法
async(anotherDeferred.resolve, anotherDeferred.reject);

anotherDeferred.promise
  .then(function(data){
  
  }, function(error){
  
  })
 

Wenn oben die asynchrone Methode async erfolgreich ausgeführt wird, werden beide Erfolgsmethoden aufgerufen.

→ Normalerweise werden asynchrone Methoden in eine Funktion eingeschlossen

function getData(){
  var deferred = $q.defer();
  async(deferred.resolve,deferred.reject);
  return deferred.promise;
}

//deferred的promise属性记录了达到resolved, reject状态所需要执行的success和error方法
var dataPromise = getData();
dataPromise
  .then(function(data){
    console.log('success');
  }, function(error){
    console.log('error');
  })
 

Wie schreibe ich, wenn Sie sich nur auf die Erfolgsrückruffunktion konzentrieren?

dataPromise
  .then(function(data){
    console.log('success');
  })
 

Wie schreibe ich, wenn Sie sich nur auf die Fehlerrückruffunktion konzentrieren?

dataPromise
  .then(null, function(error){
    console.log('error');
  })
  
或

dataPromise.catch(function(error){
  console.log('error');
})
 

Was passiert, wenn der Rückruf unabhängig von Erfolg oder Misserfolg das gleiche Ergebnis zurückgibt?

var finalCallback = function(){
  console.log('不管回调成功或失败都返回这个结果');
}

dataPromise.then(finalCallback, finalCallback);

oder

dataPromise.finally(finalCallback);
■ Wertschöpfungskette

Angenommen, es gibt eine asynchrone Methode, die mithilfe von deferred.resolve einen Wert zurückgibt.

function async(value){
  var deferred = $q.defer();
  var result = value / 2;
  deferred.resolve(result);
  return deferred.promise;
}
 

Da das, was zurückgegeben wird, ein Versprechen ist, können wir dann und wann weitermachen.

var promise = async(8)
  .then(function(x){
    return x+1;
  })
  .then(function(x){
    return x*2;
  })
  
promise.then(function(x){
  console.log(x);
}) 

Oben wird der Wert der Auflösung zum tatsächlichen Parameter jeder Kette.

■ Verkettung von Versprechen

function async1(value){
  var deferred = $q.defer();
  var result = value * 2;
  deferred.resolve(result);
  return deferred.promise;
}

function async2(value){
  var deferred = $q.defer();
  var result = value + 1;
  deferred.resolve(result);
  return deferred.promise;
}

var promise = async1(10)
  .then(function(x){
    return async2(x);
  })
  
promise.then(function(x){
  console.log(x);
}) 
 

Eine besser lesbare Schreibweise ist natürlich:

function logValue(value){
  console.log(value);
}

async1(10)
  .then(async2)
  .then(logValue);
 

Der Rückgabewert der async1-Methode wird zum tatsächlichen Parameter in der Erfolgsmethode in der then-Methode.

Aus der Perspektive des Abfangens von Ausnahmen können Sie auch so schreiben:

async1()
  .then(async2)
  .then(async3)
  .catch(handleReject)
  .finally(freeResources);
 

■ $q.reject(reason)

Die Verwendung dieser Methode kann dazu führen, dass die Verzögerung im Fehlerzustand angezeigt wird und eine Ursache für den Fehler angegeben wird.

var promise = async().then(function(value){
  if(true){
    return value;
  } else {
    return $q.reject('value is not satisfied');
  }
})

■ $q.when(value)

Geben Sie ein Versprechen mit Wert zurück.

function getDataFromBackend(query){
  var data = searchInCache(query);
  if(data){
    return $q.when(data);
  } else {
    reutrn makeAasyncBackendCall(query);
  }
}

■ $q.all(promisesArr)

Warten Sie, bis alle Versprechen erfüllt sind.

var allPromise = $q.all([
  async1(),
  async2(),
  ...
  asyncN();
])

allProise.then(function(values){
  var value1 = values[0],
    value2 = values[1],
    ...
    valueN = values[N];
    
  console.log('all done');
})

Das Obige ist der detaillierte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein.