javascript - vue - Devolviendo una Promesa Axios desde la función

axios vue

Question

¿Puede alguien explicar por qué devolver una promesa de Axios permite un mayor encadenamiento, pero no después de aplicar un método then()/catch() ?

Ejemplo:

const url = ''https://58f58f38c9deb71200ceece2.mockapi.io/Mapss''
    
function createRequest1() {
  const request = axios.get(url)

  request
  .then(result => console.log(''(1) Inside result:'', result))
  .catch(error => console.error(''(1) Inside error:'', error))

  return request
}

function createRequest2() {
  const request = axios.get(url)

  return request
  .then(result => console.log(''(2) Inside result:'', result))
  .catch(error => console.error(''(2) Inside error:'', error))
}

createRequest1()
.then(result => console.log(''(1) Outside result:'', result))
.catch(error => console.error(''(1) Outside error:'', error))

createRequest2()
.then(result => console.log(''(2) Outside result:'', result))
.catch(error => console.error(''(2) Outside error:'', error))

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

https://jsfiddle.net/nandastone/81zdvodv/1/

Entiendo que los métodos Promise deben devolver un valor para ser encadenados, pero ¿por qué hay una diferencia entre estos dos métodos de devolución?

Answer 1

Tu primer ejemplo devuelve la promesa original. Su segundo ejemplo devuelve una promesa diferente , la que se crea al llamar a catch .

Las diferencias críticas entre los dos son:

1. En su segundo ejemplo, no está pasando el valor de resolución, por lo que la promesa devuelta por usted se resuelve con undefined (el valor de retorno de console.log ).

2. En su segundo ejemplo, está convirtiendo los rechazos en resoluciones con undefined (devolviendo el resultado de console.log fuera de lugar). Un controlador de catch que no lanza ni devuelve una promesa rechazada convierte un rechazo en una resolución.

Una de las cosas clave de las cadenas de promesa es que transforman el resultado; Cada llamada a then o catch crea una nueva promesa, y sus manejadores pueden modificar lo que se envía hacia abajo a medida que el resultado pasa a través de ellos.

El patrón habitual sería, de hecho, devolver el resultado de la cadena, pero las funciones de la cadena pueden transformar intencionalmente el resultado o transmitirlo. Normalmente, no tendría un controlador de catch excepto en el extremo terminal de la cadena, a menos que lo esté utilizando para corregir la condición de error (convertir intencionalmente un rechazo en una resolución).

Si solo quisiera registrar lo que pasó mientras aún permitía que las personas que llaman lo vieran, pero quería devolver el resultado de la cadena por cualquier razón, haría esto:

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); return Promise.reject(error); });

o utilizando el throw :

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); throw error; });