axios发请求参考

axios发请求参考

参考资料Axios 官方文档

1. 发送普通表单数据

使用 axios.post() 方法，在请求体中包含表单数据，并在请求头中设置 Content-Type 为 application/x-www-form-urlencoded。

import axios from 'axios'; // 引入 axios 库
import qs from 'qs';  // 引入 qs 库来处理参数序列化

// 表单数据
const data = {
  username: 'user',
  password: 'password'
};

// 使用 axios 发送 POST 请求，内容为表单数据
axios.post('https://example.com/login', qs.stringify(data), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // 设置请求头
  }
})
.then(response => {
  // 处理响应
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});

2. 发送包含文件上传的表单数据

使用 axios.post() 方法，在请求体中包含表单数据和文件，并在请求头中设置 Content-Type 为 multipart/form-data。

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

// 创建 FormData 对象
const formData = new FormData();
formData.append('username', 'user'); // 添加表单数据
formData.append('file', fileInput.files[0]);  // 添加文件，fileInput 是一个文件输入元素

// 使用 axios 发送 POST 请求，内容为包含文件的表单数据
axios.post('https://example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 设置请求头
  }
})
.then(response => {
  // 处理响应
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});

3. 发送并发请求

使用 Promise.all() 方法同时发送多个请求，并在请求完成后统一处理响应数据。

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

// 定义两个 GET 请求
const requestOne = axios.get('https://example.com/endpoint1');
const requestTwo = axios.get('https://example.com/endpoint2');

// 使用 Promise.all() 发送并发请求
Promise.all([requestOne, requestTwo])
.then(responses => {
  // 处理多个请求的响应
  console.log(responses[0].data);  // 第一个请求的响应数据
  console.log(responses[1].data);  // 第二个请求的响应数据
})
.catch(error => {
  // 处理错误
  console.error(error);
});

4. 将 HTML 表单直接转换为 JSON 数据发送

使用 document.querySelector() 获取表单元素，然后直接将其作为请求体发送，同时设置请求头的 Content-Type 为 application/json。

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

// 获取表单元素
const form = document.querySelector('form');

// 将表单数据转换为 FormData 对象
const formData = new FormData(form);

// 将 FormData 转换为 JSON 对象
const data = {};
formData.forEach((value, key) => {
  data[key] = value;
});

// 使用 axios 发送 POST 请求，内容为 JSON 数据
axios.post('https://example.com/submit', JSON.stringify(data), {
  headers: {
    'Content-Type': 'application/json' // 设置请求头
  }
})
.then(response => {
  // 处理响应
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});