vue中三种调用接口的方法

当我们在使用Vue框架开发应用时，经常需要从后端服务器获取数据，这就需要我们调用接口来实现。Vue中提供了三种常见的方式来调用API接口，分别是使用浏览器原生API发起请求、使用axios库、使用VueResource插件。下面我们来详细讲解一下这三种调用接口的方法。

使用浏览器原生API发起请求

使用浏览器原生API发起请求很简单，可以直接使用JavaScript中的XMLHttpRequest对象。下面是一个使用XMLHttpRequest对象发起GET请求的示例代码：

var request = new XMLHttpRequest();
request.open('GET', '/api/data', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    // 处理请求成功后返回的数据
  } else {
    // 处理请求失败情况
  }
};

request.onerror = function() {
  // 处理请求出错情况
};

request.send();

使用XMLHttpRequest对象可以发起GET和POST请求，同时也可以设置请求头和请求参数等信息。但是使用原生API调用接口需要手写很多代码，费时费力，实用性不高。

使用axios库

axios是一个基于Promise的HTTP库，可以用于在浏览器和Node.js中发起HTTP请求。使用axios发起请求同样非常简便，下面是一个使用axios库发起GET请求的示例代码：

axios.get('/api/data')
  .then(function (response) {
    // 处理请求成功后返回的数据
  })
  .catch(function (error) {
    // 处理请求出错情况
  });

使用axios时可以直接使用get、post、put、delete等方法，同时也可以设置请求头和请求参数等信息。axios还支持拦截器，能够在发出请求或者收到响应前进行中间处理。axios是非常流行的Vue项目中常用的HTTP库。

使用VueResource插件

VueResource是Vue官方提供的HTTP插件，相比axios而言更加的轻量级，使用方式也非常简单。下面是一个使用VueResource插件发起GET请求的示例代码：

this.$http.get('/api/data').then(function(response) {
    // 处理请求成功后返回的数据
}, function(response) {
   // 处理请求出错情况
});

需要注意的是，在组件中使用VueResource的时候需要先调用Vue.use(VueResource)进行安装才能使用。

总结

三种方式各有优缺点，使用浏览器原生API获取数据需要手写大量的代码，使用axios库非常方便实用，VueResource相比axios则更加轻量级，更适合小型的项目。根据实际项目的需求，可以选择不同的API调用方式。