如何解决该错误>> WARN可能的未处理承诺拒绝（id：0）：

Question

我正在尝试制作一个应用程序来记录和播放所记录的内容，但这个错误出现在我面前

错误类型错误：_this2.onStartPlay 不是函数。 （在 '_this2.onStartPlay()' 中，'_this2.onStartPlay' 未定义） 错误参考错误：找不到变量：onPausePlay

LOG audioSet {“AVEncoderAudioQualityKeyIOS”：96，“AVFormatIDKeyIOS”：“aac”，“AVNumberOfChannelsKeyIOS”：2，“AudioEncoderAndroid”：3，“AudioSourceAndroid”：1} LOG audioSet {“AVEncoderAudioQualityKeyIOS”：96，“AVFormatIDKeyIOS”：“aac”，“AVNumberOfChannelsKeyIOS”：2，“AudioEncoderAndroid”：3，“AudioSourceAndroid”：1} LOG uri：已经在录制 WARN 可能的未处理的 Promise Rejection (id: 0):

这是我的代码

import React, {Component} from 'react';

import AudioRecorderPlayer, {
  AVEncoderAudioQualityIOSType,
  AVEncodingOption,
  AudioEncoderAndroidType,
  AudioSet,
  AudioSourceAndroidType,
} from 'react-native-audio-recorder-player';

import {View, Button, Text} from 'react-native';

export default class App extends Component {
  onStartRecord = async () => {
    const path = 'hello.m4a';
    const audioSet = {
      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
      AudioSourceAndroid: AudioSourceAndroidType.MIC,
      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
      AVNumberOfChannelsKeyIOS: 2,
      AVFormatIDKeyIOS: AVEncodingOption.aac,
    };
    console.log('audioSet', audioSet);
    const uri = await this.audioRecorderPlayer.startRecorder(path, audioSet);
    this.audioRecorderPlayer.addRecordBackListener(e => {
      this.setState({
        recordSecs: e.current_position,
        recordTime: this.audioRecorderPlayer.mmssss(
          Math.floor(e.current_position),
        ),
      });
    });
    console.log(`uri: ${uri}`);
  };

  onStopRecord = async () => {
    const result = await this.audioRecorderPlayer.stopRecorder();
    this.audioRecorderPlayer.removeRecordBackListener();
    this.setState({
      recordSecs: 0,
    });
    console.log(result);
  };

  constructor(props) {
    super(props);

    this.state = {
      isLoggingIn: false,
      recordSecs: 0,
      recordTime: '00:00:00',
      currentPositionSec: 0,
      currentDurationSec: 0,
      playTime: '00:00:00',
      duration: '00:00:00',
    };

    this.audioRecorderPlayer = new AudioRecorderPlayer();
    this.audioRecorderPlayer.setSubscriptionDuration(0.09); // optional. Default is 0.1
    // onPausePlay = async e => {
    //   await this.audioRecorderPlayer.pausePlayer();
    // };

    // onStopPlay = async e => {
    //   console.log('onStopPlay');

    //   this.audioRecorderPlayer.stopPlayer();

    //   this.audioRecorderPlayer.removePlayBackListener();
    // };
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          alignContent: 'center',
          alignSelf: 'center',
        }}>
        <View>
          <Text>InstaPlayer</Text>
          <Text>{this.state.recordTime}</Text>
          <Button
            title="Record"
            mode="contained"
            onPress={() => this.onStartRecord()}
            // onPress={onStartRecord}
          />
          <Button title="stop" onPress={() => this.onStopRecord()} />

          <Text>
            {this.state.playTime} / {this.state.duration}
          </Text>

          <Button title="play" onPress={() => this.onStartPlay()} />
          {/* <Button title="pause" onPress={() => this.onPausePlay()} /> */}
          {/* <Button title="stop" onPress={() => this.onStopPlay()} /> */}
        </View>
      </View>
    );
  }
}

Answer 1

JavaScript 从根本上不是异步的。这意味着如果你的代码做了一些需要一些时间来完成的事情，你的代码不会自动等待它完成。这就是 Promises 的用武之地，它允许我们处理这些不能立即解决的事件。

当您使用 Promise 或使用在后台使用 Promise 的库时，您必须提供两个事件。第一个是代码运行成功（即它“解决”），第二个是代码抛出错误（即它“拒绝”）。如果您不提供处理错误状态的逻辑，则称为“未处理的承诺拒绝”。

在不知道您正在使用的库的详细信息的情况下，很难为您提供有关如何更改代码的确切详细信息，但是我可以有根据地猜测 onStartRecord、onStopRecord、onStartPlay、onPausePlay 和 onStopPlay 函数都是异步的他们中的任何一个都可能导致引发警告。

尝试更改此 sn-p：

<Button
  title="Record"
  mode="contained"
  onPress={() => this.onStartRecord()}
/>

到这里：

<Button
  title="Record"
  mode="contained"
  onPress={() => {
    return this.onStartRecord()
             .then((result) => { console.log(result); })
             .catch((error) => { console.log(error); });
  }
/>

看看会发生什么。