4
respostas

Passar parâmetros via GET

Tenho que consultar uma API externa via GET e passar parâmetros por um formulário que me retornará resultados, porém não sei como passar os parâmetros exatamente, já olhei diversos exemplos mas ainda não compreendi ao certo. O formato da URL é:

'https://us-central1-onsurance-new.cloudfunctions.net/quote/tires?totalValue=<number>&qtd=<number>&vehicleType=<string>&firstName=<string>&lastName=<string>&userEmail=<string>&vehiclePlate=<string>&dailyUsage=<number>&phone=<string>'

Creio que minha dúvida pode ser tola, mas como eu alteraria os campos entre chaves por um valor que sai de um input do formulário?

4 respostas

Eu consegui chamar a API utilizando axios da seguinte forma:

methods:{

    salvar() {
      const axios = require('axios')
      axios.get('https://us-central1-onsurance-new.cloudfunctions.net/quote/tires',params)
      .then(function(response){
      console.log(response)
})
    }
  }

E estou tentando passar os meus parâmetros da seguinte forma:

 data(){

  return {
    params:{
    totalValue: '',
    vehicleType: '',
    firstName: '',
    lastName: '',
    userEmail: '',
    vehiclePlate: '',
    dailyUsage: '',
    phone: ''
    }
  }
}

Porém está dando erro, podem me ajudar?

Fala ai Rodolfo, tudo bem? Quando a requisição é do tipo GET a gente passa os parâmetros via Query String ou Variable Path.

No seu caso, você precisa passar via Query String, para fazer isso precisa concatenar os parâmetros na URL da chamada:

const axios = require('axios')
const qs = require('qs')

axios
    .get('http://www.mocky.io/v2/5df2c8ea3100007a009a347f?' + qs.stringify({ foo: 'bar' }))
    .then(resp => console.log(resp.data.result))

Algo mais ou menos assim, resultando na seguinte URL:

http://www.mocky.io/v2/5df2c8ea3100007a009a347f?foo=bar

Caso a solução não seja essa, vamos nos falando.

Espero ter ajudado.

Opa Matheus, obrigado pela resposta. Então atualmente meu código ficou assim, utilizando axios:

export default {

  data(){


  return {
    params:{
    totalValue: '',
    vehicleType: '',
    firstName: '',
    lastName: '',
    userEmail: '',
    vehiclePlate: '',
    dailyUsage: '',
    phone: '',
    qtd: ''
    },




    salvar() {
      const axios = require('axios')
      axios.get('https://us-central1-onsurance-new.cloudfunctions.net/quote/tires',this.$data)
      .then(function(response){
      console.log(response.data)
})
  }

Eu estou conseguindo retornar no console os dados da API como eu queria, mas você acha que eu deveria tentar uma solução diferente como a proposta por você? E outra pergunta uma vez os dados retornados no console, não estou conseguindo colocá-los em um array e exibir no código, estou tentando fazer mais ou menos assim:

data(){


  return {
    params:{
    totalValue: '',
    vehicleType: '',
    firstName: '',
    lastName: '',
    userEmail: '',
    vehiclePlate: '',
    dailyUsage: '',
    phone: '',
    qtd: ''
    },

    cotacoes: [],



    salvar() {
      const axios = require('axios')
      axios.get('https://us-central1-onsurance-new.cloudfunctions.net/quote/tires',this.$data)
      .then(function(response){
      cotacoes = response.data
})

Pode me ajudar? Qual seria a melhor forma de exibir meu resultado na página? sendo que ele me retorna:

{"anualCost":21.9,"creditDuration":27.4,"minuteValue":0.001}

Fala ai Rodolfo, vamos lá:

Eu estou conseguindo retornar no console os dados da API como eu queria, mas você acha que eu deveria tentar uma solução diferente como a proposta por você?

Precisa inspecionar a requisição e ver como foi enviado os parâmetros para a API, se foram enviados na URL, show de bola, caso tenham ido no body ou algo do tipo ai eu recomendaria mudar para a URL por questões de boas práticas e padrões.

E outra pergunta uma vez os dados retornados no console, não estou conseguindo colocá-los em um array e exibir no código, estou tentando fazer mais ou menos assim:

Acho que você precisa adicionar um this no cotacoes, ficando this.cotacao.

Pode me ajudar? Qual seria a melhor forma de exibir meu resultado na página? sendo que ele me retorna:

Acho que você pode exibilos com a interpolação do Vue:

<h1>{{ cotacoes.anualCost }}</h1>
<h2>{{ cotacoes.creditDuration }}</h2>
<h3>{{ minuteValue.creditDuration }}</h3>

Algo mais ou menos assim.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software