如何使用 Expo 在 React-Native 应用程序上按顺序运行异步函数

Question

更新

结合以下两种解决方案，我写道：

const startMusic = async () => {
    let currentSong
    let songPath
    const songArray = [
      { path: require("../assets/sounds/Katsu.mp3"), song: mainTheme },
      { path: require("../assets/sounds/MainTheme2.mp3"), song: mainTheme2 },
      { path: require("../assets/sounds/MainTheme3.mp3"), song: mainTheme3 },
    ]

    for (var i = 0; i < songArray.length; i++) {
      currentSong = songArray[i].song
      songPath = songArray[i].path
      try {
        await currentSong.loadAsync(songPath)
        await currentSong.playAsync()
        // setSoundObject(currentSong)
        console.log("Music will start")
        return new Promise(resolve => {
          currentSong.setOnPlaybackStatusUpdate(playbackStatus => {
            if (playbackStatus.didJustFinish) {
              console.log("Just finished playing")
              resolve()
            }
          })
        })
      } catch (error) {
        console.log(`Error: ${error}`)
        return
      }
    }
  }

这实际上播放了歌曲，控制台日志准时出现（"Just finished playing"恰好在歌曲结束时出现）我正在尝试弄清楚如何播放下一首歌曲..它如何知道它何时播放完最后一首歌曲？

return new Promise(resolve => {
  currentSong.setOnPlaybackStatusUpdate(playbackStatus => {
    if (playbackStatus.didJustFinish) {
      console.log("Just finished playing")
      resolve()
    }
  })
}).then(() => console.log("Next song?"))

想出如何将 .then 放在哪里，以便在 "Just finished playing" 之后立即将其写入控制台日志我只是想看看如何实际将下一首歌曲放在那里（然后当然是告诉它什么时候回到数组中的第一首歌曲）

原版Post

正在为使用声音文件的 expo-av 库的 React 本机应用程序分配作业。现在，该应用程序在上下文文件中设置了一个 startMusic 函数，负责播放该应用程序的背景音乐。目前只有一首歌：

const startMusic = async () => {
    try {
      await mainTheme.loadAsync(require("../assets/sounds/Katsu.mp3"))
      await mainTheme.playAsync()
      setSoundObject(mainTheme)
      console.log("The first song is playing! Enjoy!")
    } catch (error) {
      console.log(`Couldnt load main theme: ${error}`)
      return
    }
  }

它在主屏幕组件的文件中使用如下：

const { startMusic } = useContext(MusicContext)

useEffect(() => {
  startMusic()
}, [])

对于第二首歌，我在 MusicContext 文件中写了另一个 const：

const secondSong = async () => {
    try {
      await mainTheme2.loadAsync(require("../assets/sounds/MainTheme2.mp3"))
      await mainTheme2.playAsync()
      setSoundObject(mainTheme2)
      console.log("Now playing the second track. Enjoy!")
    } catch (error) {
      console.log(`Could not play the second song: ${error}`)
      return
    }
  }

Annnnnd…这就是我的问题所在。我知道这行不通，但我在组件文件中写了这个，试图在第一首歌曲之后播放第二首歌曲

useEffect(() => {
    startMusic()
      .then(secondSong())
  }, [])

我知道事情远不止于此，但我遇到了麻烦。

Answer 1

.then() 接受一个函数，但您通过调用 secondSong 提供了函数执行的结果。

做：

useEffect(() => {
    startMusic()
      .then(() => secondSong())
  }, [])

或者在secondSong之后去掉():

useEffect(() => {
    startMusic()
      .then(secondSong)
  }, [])

Answer 2

我认为你需要重新思考这个 problem/solution 更抽象。

而不是为你想播放的每一首歌曲都制作一个新的 const 和 promise（正如你所说，这是行不通的，而且不可扩展，比如你想要 10 首歌曲而不是 2 首），使 "startMusic" 成为播放歌曲数组的函数（每个数组索引都是 MP3 的文件路径，就像在您的示例中一样），以及然后 resolve/reject 根据需要承诺。

快速"startMusic"重写：

const startMusic(songArray) = async () => {
    for (var songIndex in songArray) {
      try {
        await mainTheme.loadAsync(require(songArray[songIndex]))
        await mainTheme.playAsync()
        setSoundObject(mainTheme)
        console.log("Song #", songIndex, "of ", songArray.length " is playing. Enjoy!")
    } catch (error) {
      console.log(`Couldnt load song: ${error}`)
      return
    }
  }
}

如果上面的 for-try-catch 结构不起作用，

A "Promise.all" 链在这里也很有用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

不熟悉 expo-av 库，所以可能会有一些特殊的怪癖需要注意，但我认为重写 "startMusic" 是一个抽象函数，可以播放 "N" 歌曲是一种更优化的方法，并且会 minimize/eliminate 你的问题。

Answer 3

你的代码的问题不只是运行一个接一个的函数（这和 startMusic().then(() => secondSong()) 一样简单，但仍然不能解决问题），而是你的函数实际上不要等歌曲播放完才解析

你希望这一行 await mainTheme.playAsync() 暂停函数执行直到歌曲结束，但根据文档 https://docs.expo.io/versions/latest/sdk/av/ 它实际上只是开始播放（而不是等待它完成）

话虽如此，您需要确定播放结束的时间，然后创建一个仅在播放结束后解析的 Promise，以便您的第二首歌曲只能在第一首之后开始播放

在没有错误处理等的最简单形式中，它看起来像这样

const startAndWaitForCompletion = async () => {
  try {
    await mainTheme.loadAsync(require('../assets/sounds/Katsu.mp3'))
    await mainTheme.playAsync()
    console.log('will start playing soon')
    return new Promise((resolve) => {
      mainTheme.setOnPlaybackStatusUpdate(playbackStatus => {
        if (playbackStatus.didJustFinish) {
          console.log('finished playing')
          resolve()
        }
      }
    })
  } catch (error) {
    console.log('error', error)
  }
}

技巧当然是 .setOnPlaybackStatusUpdate 侦听器，它会不时调用播放状态，通过分析状态可以判断歌曲已播放完毕。如果你滚动到我链接的页面底部，你会发现其他状态更新的例子

已更新

const startAndWaitForCompletion = async (playbackObject, file) => {
  try {
    await playbackObject.loadAsync(file)
    await playbackObject.playAsync()
    console.log('will start playing soon')
    return new Promise((resolve) => {
      playbackObject.setOnPlaybackStatusUpdate(playbackStatus => {
        if (playbackStatus.didJustFinish) {
          console.log('finished playing')
          resolve()
        }
      }
    })
  } catch (error) {
    console.log('error', error)
  }
}

////

const songs = [
  { path: require('../assets/sounds/Katsu.mp3'), song: mainTheme },
  { path: require('../assets/sounds/MainTheme2.mp3'), song: mainTheme2 },
  { path: require('../assets/sounds/MainTheme3.mp3'), song: mainTheme3 },
]


useEffect(() => {
  (async () => {
    for (let i = 0; i < songs.length; i++) {
      await startAndWaitForCompletion(songs[i].song, songs[i].path)
    }
  })()
}, [])

如何使用 Expo 在 React-Native 应用程序上按顺序运行异步函数

How to run async functions sequentially on a React-Native app, using Expo

javascript

reactjs

es6-promise

react-native

expo

更新

原版Post

如何使用 Expo 在 React-Native 应用程序上按顺序 运行 异步函数

How to run async functions sequentially on a React-Native app, using Expo

javascript

reactjs

es6-promise

react-native

expo

更新

原版Post

如何使用 Expo 在 React-Native 应用程序上按顺序运行异步函数