Home > Mobile >  ReactJS: axios POST with recursive function
ReactJS: axios POST with recursive function

Time:05-25

CreateFolder.js

Hi!! I'm trying loop an js tree object to create a folder for the childs elements with de Egnyte API.

I think I have posed the problem wrong.

My recursive funcion is cheking if the parent have childs, if this true, loop his childs, if the child isn't a parent, i want to create the folder with this child id.

The problem is when I see the console, first there are all prints of the '-----ADD-----', after that, there are all prints of the '-----ADDED' so I don't understant why they aren't simultaneously

The API works fine, this create my 6 folders, the problem of this code is when I loop my original TREE that have 400 childs, and I need to create this 400 folders but the callbacks doesn't work, this creates about 60 folders, and there are much 403 errors. I think there are much calls in a short time.

I tried to call the function addFolder with a time out or doing the function async but doesn't work too.

I explained my problem well? Can someone help me?

Thank you so much!!

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>
        </>
    )
}

CodePudding user response:

The description you provided seems like you reached the rate limit (per second/daily).

Try to explore the response headers in failed requests to get more information about:

  1. What kind of quotas have you exceeded (per second/daily)
  2. When you can retry the request (e.g Retry-After header)

There are 2 solutions you can try:

  1. Use bulk operation (create all the entities by single request) if the API supports it. This is a preferable solution
  2. Retry the request after the timeout you get from the failed request header (e.g Retry-After header)

CodePudding user response:

I solved my problem with the setTimeout with an index, because my function was executing the whole thing after 3 seconds, and with this index, add more time to every item, and executes each item 3 seconds after the previous one

My function after:

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

My function before:

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

It's silly but I didn't know how the setTimeout worked

  • Related