axios发送post请求带参数：从基础使用到高级配置全解析

1次阅读

共计 2841 个字符，预计需要花费 8 分钟才能阅读完成。

Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中。它提供了一种简洁、易用的方式来处理 HTTP 请求，支持请求和响应拦截、自动转换 JSON 数据等特性。在前后端分离的开发模式中，axios 成为了前端开发者的首选工具之一。

Post 请求是 HTTP 协议中的一种方法，主要用于向服务器提交数据。与 Get 请求不同，Post 请求的数据不会显示在 URL 中，而是放在请求体中发送给服务器。这使得 Post 请求更适合传输敏感或大量数据。

在实际开发中，使用 axios 发送 Post 请求时经常会遇到以下问题：

参数格式错误：后端接口期望接收 JSON 格式数据，但前端发送的是 URL 编码格式
Content-Type 设置不当：没有正确设置请求头，导致后端无法正确解析请求体
参数序列化问题：复杂对象没有正确序列化，导致数据丢失或格式错误
文件上传问题：使用 FormData 时没有正确处理文件字段
CORS 问题：跨域请求时没有正确处理预检请求

URL 参数是将数据附加在 URL 末尾，以查询字符串的形式传递。这种方式适合传递少量、简单的数据，但不适合传输敏感或大量数据。

请求体参数是将数据放在 HTTP 请求体中发送，这是 Post 请求最常用的参数传递方式。根据数据格式不同，又可以分为：

application/x-www-form-urlencoded：传统的表单提交格式
application/json：现代 API 常用的 JSON 格式
multipart/form-data：用于文件上传

FormData 是专门为表单数据设计的 API，特别适合文件上传场景。它可以自动处理文件字段，并设置正确的 Content-Type。

import axios from 'axios';

async function basicPost() {
  try {
    const response = await axios.post('/api/endpoint', {
      key1: 'value1',
      key2: 'value2'
    });
    console.log(response.data);
  } catch (error) {console.error('请求失败:', error);
  }
}

async function postWithURLParams() {
  try {
    const response = await axios.post('/api/endpoint?param1=value1&param2=value2', {bodyKey: 'bodyValue'});
    console.log(response.data);
  } catch (error) {console.error('请求失败:', error);
  }
}

async function postWithJSONBody() {
  try {
    const response = await axios.post('/api/endpoint', {
      name: 'John Doe',
      age: 30,
      address: {
        street: '123 Main St',
        city: 'New York'
      }
    }, {
      headers: {'Content-Type': 'application/json'}
    });
    console.log(response.data);
  } catch (error) {console.error('请求失败:', error);
  }
}

async function uploadFile(file) {
  try {const formData = new FormData();
    formData.append('file', file);
    formData.append('description', 'Sample file upload');

    const response = await axios.post('/api/upload', formData, {
      headers: {'Content-Type': 'multipart/form-data'}
    });
    console.log('上传成功:', response.data);
  } catch (error) {console.error('上传失败:', error);
  }
}

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers['X-Custom-Header'] = 'some-value';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);