Axios GET не включает параметры в шаблоне Nuxt - PullRequest
Новая
       23

Axios GET не включает параметры в шаблоне Nuxt

0 голосов
/ 09 апреля 2019

Я хочу передать id в axios, чтобы я мог динамически переключать URL.

Мой запрос axios в моем шаблоне выглядит следующим образом: 

async asyncData({ params }) {
    const { data } = await axios.get('http://localhost:8000/api/', {
      params: {
        id: 1
      }
    })
    return { data }
  }

Запрос, передаваемый моему API: 

GET /api/?id=1

но мне нужно 

GET /api/1

Что здесь происходит?

1 Ответ

0 голосов
/ 10 апреля 2019

Похоже, функция asyncData вызывается один раз при загрузке страницы.Я до сих пор не знаю, почему он не принимает параметры в порядке, изложенном в документах и ​​многочисленных руководствах, но он не обновит страницу, потому что он никогда больше не вызывается.

Чтобы обновить данные страницы новым вызовом API, вам нужно вернуть обещание axios из части методов экспорта.Приведенный ниже код сначала выполняет запрос на получение axios, затем добавляет или вычитает 1 из идентификатора с функциями плюс и минус. 

<script>
import axios from 'axios'

export default {
  head() {
    return {
      title: 'Weather'
    }
  },
  data: function() {
    return { counter: 1 }
  },
  methods: {
    plus: function(counter, data, datalength) {
      this.counter += 1
      axios.get('http://localhost:8000/api/' + this.counter).then(res => {
        console.log(this.counter)
        console.log(res.data)
        return (this.data = res.data)
      })
    },
    minus: function(counter, data) {
      if (this.counter >= 2) {
        this.counter -= 1
        axios.get('http://localhost:8000/api/' + this.counter).then(res => {
          console.log(this.counter)
          console.log(res.data)
          return (this.data = res.data)
        })
      } else {
        this.counter = 1
      }
    }
  },
  async asyncData({ params, counter }) {
    let { data } = await axios.get('http://localhost:8000/api/1')
    return { data }
  }
}
</script>

Если кто-то хочет разработать или опубликовать лучшее решение, пожалуйста, продолжайте, но яЯ пишу это, потому что я искал так много учебников, и ничего не получалось, пока я не нашел способ интерпретировать документацию, которая, конечно, не подходит для начинающих.

...