Vue中如何处理异步请求?

在Vue中,我们可以使用vue-resource或axios等第三方库来处理异步请求。这些库封装了XHR请求,并提供了更简洁的API用于发送GET、POST等请求。代码讲解

<div id="app">  <button @click="fetchData">获取数据</button>  <ul>    <li v-for="item in items" :key="item.id">{{ item.name }}</li>  </ul></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script><script>new Vue({  el: '#app',  data: {    items: []  },  methods: {    fetchData() {      // 使用vue-resource发送GET请求      this.$http.get('/api/data')        .then(response => {          this.items = response.data        })        .catch(error => {          console.error(error)        })    }  }})</script>

在上述示例中,我们使用vue-resource库发送GET请求,并在请求成功后将返回的数据赋值给items数组。这样,我们就可以在模板中使用v-for指令渲染出数据列表。

发表评论