Javascript Ожидание разрешения Promise в другой функции перед продолжением асинхронной функции для анимации

Question

У меня есть приложение собственного кода с функцией анимации, и я пытаюсь создать вспомогательную функцию анимации, которая ожидает разрешения значения на другом экране, прежде чем продолжить выполнение и вернуть значение функции анимации.

Функция помощника по анимации зависит от того, купил ли пользователь подписку или не купил ее на другом экране, и я передаю обещание на втором экране, чтобы определить, покупает ли пользователь подписку.После того, как это обещание выполнено, я хочу продолжить выполнение моей первой вспомогательной функции анимации и вернуть значение того, купил ли пользователь подписку на мою первую анимационную функцию.

Вот моя анимационная функция

Animated.timing(position, {
             toValue: {x: width, y: 0},
             duration: 300,
           }).start(async() => {
            const touchJustAdded = await animationHelper({props})
             this.setState({touchJustAdded: actionAllowed}) //This should update the state with the value returned from the animation helper before continuing animation. 
//touchJustAdded is used in another function to control the text shown in the animated view, so I need the value to be set here before continuing the animation.  I also don't want to continue the animation until the user returns from the BuySubscription screen. 
               Animated.timing(position, {
               toValue: {x: 0, y: 0},
               delay: 1200,
               duration: 300,
             })
           })

Вот моя вспомогательная функция анимации

const AnimationHelper = async ({props}) => {
  //check if user has a subscription or other conditions are met, do stuff, then return true.   Otherwise, navigate to BuySubscription screen
  navigation.navigate('BuySubscription',{promiseCallback})
  //I want to pause execution here until the promiseCallback promise is resolved
  return subscriptionBought //I need to wait for the user to complete their action on the other screen and then somehow return the value to the animationHelper before returning here
}

Вот как я создаю обещание:

promiseCallback = async (subscriptionBought) => {
  return new Promise((resolve,reject) => {
    resolve( subscriptionBought)
  })
}

Это обещание разрешается на экране BuySubscription с этим кодомкогда пользователь уходит от этого экрана:

  this.props.navigation.state.params
    .promiseCallback(this.state.subscriptionBought)

Я хочу дождаться разрешения обещания, прежде чем продолжить AnimationHelper.

Любая помощь приветствуется!Я искал, но я не понимаю, как ожидать обещание вызова в функции анимации, не вызывая его.

Answer 1

Вы также должны будете await в своем обещании function.А также придется ждать, когда вы вызовете функцию обещания.

e.g.

promiseCallback = async (subscriptionBought) => {
  return await new Promise((resolve,reject) => {
    resolve( subscriptionBought)
  })
}

Пожалуйста, смотрите мой ответ здесь

Answer 2

Вы можете сделать это без обещания, как это:

Screen1:

promiseCallback = (subscriptionBought) => {
  alert("Result: " + subscriptionBought)
  // continue your animation here
}

const Animation = async ({props}) => {
  //start animation
  navigation.navigate('BuySubscription', {promiseCallback: this.promiseCallback})

  return
}

Теперь в вашем BuySubscription экранном вызове promiseCallback на componentWillUnmount событиях:

componentWillUnmount() {
  this.props.navigation.state.params.promiseCallback(this.state.subscriptionBought);
}

Answer 3

попробуйте

const functionToAwait = async ({props}) => {
  let hold = await promiseCallback();
  if(hold){
  navigation.navigate('BuySubscription',hold)
  //I want to pause execution here until the promiseCallback promise is resolved
  return
  }
}