vue请求数据的三种方式

下面就开始讲解“vue请求数据的三种方式”攻略：

前言

在前后端分离的架构中，前端的数据一般是通过ajax等方式去获取后端服务的数据。而在Vue框架中，请求数据的方式有三种：$ajax、axios、vue-resource。

1.使用$ajax请求数据

// 引入jquery.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

// data.js
var data = {
  message: 'Hello Vue.js!'
}

// 获取后台数据
$.ajax({
  url: '/getData',
  dataType: 'json',
  success: function(result) {
    data.message = result.data;
  },
  error: function(xhr, status, errorMessage) {
    console.log('Ajax request error:', errorMessage);
  }
});

在这个例子中，我们使用了jquery库的ajax方法来请求后台服务的数据，并将获取到的数据存储在data.message中。

2.使用axios请求数据

Axios是一个基于Promise的HTTP库，可用于浏览器和node.js环境中发送HTTP请求。Vue.js官方推荐的请求库。

// data.js
import axios from 'axios'

var data = {
  message: 'Hello Vue.js!'
}

// 获取后台数据
axios.get('/getData')
  .then(function(response) {
    // 获取数据成功
    data.message = response.data
  })
  .catch(function(err) {
    // 获取数据失败
    console.log('Axios request error:', err)
  })

在这个例子中，我们使用了axios库的get方法来请求后台服务的数据，并将获取到的数据存储在data.message中。

3.使用vue-resource请求数据

Vue-resource是Vue.js官方提供的HTTP库。它支持使用XMLHttpRequest或JSONP发出请求。

// 引入vue-resource.js
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>

// data.js
var data = {
  message: 'Hello Vue.js!'
}

// 获取后台数据
Vue.http.get('/getData').then(function(response) {
    // 获取数据成功
    data.message = response.body
}).catch(function(err) {
    // 获取数据失败
    console.log('Vue-resource request error:', err)
})

在这个例子中，我们使用了Vue-resource库的get方法来请求后台服务的数据，并将获取到的数据存储在data.message中。

总结

三种请求数据的方式中，$ajax是最为常见和基础的方法；axios是基于Promise的HTTP库，是Vue.js官方推荐的请求库；vue-resource是Vue.js官方提供的HTTP库。对于不同场景和需求，选择合适的请求库可以为我们带来更好的开发体验和效果。