Estoy usando vue js y axios.
Esto es lo que estoy tratando de hacer:
Mi matriz de "contornos" suele tener entre 3 y 9 entradas. Me gustaría ejecutar una solicitud axios (runSecondFunction()) en cada entrada, pero solo ejecutar 1 solicitud a la vez (espere a que se obtenga cada registro antes de iniciar otra solicitud siguiente, y no todos a la vez. Si una de las solicitudes falla, tiene un mensaje de error En este momento, tal como está, funciona, pero algunas de las solicitudes finalizan antes que las demás y mi posición de índice es incorrecta en la respuesta.
method1(){ for (const [index, value] of this.splitOutlines.entries()) { this.runSecondFunction(value, index); } } runSecondFunction(value, index){ let formData = { title: this.blog.value, subheading: value }; axios.post('/dashboard/paragraphs', formData).then((response) => { this.articles.push({ index: index, subheading: response.data.subheading, paragraph: response.data.data.ideas[0], }); }).catch(error => { // }); }¿Alguna idea de cómo hacer esto, por favor?
Gracias
Si está realmente convencido de que estos no se ejecutan simultáneamente, entonces tendrá que hacer una de dos cosas. Puede hacer que method1 llame a una función async y lance una captura de prueba mientras compone una nueva matriz y la devuelve o la configura en otro lugar. p.ej
method1(){ (async function () { const requests = [] for (const [index, value] of this.splitOutlines.entries()) { try { const res = await this.runSecondFunction(value, index); requests.push(res) } catch (e) { requests.push(e) } } return requests )().then(reqs => { // do other stuff with the completed requests. }) }Esto debería garantizar que se respete el orden de las solicitudes y que solo se ejecute una a la vez.
De lo contrario, tendrá que hacer una especie de implementación recursiva en el método .then .
EDITAR::
Olvidé mencionar que en su método runSecondFunction , debe devolver la promesa, por lo que debería verse así:
runSecondFunction(value, index){ let formData = { title: this.blog.value, subheading: value }; return axios.post('/dashboard/paragraphs', formData) } De esta manera, la await de mehtod1 asignará el artículo a lo que llamé res (por supuesto, puede manipular estos datos de la forma que necesite).
Pero no maneje el error dentro de runSecondFunction si desea que estén presentes en la matriz.
Un enfoque sería insertar un objeto de error en la matriz si hay un error.
axios.post('/dashboard/paragraphs', formData).then((response) => { this.articles.push({ index: index, subheading: response.data.subheading, paragraph: response.data.data.ideas[0], }); }).catch(error => { this.articles.push({ error }); });O puede cambiar los artículos para que sean un objeto simple en lugar de una matriz, y asignar las propiedades del objeto en lugar de presionar.
axios.post('/dashboard/paragraphs', formData).then((response) => { this.articles[index] = { index: index, subheading: response.data.subheading, paragraph: response.data.data.ideas[0], } }).catch(error => {