如何取消订阅从承诺返回的函数useEffect ?

Question

我调用promise，它返回一个退订函数。如何使用useEffect中的返回函数取消订阅?

useEffect(()=>{
let unSub = ()=>{}   
async function run(){
unSub = await promise();
}
run();

return unSub
})

这样想，不知道这是不是正确的方式，做这件事的反应方式是什么?

Answer 1

我不认为针对你的具体情况有一个特定的知名做法。传统的React退订async动作的方法是在useEffect的主体中使用布尔值，并在清理时重置它。

如果您正在使用fetchapi,AbortControllerapi可以取消请求。如果你正在使用axios，有一个叫做cancelTokens的东西可以取消请求。

也许这是一个解决方案:

useEffect(()=>{
let unSub = ()=>{};
let isMounted   = true;
let newUnSubSet = false;
async function run(){
unSub = await promise();
newUnSubSet = true;
}

run();


return () => {
if (newUnSubSet) {
unSub();
}
newUnSubSet = false;
isMounted = false;
}
})

Answer 2

useEffect(()=>{
let unSub;   
async function run(){
unSub = await promise();
}
run();

return ()=> unSub && unSub();
})

或基本的Pub/Sub模式:

useEffect(()=>{
let handlers= [];   
async function run(){
unSub = await promise();
handlers.push(unSub);
}
run();

return ()=> handlers.forEach(handler=> handler());
})

Answer 3

// on component mount
useEffect(() => {
// do some stuff ie. subscribe
// on component unmount
return () => {
// do some stuff ie. unsubscribe
}
}, [/* dependencies */])