Блог

Я хочу передать идентификатор в 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
  

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

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

Чтобы обновить данные страницы с помощью нового вызова api, вам необходимо вернуть обещание axios из части «Методы» экспорта. Приведенный ниже код сначала выполняет запрос axios get, затем добавляет или вычитает 1 из идентификатора с функциями plus и minus.

 <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>
  

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