ReactJS：具有递归功能的axios POST

Question

CreateFolder.js

嗨！！我正在尝试循环一个 js 树 object 以使用 de Egnyte API.

为 childs 元素创建一个文件夹

我想我提出的问题是错误的。

如果 parent 有 child，我的递归函数正在检查，如果为真，循环他的 child，如果 child 不是 parent，我想用这个 child ID 创建文件夹。

问题是当我看到控制台时，首先打印的是“-----ADD-----”，然后是“-----”添加'所以我不明白为什么他们不同时

API 工作正常，这创建了我的 6 个文件夹，这段代码的问题是当我循环我原来的有 400 个 child 的 TREE 时，我需要创建这 400 个文件夹但是回调不起作用，这会创建大约 60 个文件夹，并且有很多 403 错误。我觉得短时间内有很多电话。

我试图调用函数 addFolder 超时或执行函数异步但也不起作用。

我的问题解释清楚了吗？有人可以帮助我吗？

非常感谢！！

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

您提供的描述似乎已达到速率限制（根据 second/daily）。

尝试探索失败请求中的响应 header 以获得更多信息：

您超出了哪些配额（根据 second/daily）
何时可以重试请求（例如 Retry-After header）

您可以尝试 2 种解决方案：

如果 API 支持，请使用批量操作（通过单个请求创建所有实体）。这是一个更好的解决方案
在失败的请求超时后重试请求 header（例如 Retry-After header）

Answer 2

我用带索引的 setTimeout 解决了我的问题，因为我的函数在 3 秒后执行了整个事情，有了这个索引，为每个项目添加更多时间，并在前一个项目后 3 秒执行每个项目

我的功能之后：

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

我之前的函数：

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

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

ReactJS：具有递归功能的axios POST

ReactJS: axios POST with recursive function

post

settimeout

async-await

reactjs

axios