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

1次阅读

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

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

post 请求是 HTTP 协议中用于向指定资源提交数据的一种方法。在 axios 中，post 请求的基本用法如下：

axios.post(url[, data[, config]])

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

参数格式错误：后端期望接收 JSON 格式的数据，但前端发送的是 URL 编码格式
Content-Type 设置不当：没有正确设置请求头导致后端无法解析请求体
参数序列化问题：特殊字符未正确编码导致请求失败
CORS 问题：跨域请求未正确配置

URL 参数是附加在请求 URL 后面的键值对，适用于简单的数据传递。例如：

axios.post('/api/user?id=123&name=John')

请求体参数是将数据放在请求体中发送，适用于复杂的数据结构。axios 默认会将 JavaScript 对象序列化为 JSON 格式发送：

axios.post('/api/user', {
  id: 123,
  name: 'John'
})

FormData 用于发送表单数据，特别是包含文件上传的场景：

const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData)

async function sendBasicPost() {
  try {
    const response = await axios.post('/api/user', {
      name: 'John Doe',
      email: 'john@example.com'
    });
    console.log(response.data);
  } catch (error) {console.error('Error:', error);
  }
}

async function sendPostWithURLParams() {
  try {
    const response = await axios.post('/api/user?id=123', {name: 'John Doe'});
    console.log(response.data);
  } catch (error) {console.error('Error:', error);
  }
}

async function sendPostWithJSONBody() {
  try {
    const response = await axios.post('/api/user', {
      id: 123,
      name: 'John Doe',
      preferences: {
        theme: 'dark',
        notifications: true
      }
    }, {
      headers: {'Content-Type': 'application/json'}
    });
    console.log(response.data);
  } catch (error) {console.error('Error:', error);
  }
}

async function uploadFile(file) {const formData = new FormData();
  formData.append('file', file);
  formData.append('description', 'Profile picture');

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {'Content-Type': 'multipart/form-data'}
    });
    console.log(response.data);
  } catch (error) {console.error('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-Requested-With'] = 'XMLHttpRequest';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

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

确保后端服务器正确配置了 CORS 头信息：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

对于复杂的嵌套对象，可以使用 qs 库进行序列化：

import qs from 'qs';

const params = {
  filter: {
    status: 'active',
    date: {
      from: '2023-01-01',
      to: '2023-12-31'
    }
  }
};

axios.post('/api/users', qs.stringify(params));