主页 / 问题 / 1439072
Accepted
E_K
Asked:2022-08-14 02:04:38 +0000 UTC2022-08-14 02:04:38 +0000 UTC

使用 async/await 的正确方法是什么？

  • 772

我需要功能按照调用顺序工作。添加async/await但没有帮助。如何正确使用？

该函数analyze遍历数组并调用写入其中的函数并对结果求和。

该函数initFingerprintJS应该返回一个值，但是，我不熟悉 JS，因此它是在这些回调、promise 和async/await. 因此，我决定直接写入变量。

期望的结果：开始 -> 分析 (c:0, c:1) -> SET ID -> ID -> END

const counters = [
  function() {
    return navigator.webdriver ? 5 : 0;
  },
  function() {
    let agent = window.navigator.userAgent;

    if (/headless/i.test(agent) || /PhantomJS/i.test(agent)) {
      return 3;
    }

    return 0;
  },
  function() {
    navigator.permissions.query({
      name: 'notifications'
    }).then(function(permissionStatus) {
      if (Notification.permission === 'denied' && permissionStatus.state === 'prompt') {
        return 10;
      }
    });

    return 0;
  }
];

let id;

window.addEventListener('DOMContentLoaded', async function() {
  console.log('START');

  let res = await analyze();

  initFingerprintJS();

  console.log('ID: ' + id);

  console.log('END');
});

async function analyze() {
  let r = 0;

  counters.forEach((v, k) => {
    console.log('c: ' + k);
    r += v();
  });

  return r;
}


function initFingerprintJS() {
  let fpPromise =
    import ('https://openfpcdn.io/fingerprintjs/v3')
    .then(FingerprintJS => FingerprintJS.load({
      region: 'eu'
    }));

  fpPromise
    .then(fp => fp.get())
    .then(result => {
      console.log('SET ID');
      id = result.visitorId;
    });
}

javascript

1 个回答

  1. Best Answer

    本身async什么也不做。为了正确操作，您还需要安排await.

    为了使用，await函数必须返回Promise，这是预期的。

    在问题的代码中，没有任何函数返回Promise，因此无法等待执行。

    最简单的解决方案initFingerprintJS。足够添加return。

    return fpPromise

    剩下的两个函数需要修改为 return Promise。

    例如与setTimeout.

    function analyze() {
  return new Promise(r => // создаем новый Promise
    setTimeout(
      () => r(console.log('ANALYZE')), // вызываем `r` переводя `Promise` в состояние resolved
      1000));
}

    现在在 main 函数中，您需要添加缺少的await

    await setFingerPrint();

    由于analyze没有异步操作，所以async为这个函数添加是没有意义的。

    组装示例：

    const counters = [
  function() {
    return 1;
  },
  function() {
    return 2;
  }
];

let id;

window.addEventListener('DOMContentLoaded', async function() {
  console.log('START');

  analyze();

  await setFingerPrint();

  console.log('END')
});

function analyze() {
  let r = 0;

  counters.forEach((v, k) => {
    console.log('c: ' + k);
    r += v();
  });

  return r;
}

function setFingerPrint() {
  return new Promise(r => {
    if (window.requestIdleCallback) {
      requestIdleCallback(() => r(initFingerprintJS()));
    } else {
      setTimeout(() => r(initFingerprintJS()), 500);
    }
  });
}

function initFingerprintJS() {
  let fpPromise =
    import ('https://openfpcdn.io/fingerprintjs/v3')
    .then(FingerprintJS => FingerprintJS.load({
      region: 'eu'
    }));

  return fpPromise
    .then(fp => fp.get())
    .then(result => {
      console.log('SET ID');
    });
}

    • 3

相关问题