如何使用Vue发起网络请求

在Vue.js中请求接口是前端与后端服务进行数据交换的重要环节。通常情况下，Vue.js项目中发起HTTP请求会使用Axios库，因为它具有简洁的API、拦截请求和响应、转换请求和响应数据等功能。

以下是使用Vue.js配合Axios请求接口的专业指南：

安装Axios

首先，需要在项目中安装Axios。如果您的项目是一个使用npm或yarn的Vue CLI项目，可以通过以下命令安装：

npm install axios # 或者 yarn add axios

在Vue组件中引入Axios

在组件中引入Axios，可以通过以下方式：

import axios from 'axios';

基本请求

在引入Axios后，可以使用它的实例发起各种HTTP请求：

// GET请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response.data);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
});

// POST请求
axios.post('/user', {
firstName: 'Foo',
lastName: 'Bar'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});

使用async和await

使用`async`和`await`可以让异步代码看起来像同步代码，这在处理复杂逻辑时非常有用。

async function getUserData() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response.data);
} catch (error) {
console.error(error);
}
}

getUserData();

使用Vue实例方法

在Vue组件中，可以创建一个`methods`属性，并在其中定义一个方法来处理请求：

export default {
data() {
return {
user: null
};

},
methods: {
async fetchUser() {
try {
const response = await axios.get('/user?ID=12345');
this.user = response.data;
} catch (error) {
console.error(error);
}
}
},
created() {
this.fetchUser();
}
};

全局配置

可以创建一个Axios实例，并在Vue原型链上进行全局配置：

// main.js
import axios from 'axios';

// 创建axios实例
const service = axios.create({
baseURL: 'http://example.com/api', // 设置统一的请求前缀
timeout: 5000 // 设置统一的超时时长
});

// 请求拦截器
service.interceptors.request.use(config => {
// 在这里添加例如认证令牌(Token)等
config.headers.Authorization = 'Bearer yourToken';
return config;
}, error => {
// 请求错误的统一处理
return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
// 对响应数据处理
return response.data;
}, error => {
// 对响应错误处理
return Promise.reject(error);
});

Vue.prototype.$http = service;

// 其他代码 ...