我想構建一棵樹，其中每個節點都用于 API 呼叫以獲取子節點；從根開始。這將遞回地完成，直到它到達TREE_DEPTH_LIMIT
export const search = async (searchTerm) => {
try {
const tree = {};
await createTree(searchTerm, tree);
return tree;
} catch (err: any) {}
};
const TREE_DEPTH_LIMIT = 3;
const createTree = async (searchTerm, tree) => {
if (counter === TREE_DEPTH_LIMIT) {
counter = 0;
return;
}
counter ;
tree[searchTerm] = {};
try {
const res = await axiosInstance.get(
`/query?term=${searchTerm}`
);
// res.data.terms is an array of strings
res.data.terms.forEach((term) => {
createTree(term, tree[searchTerm]);
});
} catch (err) {}
};
我試圖在createTree()上面的函式中遞回地執行此操作。它將在 API 呼叫中使用 searchTerm。然后它將回圈res.data.terms并根據條款呼叫createTree()每個。但是輸出不是我所期望的。
這是輸出：
const tree = {
apple: {
apple_tree: {},
tree: {},
},
};
預期輸出：（因為 TREE_DEPTH_LIMIT 是 3，它應該在樹中有 3 個級別）
const tree = {
apple: {
apple_tree: {
leaf: {},
},
tree: {
trunk: {},
},
},
};
還是我的解決方案完全不正確，我應該采用另一種方法？？
uj5u.com熱心網友回復：
一些問題：
counter似乎是一個全域變數，但在每次遞回回傳時效果不佳，counter應該恢復其值。最好為此使用區域變數，以便每個執行背景關系都有自己的版本。更好的辦法是讓它成為一個引數，讓它倒數而不是倒數。不會等待遞回呼叫，因此在所有子項都已填充之前，
search回傳的承諾可能會解決，因此您將使用不完整的樹。createTree這不是一個真正的問題，但呼叫者必須創建一個
tree物件并將其作為引數傳遞并不是最優雅的。我會重新設計函式，以便search創建該物件本身，然后使用遞回函式來創建子物件——所以我將該函式命名為createChildren，而不是createTree.
這是一個首先模擬該get方法的片段，因此您可以實際運行它：
// Mock for this demo
const axiosInstance = {async get(term) {const delay = ms => new Promise(resolve => setTimeout(resolve, ms));await delay(50);return {data: {terms: {"apple": ["apple_tree", "tree"],"apple_tree": ["leaf"],"leaf": [],"tree": ["trunk"],"trunk": []}[term.split("=")[1]]}};}}
const createChildren = async (searchTerm, depth) => {
if (depth-- <= 0) return {};
try {
const res = await axiosInstance.get(`/query?term=${searchTerm}`);
const promises = res.data.terms.map(async (term) =>
[term, await createChildren(term, depth)]
);
return Object.fromEntries(await Promise.all(promises));
} catch (err) {
console.log(err);
}
};
const TREE_DEPTH_LIMIT = 3;
const search = async (searchTerm, depth=TREE_DEPTH_LIMIT) =>
({[searchTerm]: await createChildren(searchTerm, depth)});
// Demo
search("apple").then(tree =>
console.log(tree)
);轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/537102.html