Estoy enviando una solicitud HTTP usando Axios dentro de un creador de acciones asincrónicas. Los argumentos que quiero usar para llamar al creador de acciones sincrónicas se almacenan en una matriz. Por alguna razón, cuando trato de console.log(args) (la matriz), la matriz se muestra correctamente, pero cuando trato de console.log(args[0]) (el primer elemento), no estoy definido. No sé a qué está relacionado este problema. Aquí está mi fragmento de código:
const initIngredients_Sync = (ingredientsData, error) => { console.log("sync args", ingredientsData, error); return({ type: actionTypes.INIT_INGREDIENTS, initialState: ingredientsData, error }); }; export const initIngredients = () => { const args = []; return dispatch => { axiosInstance.get('/ingredients_prices.json') .then((response) => { const INGREDIENT_PRICES = response.data; const INGREDIENTS = (() => { let ingredients = {}; for (const key in INGREDIENT_PRICES) { if(key !== "base_price") ingredients[key] = 0; } return ingredients; })(); const ingredientsData = { ingredients_prices: INGREDIENT_PRICES, ingredients: INGREDIENTS, totalPrice: INGREDIENT_PRICES.base_price }; args.push(JSON.parse(JSON.stringify(ingredientsData))); }) .catch((error) => { args.push(error); }); console.log("args[0]", args[0]); args.length === 2 ? dispatch(initIngredients_Sync(args[0], args[1])) // [ingredientsData, error] : dispatch(initIngredients_Sync(args[0], false)); // no error } }; Salida con console.log(args) :
[] 0: {ingredients_prices: {...}, ingredients: {...}, totalPrice: {...}} length: 1 Salida con console.log(args[0]) :
undefinedSu declaración de registro de la consola en el fragmento de código está fuera .then devolución de llamada. Debe verificar esto una vez / después de que se resuelva su llamada api, es decir, debajo de esta línea ...
args.push(JSON.parse(JSON.stringify(ingredientsData))); console.log(args[0]) // should printAxios es un cliente HTTP basado en promesas para el navegador y Node.js.
Por lo tanto, sus métodos como .get() se resolverán de forma asíncrona.
Un modelo asíncrono permite que sucedan varias cosas al mismo tiempo. Cuando inicia una acción, su programa continúa ejecutándose. Cuando finaliza la acción, el programa es informado y obtiene acceso al resultado (por ejemplo, los datos leídos del disco).
Recurso: https://eloquentjavascript.net/11_async.html
Es por eso que su console.log no muestra el resultado como esperaba. Puede solucionar esto enviando acciones con args en then método.
const initIngredients_Sync = (ingredientsData, error) => { console.log("sync args", ingredientsData, error); return { type: actionTypes.INIT_INGREDIENTS, initialState: ingredientsData, error, }; }; export const initIngredients = () => { const args = []; return (dispatch) => { axiosInstance .get("/ingredients_prices.json") .then((response) => { const INGREDIENT_PRICES = response.data; const INGREDIENTS = (() => { let ingredients = {}; for (const key in INGREDIENT_PRICES) { if (key !== "base_price") ingredients[key] = 0; } return ingredients; })(); const ingredientsData = { ingredients_prices: INGREDIENT_PRICES, ingredients: INGREDIENTS, totalPrice: INGREDIENT_PRICES.base_price, }; args.push(JSON.parse(JSON.stringify(ingredientsData))); // These lines moved to `then` method console.log("args[0]", args[0]); args.length === 2 ? dispatch(initIngredients_Sync(args[0], args[1])) : dispatch(initIngredients_Sync(args[0], false)); }) .catch((error) => { args.push(error); }); }; };