如何在Vue.js中使用Ajax？

在 Vue.js 中可以用许多方式实现 Ajax 请求:

1. 使用原生 XMLHttpRequest 对象:

new Vue({
  methods: {
    loadData() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', '/api/data')
      xhr.send()
    }
  }  
})

2. 使用 axios 库:

import axios from 'axios'

new Vue({
  methods: {
    loadData() {
      axios.get('/api/data')
        .then(response => {
          //  success
        })
        .catch(error => {
          // error 
        })     
    }
  }  
}) 

axios 是一个基于 promise 的 HTTP 库,可以让我们更简单地进行 Ajax 请求。

3. 使用 vue-resource:

import VueResource from 'vue-resource'
Vue.use(VueResource)

new Vue({
  methods: {
    loadData() {
      this.$http.get('/api/data')
        .then(response => {
          // success
        })
        .catch(error => {
          // error
        }) 
    }
  }
})

vue-resource 是 Vue.js 的一个 Ajax 插件,可以非常简单地发送 GET, POST, PUT, DELETE 请求。

4. 使用 Composition API 的 fetch():

import { ref, fetch } from '@vue/composition-api' 

const data = ref(null)

fetch('/api/data')
  .then(res => res.json())
  .then(json => {
    data.value = json
  })

Composition API 提供的 fetch() 方法可以直接发送 Ajax 请求。

举例,使用 axios 发送 GET 请求:

methods: {
  loadData() {
    axios.get('/api/data')
      .then(response => {
        this.someData = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

<button @click="loadData">Load Data</button>
<p>{{ someData }}</p>

点击按钮,会发送 GET 请求,将数据存储在 someData 中,并渲染到页面。