創建一個在變量未定義時解決的承諾

Question

我正在嘗試創建一個在變量不是undefined時解析的 Promise 。

代碼示例

https://codesandbox.io/s/quizzical-feynman-ktvox?file=/src/index.js

let fetchedPromise = new Promise((resolve, reject) => {
  const check = ()=>{
    setTimeout(() =>{
    console.log("checking")
    if (dataFetched) resolve(dataFetched);
    else check()
    }, 100);
  }
  check()
});

const waitForDataFromAnotherComponent = async () => {
  let result = await fetchedPromise;
  console.log("Result: ", result);
};

const assignData = () => {
  setTimeout(() => {
    dataFetched = 1000;
    console.log(dataFetched);
  }, 5000)
};

waitForDataFromAnotherComponent();
assignData();

這有效，但我發現它效率低下，因為它容易調用堆棧並且似乎是錯誤的。

我嘗試過的其他非工作解決方案：

//-------------SOLUTION 1
let fetchedPromise = new Promise((resolve, reject) => {
  const check = ()=>{
    if (dataFetched) resolve(dataFetched);
    else check()
  }
  check()
});

//--------------------SOLUTION 2
let fetchedPromise = new Promise((resolve, reject) => {
   if (dataFetched) resolve(dataFetched);
});

設想

我需要一個類似於解決方案 3 的函數，它不依賴於 setTimeout

Answer 1

通過使用 Javascript 代理解決

基本上，我為 dataFetched 分配了一個代理對象來監聽變化。 我重新創建了監聽功能，因為它必須包含resolve()

let dataFetched
let x = {
  aListener: function (val) {},
  set a(val) {
    dataFetched = val;
    this.aListener(val);
  },
  get a() {
    return dataFetched;
  },
  registerListener: function (listener) {
    this.aListener = listener;
  }
};

let fetchedPromise = new Promise((resolve, reject) => {
  x.registerListener(function (val) {
    console.log("yeyyyyyyyyyyyyyyy");
    if (dataFetched) resolve(dataFetched);
  });
});

const waitForDataFromAnotherComponent = async () => {
  let result = await fetchedPromise;
  console.log("Result: ", result);
};
const assignData = async () => {
  await new Promise((resolve, reject) =>
    setTimeout(() => {
      x.a = 1000;
      console.log(dataFetched);
      resolve(dataFetched);
    }, 1000)
  );
};

waitForDataFromAnotherComponent();
assignData();

編輯

其實這是可能的外部化resolve()的承諾，但一些缺點的功能說明這里

例子

let dataFetched
var promiseResolve, promiseReject;

let x = {
  aListener: function (val) {
    if (dataFetched) promiseResolve(dataFetched);
},
  set a(val) {
    dataFetched = val;
    this.aListener(val);
  },
  get a() {
    return dataFetched;
  },
  registerListener: function (listener) {
    this.aListener = listener;
  }
};

let fetchedPromise = new Promise((resolve, reject) => {
 promiseResolve = resolve;
  promiseReject = reject;
});