1

estoy teniendo problemas a la hora de implementar un condicional con la respuesta de un get de Axios en Vue.js.

He intentado con la sintaxis normal de JS pero da error.

mounted () {
        axios
          .get('http://localhost:8080/sitio/rest/marcaColor/marcaColores')
          .then(response => (
                                if(response.data.exito == true){
                                    this.marcaColores = response.data.objetoRespuesta;
                                }else{
                                    this.marcaColores = [];
                                }

                            )
               )
      }

El error que me da es

SyntaxError: expected expression, got keyword 'if'

¿Como puedo usar condicionales en esa parte del código?

7
  • Saludos MrCode, buen día, por curiosidad ¿has visto la documentación github.com/axios/axios#response-schema ?
    – fredyfx
    Commented el 31 oct. 2019 a las 20:47
  • @fredyfx si pero con exito no me refiero al HTTP status si no al resultado de las operaciones que hace el Web Service. Puede darme un 200 y aun así exito ser falso.
    – MrCode
    Commented el 31 oct. 2019 a las 20:57
  • ¿Por qué usas "(" luego de la flecha, no se supone que va una llave "{" ? Por otro lado, dale un console.log(response) para que veas el objeto que te retorna y confirmes que la variable "exito" sea existente
    – fredyfx
    Commented el 31 oct. 2019 a las 20:59
  • Me he basado en este tutorial y alli usan esa sintaxis. es.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
    – MrCode
    Commented el 31 oct. 2019 a las 21:01
  • porque es una expresión de 1 sola línea... Creo que te caerían bien unas clases de javascript tutorialesprogramacionya.com/javascriptya/index.php?inicio=80 a partir de la página que se ve, encuentras las "novedades". buena suerte
    – fredyfx
    Commented el 31 oct. 2019 a las 21:01

2 respuestas 2

2

Revisa los comentarios dentro del código, contiene la explicación.

mounted () {
     axios
          .get('http://localhost:8080/sitio/rest/marcaColor/marcaColores')
          .then(response => { //Aqui va primera llave de apertura
            // if(response.exito) da error porque "exito" se encuentra dentro de response.data
            //utiliza 3 signos igual para equivalencias de tipo de variable
            if (response.data.exito === true) { 
              this.marcaColores = response.data.objetoRespuesta;
            } else {
              this.marcaColores = [];
            }

          }) //aquí va la segunda llave de cierre y el paréntesis del .then(
}
1

Coloco el siguiente script como ejemplo, tratando sirva como guía:

  • Primero lo que deberías validar es el status de tu llamada AJAX, es decir verificar que estado esta devolviendo por ejemplo:

Un status 200 indica que la llamada o petición ha resultado satisfactoria

En este caso a nivel de código lo encuentras si haces:

console.log(response)

Con un resultado como este:

[native code] },
    status: 200,
    statusText: "",
    timeout: 0,
    UNSENT: 0,
    upload: [object XMLHttpRequestUpload] { ... },
    withCredentials: false
  },
  status: 200,
  statusText: ""
}

Entonces lo podemos validar de este modo:

axios.get('url-a-consultar')
     .then((response) => {
  if(response.status === 200) {
    console.log(response.data)
  }else{
    console.log(0)
  }
})

hacer uso de console.log(response.data) devolverá todo el oncjunto de datos de la consulta que haces a una determinada URL.

Ya si por ejemplo buscas obtener un solo valor de esa respuesta, al ser un conjunto de datos, solo basta que indiques la posición deseada así:

console.log(response.data[0])

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.