Vue:axios（POST请求）

Lhuu（重开版2025-05-29 21:37

发送 POST 请求

基本用法

javascript 复制代码

axios.post('/api/login', {
  username: 'lcyyyy',
  password: '123456'
})
.then(response => {
  console.log('请求成功:', response.data);
})
.catch(error => {
  console.error('请求失败:', error);
});

在 Vue 组件中使用

javascript 复制代码

export default {
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('/api/submit', {
          name: this.name,
          email: this.email
        });
        console.log('提交成功:', response.data);
      } catch (error) {
        console.error('提交失败:', error.response?.data || error.message);
      }
    }
  }
}

处理请求参数

发送 JSON 数据（默认）

Axios 默认会将 JavaScript 对象序列化为 JSON，并自动设置请求头 Content-Type: application/json。

发送表单数据（FormData）

如果需要提交表单格式数据（如文件上传），需使用 FormData：

javascript 复制代码

const formData = new FormData();
formData.append('file', this.file); // 文件对象
formData.append('comment', '这是一个文件');

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // Axios 会自动识别，可省略
  }
});

全局配置与拦截器

1全局默认配置

javascript 复制代码

// main.js 或单独配置文件
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000; // 超时时间

请求拦截器

javascript 复制代码

axios.interceptors.request.use(config => {
  // 在发送请求前做些什么（如添加 token）
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

javascript 复制代码

axios.interceptors.response.use(response => {
  // 对响应数据做统一处理
  return response.data; // 直接返回核心数据
}, error => {
  // 统一处理错误（如 401 跳转登录页）
  if (error.response.status === 401) {
    router.push('/login');
  }
  return Promise.reject(error);
});