在 Vue 2 中使用 Axios 发起 POST 和 GET 请求

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js，它提供了一种非常方便的方式来发送异步 HTTP 请求。在 Vue 2 应用中，Axios 可以帮助我们轻松地与后端 API 进行通信。本文将介绍如何在 Vue 2 项目中引入 Axios，并使用它来发起 POST 和 GET 请求。

1. 安装 Axios

首先，你需要在你的 Vue 项目中安装 Axios。打开终端，切换到你的项目目录，然后运行以下命令：

npm install axios

或者，如果你使用 yarn 作为包管理器：

yarn add axios

2. 在 Vue 组件中引入 Axios

在你的 Vue 组件中，你可以直接引入 Axios 并使用它。

示例代码

<template><div><button @click="fetchData">获取数据</button><button @click="submitData">提交数据</button><div v-if="data">{{ data }}</div></div>
</template><script>
import axios from 'axios';export default {data() {return {data: null};},methods: {fetchData() {axios.get('https://api.example.com/data').then(response => {this.data = response.data;}).catch(error => {console.error('请求失败:', error);});},submitData() {axios.post('https://api.example.com/submit', {key: 'value'}).then(response => {console.log('提交成功:', response.data);}).catch(error => {console.error('提交失败:', error);});}}
}
</script>

3. 发起 GET 请求

使用 Axios 发起 GET 请求非常简单。你可以使用 axios.get() 方法，并传递两个参数：URL 和可选的配置对象。

示例代码

axios.get('https://api.example.com/data').then(response => {console.log('数据获取成功:', response.data);}).catch(error => {console.error('数据获取失败:', error);});

4. 发起 POST 请求

与 GET 请求类似，使用 Axios 发起 POST 请求也很简单。使用 axios.post() 方法，你需要传递三个参数：URL、要发送的数据和一个可选的配置对象。

示例代码

axios.post('https://api.example.com/submit', {key: 'value'
})
.then(response => {console.log('数据提交成功:', response.data);
})
.catch(error => {console.error('数据提交失败:', error);
});

5. 处理请求和响应拦截

Axios 允许你添加请求和响应拦截器，这在处理诸如身份验证令牌、设置默认请求头或统一处理错误时非常有用。

示例代码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么config.headers.Authorization = 'Bearer ' + YOUR_TOKEN;return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});

6. 错误处理

在 Vue 应用中，错误处理非常重要。你可以在 .catch() 方法中统一处理错误，或者使用 Vue 的全局错误处理机制。

示例代码

axios.get('https://api.example.com/data').then(response => {// 处理成功的响应}).catch(error => {// 处理错误if (error.response) {// 服务器返回了错误状态码console.error('错误响应:', error.response.status);} else if (error.request) {// 请求已发出，但没有收到响应console.error('没有响应:', error.request);} else {// 发送请求时出了点问题console.error('错误:', error.message);}});

结论

Axios 是一个强大的工具，可以帮助你在 Vue 2 应用中轻松地发送 HTTP 请求。通过本文的介绍，你应该能够理解如何在 Vue 组件中使用 Axios 发起 GET 和 POST 请求，以及如何处理请求和响应。记得在实际应用中根据需要添加错误处理和拦截器，以提高应用的健壮性和用户体验。