Tengo dos formularios con datos que deben guardarse usando dos API de publicación separadas. Estoy usando Promise.all() para guardar todos los datos de estos dos formularios a la vez y funciona como debería. El código es el siguiente:
saveAll() { Promise.all([ this.$axios.post('v1/dummy-api/one', this.saveFormOne() ), this.$axios.post('v1/dummy-api/two', this.saveFormTwo() ) ]) .then(() => { this.success = 'Added Successfully.'; }) .catch(error => { this.error = 'Error.'; }) },El problema que estoy tratando de resolver es que necesito verificar si alguna de esas dos solicitudes falla y, si lo hace, evitar/cancelar el guardado de la otra (que tiene éxito) hasta que todas tengan éxito. He intentado probar/atrapar sin suerte.
¡Cualquier ayuda será muy apreciada!
Debe usar Axios AbortController ( https://axios-http.com/docs/cancellation ). Sin embargo, tenga cuidado de que la cancelación de una solicitud no garantice necesariamente que el POST no se haya ejecutado correctamente. Si no debe llamar al otro extremo si uno falla, la forma más fácil sería encadenarlos y llamar uno tras otro.
De todos modos, debajo se muestra una manera de lograr esto. Tenga en cuenta que necesitaba modificarlo un poco para que fuera ejecutable dentro de la respuesta de stackoverflow. Sin embargo, obtendrás una idea general de eso.
function saveAll() { const cancel = new AbortController(); Promise.all([ axios.get('https://test-stackoverflow.free.beeceptor.com', {}, { signal: cancel.signal }).catch((e) => { cancel.abort(); throw e; }), axios.get('https://thiswillfail.com/fail', {}, { signal: cancel.signal }).catch((e) => { console.log('second request has failed') cancel.abort(); throw e; }) ]) .then(() => { alert('Added Successfully.'); }) .catch(error => { alert('Error.'); }) } <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <button onclick="saveAll()">save all</button>async saveAll() { const resp1 = await this.$axios.post('v1/dummy-api/one', this.saveFormOne()) const resp2 = await this.$axios.post('v1/dummy-api/two', this.saveFormTwo()) }no se si esto se pueda solucionar
Promise.all() no es lo que necesita si necesita administrar estas llamadas API. Puede hacer algo similar a lo que sugirió 王超华, pero con un try/catch adicional
async function saveAll() { let first; try { first = await this.$axios.post('v1/dummy-api/one', this.saveFormOne()) } catch (e) { console.log('first failed') return } console.log('first', first) const second = await this.$axios.post('v1/dummy-api/two', this.saveFormTwo()) console.log('second', second) }O si quieres usar Promesas
saveAll() { this.$axios.post('v1/dummy-api/one', this.saveFormOne()) .then(() => this.$axios.post('v1/dummy-api/two', this.saveFormTwo()) .then(() => this.success = 'Added Successfully.') .catch(error => this.error = 'Error.') }