Отправка данных в массиве объектов на сервер

#ajax #django-rest-framework #axios

#ajax #django-rest-framework #axios

Вопрос:

Я разрабатываю приложение, которое, когда у меня нет подключения к Интернету, оно должно отправлять на localStogare, позже я мог бы отправить данные на сервер, когда он подключен к Сети, я сделаю это вручную.

Как только я получу данные с помощью JS из localStorage, сохраните их в переменной

 let encuestas = [];

if ( localStorage.getItem('encuestas') ) {
    encuestas = JSON.parse(localStorage.getItem('encuestas'))
}
  

после этого у меня есть массив, подобный этому:

 encuestas = [
{
        "code": "2124",
        "sells": 2124,
        "latitude": "14.8550091",
        "longitude": "-90.0685453",
        "visit_date": "2019-04-02",
        "visit_time": "21:23:54",
        "user": 1,
        "answers": [
            {
                "question": 4,
                "answer": "Si"
            },
            {
                "question": 1,
                "answer": "No"
            }
        ]
    },
    {
        "code": "2140",
        "sells": 2140,
        "latitude": "14.8550156",
        "longitude": "-90.0685451",
        "visit_date": "2019-04-02",
        "visit_time": "21:40:13",
        "user": 2,
        "answers": [
            {
                "question": 4,
                "answer": "No"
            },
            {
                "question": 1,
                "answer": "No"
            }
        ]
    },
    {
        "code": "2146",
        "sells": 2146,
        "latitude": "14.855016",
        "longitude": "-90.0685448",
        "visit_date": "2019-04-02",
        "visit_time": "21:46:17",
        "user": 2,
        "answers": [
            {
                "question": 4,
                "answer": "No"
            },
            {
                "question": 1,
                "answer": "No"
            }
        ]
    }
]
  

теперь мне нужно отправить данные с циклом на сервер, я выполнил эти функции, но я не могу отправить данные, я не получаю никакого сообщения об ошибке

Это должно получить индекс данных, который мне нужно отправить

 const sendDataToServer = encuesta => {
    axios({
        method: 'post',
        headers: {
            'Authorization': `Token ${sessionStorage.getItem("token")}`
        },
        url: `${baseURL}customers/`,
        contentType: 'application/json',
        data: encuesta
    })
    .then(res => {
        encuestas.shift()
    })
    .catch(e => {
        console.log(e)
    })
}

  

Это должно отправить каждый из них на сервер, а затем, delEcuestas, должно установить массив как пустой массив

 const enviarDatos = () => {
    for ( const i in encuestas ) {
        sendDataToServer(encuestas[i])
    }

    delEncuestas();
}
  

Я надеюсь, что вы сможете мне помочь, спасибо!!

Ответ №1:

Я не сразу понимаю, почему при выполнении этого кода не выполняются запросы. Тем не менее, мы, вероятно, сможем заставить это работать с каким-нибудь более читаемым и идиоматичным кодом.

Изменение массива с помощью shift() , которое является частью условия цикла, внутри конструкции цикла обычно не рекомендуется (если это не реальная ошибка). Так что в любом случае стоит провести рефакторинг этого кода.

Теперь, предполагая, что ваш серверный сервер может обрабатывать запросы в любой последовательности, то, вероятно, целесообразно использовать axios.all() функцию для асинхронного выполнения запросов.

Что-то вроде этого:

 const enviarDatos = () => {
    let axiosPromises = enquestas.map(enquesta => {
            return axios({
                method: 'post',
                headers: {
                    'Authorization': `Token ${sessionStorage.getItem("token")}`
                },
                url: `${baseURL}customers/`,
                contentType: 'application/json',
                data: encuesta
            });
        });

    axios.all(axiosPromises).then(results => {
            // All promises are resolved/rejected
            // E.g. results = [promiseResolution1, promiseResolution2, etc.]
            delEncuestas();
        }
    ).error((err) => {});
}
  

Комментарии:

1. Спасибо за вашу помощь, теперь я лучше понял, что мне нужно делать