Question

我想将一个ID传递给axios，以便可以动态切换网址。

我在模板中的axios请求如下：

class Book {
    int id;
    String[] categories;

//    getters and setters 

}

List<Book> books = Arrays.asList(
    new Book(1,{"Java" , "Computers"}),
    new Book(1,{"Python" , "C++" }),
    new Book(1,{"Java" , "IT"})
);

books.stream().map(VolumeInfo::getCategories).toArray(String[]::new);

传递给我的api的请求是：

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

但我需要

GET /api/?id=1

这是怎么回事？

Answer 1

页面加载后，似乎asyncData函数被调用一次。对于为什么它不按文档和大量教程中概述的方式接受参数，我仍然不明智，但是由于不再调用它，因此它不会刷新页面。

要使用新的api调用刷新页面数据，您需要从导出的方法部分中返回axios promise。下面的代码首先使axios获取请求，然后使用加号和减号功能从id中添加或减去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>

如果有人想详细说明或发布更好的解决方案，请继续-但是我之所以发布此帖子，是因为我搜索了太多教程，但直到我找到一种解释文档的方法之前，都无济于事，这当然对初学者不友好

Axios GET不包括Nuxt模板中的参数

1 个答案: