programing

vuejs에서 다른 작업을 수행하기 전에 함수의 응답을 기다리는 방법

prostudy 2022. 7. 3. 09:10
반응형

vuejs에서 다른 작업을 수행하기 전에 함수의 응답을 기다리는 방법

이미지 업로드 기능이 있어 이 업로드가 완료되면 데이터가 반환되며, 그 기능 아래에 다른 작업을 하기 위한 라인이 있습니다.문제는 vuejs/module이 첫 번째 함수가 작업을 완료할 때까지 기다리지 않는다는 것입니다.코드는 다음과 같습니다.

methods : {

    uploadImage (file) {

        this.uploadModule.upload(file); 

        if(this.uploadModule.isSuccess) {
             this.images.push(this.uploadModule.response)
        }

      // someFunction()
  }
}

따라서 위의 예에서는 upload() 메서드에 시간이 걸리기 때문에someFunction()부품이 동작하기 전에this.images.push()일부.

다른 기능을 실행하기 전에 업로드가 완료될 때까지 기다릴 수 있는 방법이 있습니까?

업로드 방법에서 Promise를 반환하고 Promise의 "next" 방법으로 코드의 다음 부분을 콜백으로 실행할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

다음과 같이 표시됩니다.

methods : {

  uploadImage (file) {

    this.uploadModule.upload(file).then(function () {
      if(this.uploadModule.isSuccess) {
        this.images.push(this.uploadModule.response)
      }

      // someFunction()
    })
  }
}

업로드가 완료되지 않은 경우 Promise reject 콜백을 사용하여 오류를 처리하고 캐치 방식으로 오류를 처리할 수도 있습니다.

methods : {

  uploadImage (file) {

    this.uploadModule.upload(file).then(function () {
      this.images.push(this.uploadModule.response)
    }).catch(function (error) {
      console.log(error)
    })
  }
}

언급URL : https://stackoverflow.com/questions/46950716/how-to-wait-for-a-response-from-a-function-before-doing-something-else-in-vuejs

반응형