Maison > interface Web > js tutoriel > Qu'est-ce que la promesse ? Comment l'utiliser ?

Qu'est-ce que la promesse ? Comment l'utiliser ?

不言
Libérer: 2019-03-23 16:02:51
avant
3999 Les gens l'ont consulté

Cet article vous apporte une introduction aux associations polymorphes de Laravel (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce que la promesse

Le site officiel explique que la promesse représente le résultat final d'une opération asynchrone.

Traduction == La promesse peut être comprise comme une machine à états ==, elle a trois états différents, et il ne peut y avoir qu'un seul état à un certain moment

en attente signifie que la résolution est toujours en cours exécuté Exécution réussie rejetée Échec de l'exécution

Une promesse est une encapsulation d'une opération asynchrone L'opération asynchrone a trois résultats possibles d'attente d'achèvement, de succès et d'échec, correspondant aux trois états de promesse.

L'état de promesse ne peut avoir que le bit de conversion en attente résolu ou en attente converti en rejeté. Une fois la conversion d'état terminée, il ne peut pas être modifié.

Supposons que nous utilisions une promesse pour sceller une opération asynchrone, elle sera alors dans l'état en attente lors de sa création. Lorsque l'opération asynchrone sera terminée avec succès,
nous convertirons l'état en résolu, si. une erreur se produit lors de l'exécution, convertissez le statut en rejeté.

var promise=new Promise(function(resolve,reject){
  // code
  if(){
    /*异步操作成功 */
    resolve(value)
  }else{
    reject(error)
  }
})
Copier après la connexion

Utilisez la méthode then pour obtenir le résultat

var fs=require('fs')
function readFile_promise(path){
  return new Promise(function(resolve,reject){
    fs.readFile(path, 'utf-8',function(err,data){
      if(data){
        resolve(data)
      }else{
        reject(err)
      }
    })
  })
}

var result=readFile_promise('./1.txt')
result.then(function(value){
  //success
  console.log('success', value)
},function(error){
  //failure
  console.log('failure',error)
})
// 将一个异步函数封装成promise,只要在回调函数中针对不同的返回结果调用resolve或者reject方法。

// resolve函数会在异步操作成功完成时被调用,并将异步操作的返回值作为参数传递到外部。
// reject是在异步操作出现异常时被调用,会将错误信息作为参数传递出去。
Copier après la connexion

La valeur de retour de la méthode then

La méthode then renvoie toujours un nouvel objet de promesse, et la méthode then est appelée plusieurs fois et renvoie un objet de promesse vide par défaut
Utilisez return pour revenir.

var promise=readFile_promise('./foo.txt')
promise.then(function(value){
  //success
  console.log('success', value) // foo
  return readFile_promise('./bar.txt')
},function(error){
  //failure
  console.log('failure',error)
}).then(function(value){
  console.log('then', value) // bar
})
Copier après la connexion
Exécution de la promesse
  • Bien que nous obtenions le résultat de la promesse via la méthode then, la promesse est-elle exécutée après l'appel de la méthode then ?
var promise=new Promise((resolve, reject)=>{
  console.log('begin')
  resolve()
})

setTimeout(()=>{
  promise.then(()=>{
    console.log('end')
  })
},5000)
// 开始begin 5s后end
// 运行顺序是,当promise从被创建的那一刻起就开始执行了,then方法只是提供了访问promise状态的接口,与promise的执行无关。
Copier après la connexion
promesse API couramment utilisée
  • résolue
  • rejetée
  • toutes
  • la méthode de course reçoit un Le tableau de promesses est utilisé comme paramètre et une nouvelle promesse est renvoyée. Les promesses du tableau commenceront à s'exécuter en même temps. Le statut de la promesse renvoyée par race est déterminé par le statut de la promesse exécutée en premier dans le tableau. array
  • catch S'il y a une erreur d'exécution, vous pouvez utiliser la touche throw Lancer une erreur et utiliser la méthode catch pour capturer
 // 如果有多个promise需要执行,可以使用promise.all()
// 方法统一声明,改方法可以将多个promise对象包装成一个promise
// 该方法接收一个数组作为参数,数据的元素如果不是promise对象,则回先调用resolve方法转换。
//  如果中间有一个promise状态是reject,那么转换后的promise也会变成reject,并且将错误信息传给catch方法
var promises=['foo.txt','bar.txt','baz.txt']
promises.map(function(path){
  // console.log(path)
  return readFile_promise(path)
})

Promise.all(promises).then(function(results){
  console.log(results) // [ 'foo.txt', 'bar.txt', 'baz.txt' ] 顺序排列的
}).catch(function(err){
  // 
})
Copier après la connexion
Utiliser des promesses pour organiser du code asynchrone
// 例子; 有三个文本文件需要顺序读取
var lists=['foo.txt','bar.txt','baz.txt']
var count=0;
readFile_promise('foo.txt').then(readCB).then(readCB).then(readCB);

function readCB(data){
  console.log(data) // foo bar baz
  if(++count>2){
    return
  }
  return readFile_promise(lists[count])
}
Copier après la connexion

async/await

Après le mot-clé wait C'est souvent une promesse. Sinon, promise.resolve est implicitement appelé pour la convertir en promesse.
await attend que la promesse suivante soit exécutée avant de passer à l'étape suivante.

var asyncReadFile=async function(){
  var result1=await readFile_promise('./foo.txt')
  console.log(result1.toString()) // foo
}
asyncReadFile()
Copier après la connexion
valeur de retour asynchrone

La fonction asynchrone renvoie toujours un objet de promesse. Si le mot-clé return n'est pas suivi d'une promesse, alors la promesse est appelée par défaut
. méthode de résolution pour la conversion.

async function asyncFunc(){
  return 'hello Node'
}
asyncFunc().then(function(data){
  console.log(data) // hello Node
})
Copier après la connexion
Processus d'exécution de la fonction asynchrone
  1. Un objet de promesse est automatiquement généré lorsque la fonction asynchrone commence à s'exécuter.
  2. Lorsque le corps de la méthode commence à s'exécuter, si le mot-clé return ou throw est rencontré, l'exécution se terminera immédiatement

Si le mot-clé wait est rencontré, l'exécution sera suspendue après. wait L'exécution de l'opération asynchrone reprendra une fois que

  1. sera terminé et qu'une promesse
async function asyncFunc(){
  console.log('begin')
  return 'hello Node'
}
asyncFunc().then(function(data){
  console.log(data) // hello Node
  console.log('end')
})
// begin 
// hello 
// end
Copier après la connexion
await

await sera renvoyée. Il est déterminé par le résultat de l'opération de l'objet de promesse suivant. Si l'objet de promesse suivant est résolu, la valeur renvoyée par l'opérateur
await est la valeur résolue si l'état de l'objet de promesse est rejeté, alors wait sera également déterminé ; jeter la valeur de rejet.

async function readFile(){
  var result=await readFile_promise('./foo.txt')
  console.log(result) // foo
}
readFile()

// 等价于
readFile_promise('foo.txt').then(function(data){
  console.log(data) // foo
})
Copier après la connexion
attendre en parallèle

attendre attendra que la promesse suivante se termine avant d'entreprendre l'action suivante, ce qui signifie que lorsque plusieurs opérations d'attente sont effectuées, le programme deviendra complet
Fonctionnement en série.

Lorsqu'il n'y a pas de dépendances entre les opérations asynchrones, promise.all peut être utilisé pour réaliser le parallélisme.

async function readFile(){
  const [result1, result2]=await Promise.all([
    readFile_promise('./foo.txt'),
    readFile_promise('./bar.txt')
  ])
  console.log(result1, result2) // foo bar
}
readFile()

// 等价于
function readFile(){
  return Promise.all([
    readFile_promise('./foo.txt'),
    readFile_promise('./baz.txt')
  ]).then((result)=>{
    console.log(result) // [ 'foo', 'baz' ]
  })
}
readFile()
Copier après la connexion

résumé d'attente

Certains points clés de l'utilisation du mot-clé wait
  • le mot-clé wait doit être situé à l'intérieur de la fonction asynchrone
  • await key Le mot doit être suivi d'un objet de promesse (sinon, la conversion de résolution est appelée)
  • Le résultat renvoyé par le mot-clé wait est le résultat de l'exécution de la promesse derrière lui, qui peut être le résolu ou valeur rejetée
  • Le mot-clé wait ne peut pas être utilisé dans les fonctions fléchées ordinaires. Vous devez ajouter le mot-clé async devant la fonction flèche.
  • await est utilisé pour effectuer des opérations asynchrones en série. Si vous souhaitez utiliser promise.all en parallèle

Inconvénients de la fonction asynchrone

Supposons que nous ayons plusieurs couches d'appels de méthode, le niveau le plus bas L'opération asynchrone est encapsulée dans une méthode asynchrone, alors toutes les méthodes de couche supérieure de la fonction peuvent devoir devenir des méthodes asynchrones.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal