axios post请求传参数

一、axios简介

axios是一个基于Promise的HTTP请求客户端，用于浏览器和Node.js的网络请求，支持请求和响应拦截、Promise API、请求取消等功能，使用axios可以更方便地处理http请求。

二、axios post请求

axios的post请求可以通过以下方法传递参数：

方式一：直接传递参数

axios.post('/api', {
  name: 'John',
  age: 30
}).then(response => {
  console.log(response)
})

方式二：使用URLSearchParams处理参数

const params = new URLSearchParams()
params.append('name', 'John')
params.append('age', 30)

axios.post('/api', params).then(response => {
  console.log(response)
})

方式三：使用FormData处理文件上传

const formData = new FormData()
formData.append('file', file)

axios.post('/upload', formData).then(response => {
  console.log(response)
})

三、传递请求头和响应头

axios通过headers参数传递请求头，通过response.headers获取响应头：

axios.post('/api', {
  name: 'John',
  age: 30
}, {
  headers: {'Authorization': 'Bearer ' + token}
}).then(response => {
  console.log(response.headers)
})

四、请求和响应拦截

axios可以通过interceptors属性添加请求和响应拦截器，拦截器可以对请求参数、响应数据等进行处理：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + token
  return config
})

axios.interceptors.response.use(response => {
  response.data = response.data.toUpperCase()
  return response
})

五、取消重复的请求

axios可以通过cancelToken属性取消重复的请求，防止因为重复的请求导致响应出错：

const source = axios.CancelToken.source()

axios.post('/api', {
  name: 'John',
  age: 30
}, {
  cancelToken: source.token
}).then(response => {
  console.log(response)
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  }
})

source.cancel('Operation canceled by the user.')

六、错误处理

axios可以通过catch方法捕获请求失败的错误信息：

axios.post('/api', {
  name: 'John',
  age: 30
}).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error.message)
})

七、总结

本文介绍了axios post请求传递参数的相关内容，包括多种传参方式、请求和响应拦截、取消重复请求以及错误处理等，希望对大家有所帮助。