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請求傳遞參數的相關內容，包括多種傳參方式、請求和響應攔截、取消重複請求以及錯誤處理等，希望對大家有所幫助。