vue2 axios

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

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

// 发起 GET 请求
function fetchUserData(id) {
  return instance.get(`/users/${id}`)
    .then(response => {
      // 处理成功响应
      console.log('User data:', response.data);
      return response.data;
    })
    .catch(error => {
      // 处理错误
      console.error('Error fetching user data:', error);
      throw error;
    });
}

// 发起 POST 请求
function createUser(data) {
  return instance.post('/users', data)
    .then(response => {
      // 处理成功响应
      console.log('User created:', response.data);
      return response.data;
    })
    .catch(error => {
      // 处理错误
      console.error('Error creating user:', error);
      throw error;
    });
}

// 在 Vue 组件中使用这些函数
export default {
  name: 'UserComponent',
  data() {
    return {
      user: null,
      newUser: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    async getUser(id) {
      this.user = await fetchUserData(id);
    },
    async saveUser() {
      await createUser(this.newUser);
      // 可以在这里执行其他操作，例如重置表单或显示成功消息
    }
  }
};

解释说明：

1. 引入 Axios：首先通过 import axios from 'axios'; 引入 Axios 库。
2. 创建 Axios 实例：使用 axios.create() 方法创建一个自定义的 Axios 实例，并设置基础 URL 和请求头等配置。
3. GET 请求：定义 fetchUserData 函数来发起 GET 请求，获取指定用户的数据。成功后返回数据，失败则捕获并处理错误。
4. POST 请求：定义 createUser 函数来发起 POST 请求，创建新用户。成功后返回新用户的 ID 或其他信息，失败则捕获并处理错误。
5. Vue 组件集成：在 Vue 组件中定义 getUser 和 saveUser 方法，分别调用上述的 GET 和 POST 请求函数。