ReactJS:axios POST带有递归函数

Question

CreateFolder.js

嗨！！我正在尝试循环一个js树对象，用de Egnyte API为childs元素创建一个文件夹。

我想我把问题提出错了。

我的递归函数是检查父级是否有子级，如果这是真的，循环他的子级。如果子级不是父级，我想用这个子级id创建文件夹。

问题是，当我看到控制台时，首先是所有"-----ADD-----"的打印，然后是所有"---------------ADDED"的打印。所以我不明白为什么它们不是同时

API运行良好，这创建了我的6个文件夹，这段代码的问题是当我循环我的原始TREE时，它有400个子项，我需要创建这400个文件夹，但回调不起作用，这会创建大约60个文件夹，有403个错误。我认为短时间内有很多电话。

我试着在超时的情况下调用函数addFolder，或者执行函数async，但也不起作用。

我很好地解释了我的问题？有人能帮我吗？

非常感谢！！

import { ConnectingAirportsOutlined } from "@mui/icons-material"
import axios from "axios"
import { useEffect, useState } from "react"
import { useSelector } from "react-redux"
export default function CreateFolders() {
console.log('======CreateFolders=====')
// const state = useSelector(state => state)
// const tree = state.assets.tree
const tree = [
{
id: '1000',
name: 'GRUPO GENERADORES',
child: [
{
id: '1100',
name: 'MOTORES',
child: [
{
id: '1100.1',
name: 'MOTOR 1'
},
{
id: '1100.2',
name: 'MOTOR 2'
},
{
id: '1100.3',
name: 'MOTOR 3'
},
]
},
{
id: '1200',
name: 'ALTERNADORES',
child: [
{
id: '1200.1',
name: 'ALTERNADOR 1'
},
{
id: '1200.2',
name: 'ALTERNADOR 2'
},
{
id: '1200.3',
name: 'ALTERNADOR 3'
}
]
}
]
}
]
useEffect(() => {
getTreeItems(tree)
}, [tree])
const api = 'https://test.egnyte.com/pubapi/v1/fs/Shared/test/'
const headers = {
"headers": {
"Authorization": "Bearer XXXXXXXXXX",
"Content_type": "application/json"
}
}
const body = {
"action": "add_folder"
}
const addFolder = async (id) => {
const endpoint = api + id
await axios.post(endpoint, body, headers).then(res => {
console.log('OK')
return
}).catch((error) => {
console.log('ERROR')
})
}
const getTreeItems = treeItems => {
return treeItems.map(item => {
if (item.child && item.child.length > 0) {
getTreeItems(item.child)
}
if (item.id.includes('.')) {
console.log('-------ADD-------')
console.log(item.id)
addFolder(item.id)
console.log('-------ADDED')
}
})
}
return (
<>
<h2>CreateFolders</h2>
</>
)
}

Answer 1

您提供的描述似乎达到了速率限制(每秒/每天)。

尝试探索失败请求中的响应标头以获取有关的更多信息

1. 你超过了什么样的配额(每秒/每天)
2. 何时可以重试请求(例如Retry-After标头)

有两种解决方案可以尝试：

1. 如果API支持批量操作(通过单个请求创建所有实体)，则使用批量操作。这是一个优选的解决方案
2. 在从失败的请求标头(例如Retry-After标头)获得超时后重试请求

Answer 2

我用一个索引解决了setTimeout的问题，因为我的函数在3秒钟后执行整个任务，有了这个索引，每个项目都增加了更多的时间，并且在前一个之后3秒钟执行每个项目

我的功能之后：

folders.map((id) => {
setTimeout(() => {
addFolder(id)
}, 3000)
})

我之前的功能：

folders.map((id, index) => {
setTimeout(() => {
addFolder(id)
}, 3000 * index)
})

这很傻，但我不知道setTimeout是如何工作的