0
307
ViewsLas claves del diccionario Javascript no se actualizan dentro de una solicitud de axios
Actualmente tengo el siguiente código en mi aplicación:
import {getTestData,getUserData} from "./js/apiInteractorModule.js"; const TEST_NAMES = ['CM10']; var testData = {}; function populateTestData(){ return axios({ method: 'post', url: '/get-session-cookie' }).then(response => { //Get decrypted session data getUserData(response.data.uuid,response.data.id_token).then(response => { //Get user data w/ decrypted session data (TODO: Integrate w/ data) for (let i = 0; i < TEST_NAMES.length; i++){ getTestData(TEST_NAMES[i]).then(response => { testData[TEST_NAMES[i]] = []; for (var key in response.json){ //Creates {NAME: [{x: time, y: value}]} TODO: Adjust w/ user data testData[TEST_NAMES[i]].push({ x: response.json[key].time, y: response.json[key].value }); } }); } }) return response; }).catch(error => { console.log(error); return error; }); }Donde getUserData y getTestData interactúan con mi API externa. El punto final getTestData devuelve algo como
{éxito: Verdadero/Falso, json: {Clave de cadena: {tiempo: tiempo UNIX, valor: flotante}}}
Después de ejecutar esto, esperaría que testData se vea como
{CM10: [{x: tiempo, y: valor}]} por cada valor y tiempo recibido en la llamada API.
al correr
populateTestData().then(response => { console.log(testData); });aunque, en lugar de obtener el diccionario esperado, el archivo console.log imprime
console.log(testData[CM10]) también se imprime sin definir, y testData.values también están vacíos.
Solo por el contrario, cuando inicializo testData fuera de la función con
var testData = {"CM10": 10}Y luego ejecute el mismo código, la salida es
Y ejecutar console.log(testData["CM10"])" imprime 10
¿Por qué es esto y qué puedo hacer para solucionarlo?
1 answers
Answer question0
No confíe en console.log ....
Cuando llama a populateTestData, devuelve la respuesta de valor, que es {} (no estoy seguro de cómo/por qué se muestra {} en la consola).
Mientras tanto, se realizaron dos llamadas de API. Ahora la respuesta está llena de valor en segundo plano. Por lo tanto, se muestra como si los datos estuvieran presentes mientras se expande. Pero en realidad, los datos se completan después de llamar a .then. Cuando colapsa, muestra {}, la respuesta inicial recibida
Para confirmar
populateTestData().then(response => { setTimeout(() => { // 5 seconds is a dummy value. You calculate the value and make sure all api calls are completed by that time console.log(testData); // you might not see empty curly braces, without expanding }, 5000); });Esto es algo complicado muy común con la consola. Debe aplicar la promesa para evitarlos.
También veo que estás ejecutando un bucle. Javascript es un código asíncrono. Entonces, el ciclo for sigue ejecutándose y no espera el resultado. En este caso, usaría la función asíncrona
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
No se pudo reproducir su código con valores válidos, pero el siguiente enlace le será útil.
Nota: si no tiene un bucle for adentro, obtenga TestData, o si puede simular, puede confirmar las respuestas de axios con promesa
return getUserData(response.data.uuid,response.data.id_token).then(response => { //Get user data w/ decrypted session data (TODO: Integrate w/ data) // for (let i = 0; i < TEST_NAMES.length; i++){ return getTestData(TEST_NAMES[0]).then(response => { testData[TEST_NAMES[0]] = []; for (var key in response.json){ //Creates {NAME: [{x: time, y: value}]} TODO: Adjust w/ user data testData[TEST_NAMES[i]].push({ x: response.json[key].time, y: response.json[key].value }); } return testData }); // }