axios发送post请求带参数的完整实践指南：从基础到高级配置

1次阅读

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

axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中。它提供了简洁的 API 来处理 HTTP 请求，支持请求和响应拦截、自动转换 JSON 数据等功能。Post 请求是 HTTP 协议中的一种请求方法，通常用于向服务器提交数据。

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

参数传递不正确，导致服务器无法解析
Content-Type 设置不当，导致请求被服务器拒绝
参数序列化问题，特别是嵌套对象和数组的处理
缺乏统一的错误处理机制
安全性考虑不足，如 CSRF 防护

最基本的 post 请求可以通过 axios 的 post 方法实现，参数可以直接作为第二个参数传递：

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => {console.log(response);
})
.catch(error => {console.error(error);
});

axios 提供了丰富的配置选项，可以满足更复杂的需求：

自定义序列化 ：

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');

axios.post('/api/user', params);

请求拦截器 ：

axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  config.headers.Authorization = `Bearer ${token}`;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器 ：

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

application/x-www-form-urlencoded：

const data = new URLSearchParams();
data.append('username', 'admin');
data.append('password', '123456');

axios.post('/login', data, {
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

multipart/form-data（文件上传）：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('user', JSON.stringify({ name: 'John'}));

axios.post('/upload', formData, {
  headers: {'Content-Type': 'multipart/form-data'}
});

application/json（默认）：

axios.post('/api/data', {
  key: 'value',
  nested: {prop: 'nested value'}
}, {
  headers: {'Content-Type': 'application/json'}
});

下面是一个完整的示例，展示了不同场景下的 post 请求：

// 基础 POST 请求
const basicPost = async () => {
  try {
    const response = await axios.post('/api/users', {
      name: 'John Doe',
      age: 30
    });
    console.log('Response:', response.data);
  } catch (error) {console.error('Error:', error.response?.data || error.message);
  }
};

// 带 URL 参数的 POST 请求
const postWithParams = async () => {const params = new URLSearchParams();
  params.append('param1', 'value1');
  params.append('param2', 'value2');

  try {
    const response = await axios.post('/api/data', params, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    });
    console.log('Response:', response.data);
  } catch (error) {console.error('Error:', error.response?.data || error.message);
  }
};

// 文件上传
const uploadFile = async (file) => {const formData = new FormData();
  formData.append('file', file);
  formData.append('metadata', JSON.stringify({
    uploader: 'John Doe',
    date: new Date().toISOString()
  }));

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {'Content-Type': 'multipart/form-data'},
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`Upload progress: ${percentCompleted}%`);
      }
    });
    console.log('Upload complete:', response.data);
  } catch (error) {console.error('Upload error:', error.response?.data || error.message);
  }
};