javascript - 创建一个在变量未定义时解析的 Promise
问题描述
我正在尝试创建一个在变量未定义时解决的 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 的函数
解决方案
通过使用 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();
编辑
实际上,可以将 Promise 的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;
});
推荐阅读
- node.js - 在生产代码中使用 CLI 是否正常?
- reactjs - react-router v5 how to properly accomplish nested routes?
- javascript - break or continue a for or while/do..while/for..in/for..of loop from a callback function inside of its' body?
- caching - Redis 为每个数据库设置 maxmemory
- report - Report Designer Tables join
- wordpress - iOS 通用链接在 Nginx 中不起作用?
- javascript - 反应复选框值不变
- time-complexity - 算法作业的运行时间
- networking - 为什么自托管应用程序的 nslookup 域给出错误“;;从 192.168.1.15 获得递归不可用,尝试下一个服务器”而不是其他域?
- python - 如何在 VS 代码下找到更多 Juypter 执行按钮?