如何使用Vue调用API接口 - vue学习-微参考

Vue.js 是目前非常流行的前端框架之一，它通过提供一套完整的生命周期钩子和响应式数据绑定机制，使得开发者能够轻松地构建高效且可维护的前端应用。在实际开发中，调用后端接口获取数据是前端工程师经常需要面对的任务。以下是使用 Vue.js 调用接口的几种常见方法。

使用原生 XMLHttpRequest

虽然这种方法比较古老，但它仍然是一种可行的调用接口的方式。

new Vue({
el: '#app',
data: {
info: null
},
mounted() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data');
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this.info = JSON.parse(xhr.responseText);
}
};
xhr.send();
}
});

使用 Fetch API

Fetch API 是现代浏览器提供的一种原生方式，用来发起网络请求。

new Vue({
el: '#app',
data: {
info: null
},
mounted() {
fetch('http://api.example.com/data')
.then(response => response.json())
.then(data => {
this.info = data;
});
}
});

使用 Axios

Axios 是一个基于 promise 的 HTTP 客户端，可以用于浏览器和 node.js 中。它是目前最流行的前端网络请求库之一。

首先，需要安装 Axios：

npm install axios

然后在 Vue 组件中使用它：

import axios from 'axios';

new Vue({
el: '#app',
data: {
info: null
},
mounted() {
axios.get('http://api.example.com/data')
.then(response => {
this.info = response.data;


});
}
});

使用 Vue Resource

Vue Resource 是 Vue.js 官方推荐的插件，用于处理 HTTP 请求。

首先，需要安装 Vue Resource：

npm install vue-resource

然后在 Vue 实例中引入并使用：

import VueResource from 'vue-resource';

Vue.use(VueResource);

new Vue({
el: '#app',
data: {
info: null
},
mounted() {
this.$http.get('http://api.example.com/data')
.then(response => {
this.info = response.body;
});
}
});