Comment JavaScript implémente-t-il l'exécution descendante après la fin de la boucle for ?

1. Quand vous voyez ce titre, vous pouvez penser que je suis un imbécile pour la première fois. La boucle for n'attend-elle pas simplement que la boucle se termine avant de l'exécuter vers le bas ?

Réponse : Ne soyez pas trop absolu. Par exemple, la boucle contient des opérations asynchrones, comme axios. Dans ce cas, il y a un problème avec l'ordre d'exécution de la boucle for. Elle n'attendra pas la fin asynchrone pour s'exécuter, mais c'est pour commencer directement l'exécution vers le bas.

2. Comment l'ai-je découvert ?
Réponse : Il est difficile de passer par le front-end Vue pour télécharger directement des fichiers sur Alibaba Cloud (le premier article contient des instructions de mise en œuvre), et mon patron m'a demandé de télécharger plusieurs fichiers. Afin de rendre la fonction plus fluide, j'ai dû essayer et il y avait un problème quand je l'ai essayé Oui, car le téléchargement d'elemen-ui est un téléchargement personnalisé, et la méthode est appelée plusieurs fois après plusieurs téléchargements. Dans ce cas, les résultats renvoyés par chaque téléchargement de fichier doivent être stockés dans la base de données, et la base de données doit également appeler axios, il y a donc un conflit. Non Lorsque Alibaba Cloud renvoie le chemin de l'image, il sera directement stocké dans la base de données. C'est la situation !

Trois, la solution

Réponse : enregistrez la valeur obtenue par l'événement de téléchargement personnalisé de l'élément-ui dans un nouveau tableau. De cette façon, quel que soit le nombre d'exécutions, il ne sera stocké que dans un tableau, puis utilisez la boucle for pour traverser le tableau pour atteindre plusieurs Lors du téléchargement d'un fichier, stockez le résultat de retour du fichier téléchargé dans le tableau à soumettre à la base de données ( cette boucle for est le point clé et le cœur de cet article ) . De cette façon, un axios request peut soumettre directement le tableau contenant le chemin du fichier à la base de données, non, il semble que je m'égare, passons aux choses sérieuses, regardons le code ou :

//运用es6的方法，按这个方法就能等所有异步结束之后，再向下执行

// 接收上传图片的信息，循环遍历
    async aliPublish(items){
      for(let i = 0;i<items.length;i++){
        let objName = getFileNameID() + getFileName(items[i].file.name);
        let result = await client.put(`pics/${objName}`, items[i].file)
          // console.log(result,'res')
          if(result.res.status == 200){
            self.form.images.push(result.url)
          } else {
            self.$message.error('图片上传失败！')
            return
          }
      }
      // 等待循环结束，开始发布
      self.StartPublish()
    }

Je ne sais pas si je peux vous aider si je suis si stupide, je ne peux pas m'en empêcher, la langue n'est pas bonne, si vous ne comprenez pas, vous pouvez m'envoyer un message privé, je répondrai quand je le verrai , pas pour autre chose, juste pour enregistrer mon expérience ! Continuons à apprendre et à progresser !