为什么不能将这个诺言的结果保存到变量中？

Question

我对JavaScript / ReactJS相当陌生，正在使用一个从用户那里收集enumerateDevices的函数，如下所示：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices。我很难将这个函数的结果存储到一个变量中。

我曾尝试将代码块转换为函数并返回值，但我得到的唯一结果是：“未定义”，“ {承诺对象...}”或只是空白值。

let x = ' ';

  // List cameras and microphones.

  navigator.mediaDevices
    .enumerateDevices()
    .then(function(devices) {
      devices.forEach(function(device) {
        console.log(device.kind + ': ' + device.label + ' id = ' + device.deviceId);

  //Only capture numbers
        x += device.deviceId.replace(/\D+/g, '');
      });
      console.log('>>>x ' + x);
    })
    .catch(function(err) {
      console.log(err.name + ': ' + err.message);
    });

这是我实际上可以从函数中获取值的唯一方法，但是，当然，变量仅在函数中可用，我需要能够在外部访问它。

---

  let x = ' ';

  // List cameras and microphones.

  const fetchX = () => {
    navigator.mediaDevices
      .enumerateDevices()
      .then(function(devices) {
        devices.forEach(function(device) {
          console.log(device.kind + ': ' + device.label + ' id = ' + device.deviceId);

  //Only capture numbers
          x += device.deviceId.replace(/\D+/g, '');
        });
        console.log('>>>x ' + x);
        return x;
      })
      .catch(function(err) {
        console.log(err.name + ': ' + err.message);
      });
  };

  console.log('>>>>>>>>>>>>>>>>> enumerateDevices: ' + fetchX());

我尝试了此代码的多种变体以尝试返回一个值，包括将return关键字放置在各个位置，但到目前为止尚未成功。

在这种情况下是否可以返回变量，或者我需要采用其他方法吗？我希望输出是一长串数字，就像我在控制台中看到的那样，但是当我尝试捕获变量中的值时，只能得到上述输出。