vue 如何使用axios

Vue.js 中使用 axios 进行 HTTP 请求是一种常见的做法，因为它轻量级、易于集成，并且可以方便地处理异步操作。以下是简单的步骤：

1. **安装 axios**:
首先，你需要在项目中安装 axios。如果你使用的是 Vue CLI 创建的项目，可以在 `src` 目录下运行：

   npm install axios

如果是脚手架（如 vite），则安装到全局或者项目依赖：

   npm install axios --save

2. **引入 Axios**:
在需要使用 axios 的组件或者 main.js 文件中，导入它：

   import axios from 'axios';

3. **配置 axios**:
可能会有一些配置项，例如设置 base URL 或者添加请求拦截器，这通常放在项目的 `main.js` 或者单独的配置文件里：

   // 将axios配置到Vue原型上，以便所有组件都能直接使用
   Vue.prototype.$http = axios.create({
     baseURL: process.env.VUE_APP_API_URL, // 根URL，这里假设有一个环境变量管理API地址
     headers: { 'Content-Type': 'application/json' } // 添加默认头信息
   });

4. **发送请求**:
在组件内部，你可以像下面这样使用 `$http` 对象进行 GET、POST 等请求：

   methods: {
     fetchData() {
       this.$http.get('/users') // 发送GET请求到/users路径
         .then(response => {
           console.log('Success:', response.data);
         })
         .catch(error => {
           console.error('Error:', error.response.data);
         });
     }
   }

5. **响应处理**:
axios 返回一个 Promise，通过 `.then` 和 `.catch` 来处理成功和失败的回调。