vue 使用axios

// 引入 axios 库
import axios from 'axios';

// 创建一个 axios 实例，可以在这里配置默认的 baseURL、请求头等信息
const instance = axios.create({
  baseURL: 'https://api.example.com', // API 的 base URL
  timeout: 5000, // 请求超时时间 (5秒)
  headers: {
    'Content-Type': 'application/json' // 默认请求头
  }
});

// 发起 GET 请求
function fetchData() {
  return instance.get('/data') // 请求路径
    .then(response => {
      console.log('成功获取数据:', response.data); // 处理响应数据
      return response.data;
    })
    .catch(error => {
      console.error('请求失败:', error); // 处理错误
      throw error;
    });
}

// 发起 POST 请求
function postData(data) {
  return instance.post('/submit', data) // 请求路径和要发送的数据
    .then(response => {
      console.log('数据提交成功:', response.data); // 处理响应数据
      return response.data;
    })
    .catch(error => {
      console.error('提交失败:', error); // 处理错误
      throw error;
    });
}

// 在 Vue 组件中使用
export default {
  methods: {
    async loadData() {
      try {
        const result = await fetchData(); // 调用 fetchData 函数获取数据
        this.items = result; // 将获取到的数据赋值给组件的 data 属性
      } catch (error) {
        console.error('加载数据失败:', error);
      }
    },
    async submitData() {
      try {
        const result = await postData({ name: 'Vue', value: 'Awesome' }); // 调用 postData 函数提交数据
        console.log('提交结果:', result);
      } catch (error) {
        console.error('提交数据失败:', error);
      }
    }
  }
};

解释说明：

1. 引入 Axios：首先通过 import axios from 'axios'; 引入了 axios 库。
2. 创建 Axios 实例：通过 axios.create() 创建了一个自定义的 axios 实例，并设置了 baseURL 和 timeout 等配置项。这使得后续请求可以直接基于这个实例进行，简化了代码。
3. 发起 GET 请求：定义了一个 fetchData 函数，使用 instance.get() 方法发起 GET 请求，并处理响应数据或错误。
4. 发起 POST 请求：定义了一个 postData 函数，使用 instance.post() 方法发起 POST 请求，并传递数据。
5. 在 Vue 组件中使用：展示了如何在 Vue 组件的方法中调用这些函数来获取或提交数据，并将结果绑定到组件的 data 中。

希望这段代码和解释对你有帮助！