Vue：如何在一個函式陣列中相應地使用異步等待，其中可以為Promise.all提供兩個函式？

我想在 1.vue 中標記 [here] 的地方使用 await。但是，如果我在那里使用 await 那么它會發出 error Unexpected reserved word 'await'。如果我想async useFunctionToAllServers()在 [Promise.all] 之后按順序使用，那么在哪里放置異步或如何更改async useFunctionToAllServers()？還是需要改變submitToTheOthers()？

1.vue

<template>
  <div>
    <label for="imgUpload">
      <button class="point">upload</button>
    </label>
    <input
      type="file"
      class="input-file"
      ref="logo1"
      id="imgUpload"
      @change="sendFile('logo')"
    />
    <div v-if="imageData" class="imgBox">
      <img :src="imageData" />
    </div>

    <label for="imgUpload">
      <button class="point">upload1</button>
    </label>
    <input
      type="file"
      class="input-file"
      ref="logo1"
      id="imgUpload"
      @change="sendFile('logo1')"
    />
    <div v-if="imageData1" class="imgBox">
      <img :src="imageData1" />
    </div>
    <button @click="useFunctionToAllServers">BUTTON</button>
  </div>
</template>
<script>
import {
  updateGeneralInfo,
  createUploadToOther,
  updateGeneralInfoToOther,
} from '@/2'

export default {
  data() {
    return {
      filename: '',
      filename1: '',
      originalFilename: '',
      originalFilename1: '',
      imageData: '',
      imageData1: '',
      serverNames: ['a server', 'b server'],
      idxs: [0, 1],
      serverFullAddress:['http://a.url', 'http://b.url'],
      serverResCheck:[],
      isLogoChanged:false,
      isLogo1Changed:false,
    }
  },
  methods: {  
    sendFile(type) {
      let file = ''
      if (type == 'logo') {
        file = this.$refs.logo.files[0]
      } else {
        file = this.$refs.logo1.files[0]
      }
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        if (type == 'logo') {
        this.imageData = e.target.result
        } else {
        this.imageData1 = e.target.result
        }
      }
    },
    sendFileToOther(type, serverFullURL) {
      let file = ''
      if (type == 'logo') {
        file = this.$refs.logo.files[0]
        this.originalFilename = this.$refs.logo.files[0].name
      } else {
        file = this.$refs.logo1.files[0]
        this.originalFilename1 = this.$refs.logo1.files[0].name
      }
      const reader = new FileReader()
      reader.readAsDataURL(file)
      const formdata = new FormData()
      formdata.append('logo', file)
      
      formdata.append('serverURL', serverFullURL)

      return createUploadToOther(formdata)
    },
    
    async useFunctionToAllServers() {
      
        let data = {
          foo: this.foo,
          bar: this.bar,
        }
        
        await updateGeneralInfo(data).then().catch()
      
        await Promise.all(this.submitToTheOthers()).catch((err) =>{ // [Promise.all]
          console.log('Promise.all err>>', err)
        });  
        
        let notWorkingServers = []
        for(let i=0; i< this.idxs.length ; i  ){
          if(!this.serverResCheck[i]){
          notWorkingServers.push(this.serverNames[i])
          }
        }
        if(Array.isArray(notWorkingServers) && notWorkingServers.length == 0){
          alert('not working : ', notWorkingServers)
        }else{
          alert('all server works')
        }      
    },
    submitToTheOthers(){
      let data = {
        foo: this.foo,
        bar: this.bar,
      }
      let logoData ={}
      if(this.originalFilename){
        data.logo = this.originalFilename
        logoData.logo = true
      }else if(this.isLogoChanged){
        data.logo = this.logo
      }
      if(this.originalFilename1){
        data.logo1 = this.originalFilename1
        logoData.logo1 = true
      }else if(this.isLogo1Changed){
        data.logo1 = this.logo1
      }
      
      return this.idxs.map( (_entry, i) => {
        return updateGeneralInfoToOther(1, data, this.serverFullAddress[i]).then((res) => { // [here2]
          if (res.status == 200) {
            this.serverResCheck[i] = true
            if(logoData.logo){
              this.sendFileToOther('logo', this.serverFullAddress[i]).then((res) => { // [here]
              }).catch((err) => {
                this.serverResCheck[i] = false
              })
            }
            if(logoData.logo1){
              this.sendFileToOther('logo1', this.serverFullAddress[i]).then((res) =>{ // [here]
              }).catch((err) => {
                this.serverResCheck[i] = false
              })
            }
          }else{
            this.serverResCheck[i] = false            
          }
        }).catch((err) => {
          this.serverResCheck[i] = false
        })
      })
    },
  },
}
</script>

2.js

import axios from 'axios'
export const headers = {
  'Content-Type': 'application/json',
  'header1' : 'header1',
  'header2' : 'header2',
}

export function updateGeneralInfoToOther(id, data, serverAddress) {
  data.serverAddress = serverAddress
  return axios.put(`/u/r/l/${id}`, data, { headers })
}

export function updateGeneralInfo(id, data) {
  return axios.put(`/extra/u/r/l/${id}`, data, { headers })
}

export function createUploadToOther(data) {
  return axios.post('/u/r/l', data, { headers })
}

uj5u.com熱心網友回復：

要await在這些回呼中使用，每個回呼函式本身需要async：

export default {
  methods: {
    submitToTheOthers(){
      ?
      return this.idxs.map( (_entry, i) => {
        return updateGeneralInfoToOther(1, data, this.serverFullAddress[i]).then(async (res) => { // [here2]
            ?                                                                     ??
          await someAsyncMethod()

          if (res.status == 200) {
            ?
            if (logoData.logo) {
              this.sendFileToOther(/*...*/).then(async (res) => { // [here]
                  ?                               ??
                await someAsyncMethod()
              })
            }
            if (logoData.logo1) {
              this.sendFileToOther(/*...*/).then(async (res) => { // [here]
                  ?                               ??
                await someAsyncMethod()
              })
            }
          }
        })
      })
    },
  },
}

標籤：javascript Vue.js 异步

上一篇：ESLintVue多字組件

下一篇：如何在Vuetify.js中使用反向標簽對齊v-text-field標簽？