javascript - react native : Can't get (apparently async) function to finish before moving on

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 3 年前。

使用 React Native 和 @mauron85/react-native-background-geolocation ，我正在尝试创建一个函数来根据后台地理位置是否处于事件状态返回 true/false。

在文档中，我们看到一个示例:

    BackgroundGeolocation.checkStatus(status => {
      console.log('[INFO] BackgroundGeolocation service is running', status.isRunning);
      console.log('[INFO] BackgroundGeolocation services enabled', status.locationServicesEnabled);
      console.log('[INFO] BackgroundGeolocation auth status: ' + status.authorization);

      // you don't need to check status before start (this is just the example)
      if (!status.isRunning) {
        BackgroundGeolocation.start(); //triggers start on start event
      }
    });

现在，我真的不明白为什么没有函数只返回状态，但无论如何，我需要这样一个函数，尝试如下。

export function isBackgroundTracking() {

  // Null means undetermined, but should never be returned that way.
  var result = null;

  // This is accurately logged first.
  console.log('One');

  // This should finish before moving on.
  BackgroundGeolocation.checkStatus(status => {
    result = status.isRunning;
    // This is inaccurately logged third.
    console.log('Two:', result);
  });

  // This is inaccurately logged second.
  console.log('Three:', result);

  // This is inaccurately returned as null, because `checkStatus` is apparently asynced.
  return result;

}

在界面代码中，按钮调用函数的方式是这样的:

<CtaButton
  bgColor={Colors.backgroundAlt}
  onPress={() => {
    stopBackgroundTracking();
    let result = isBackgroundTracking();
    console.log('Result:', result);
  }}
>

运行这段代码，输出如下:

 LOG  One
 LOG  Three: null
 LOG  Result: null
 LOG  Two: false

<小时/>

我也尝试过使用 async/await，如下所示:

export async function isBackgroundTracking() {

  // Null means undetermined, but should never be returned that way.
  var result = null;

  // This is accurately logged first.
  console.log('One');

  // This should finish before moving on.
  await BackgroundGeolocation.checkStatus(status => {
    result = status.isRunning;
    // This is inaccurately logged third.
    console.log('Two:', result);
  });

  // This is inaccurately logged second.
  console.log('Three:', result);

  // This is inaccurately returned as null, because `checkStatus` is apparently asynced.
  return result;

}

...还有...

<CtaButton
  bgColor={Colors.backgroundAlt}
  onPress={async () => {
    stopBackgroundTracking();
    let result = await isBackgroundTracking();
    console.log('Result:', result);
  }}
>

但结果是完全一样的。

按照 console.log 进行操作上面几行，我怎样才能让它按正确的顺序运行？这不一定是异步的，事实上我不希望它是异步的，但只要我得到一个返回我需要的值的函数，我就可以接受它是异步的。

Answer 1

export async function isBackgroundTracking() {

  // Null means undetermined, but should never be returned that way.
  var result = null;

  // This is accurately logged first.
  console.log('One');

  // This should finish before moving on.
  await new Promise(res => {
    BackgroundGeolocation.checkStatus(status => {
      result = status.isRunning;
      // This is inaccurately logged third.
      console.log('Two:', result);

      // resolve the promise
      res();
    });
  });

  // This is inaccurately logged second.
  console.log('Three:', result);

  // This is inaccurately returned as null, because `checkStatus` is apparently asynced.
  return result;

}

您还可以将其提取到一个函数中以使其简单

const checkStatus = () => new Promise((res,rej) => BackgroundGeolocation.checkStatus(res,rej));

export async function isBackgroundTracking() {

 ...

 result = (await checkStatus()).isRunning;

 ...

}

Turning callbacks into promises