快捷導(dǎo)航

axios異步提交表單數(shù)據(jù)的幾種方法

更新時(shí)間：2019年08月11日 08:44:59 作者：賜我白日夢(mèng)

這篇文章主要給大家介紹了關(guān)于axios異步提交表單數(shù)據(jù)的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)各位大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

踩坑Axios提交form表單幾種格式

前后端分離的開發(fā)前后端, 前端使用的vue,后端的安全模塊使用的SpringSecurity,使用postman測(cè)試后端的權(quán)限接口時(shí)發(fā)現(xiàn)都正常,但是使用vue+axios發(fā)送異步的請(qǐng)求后端一直獲取不出axios提交的form表單的數(shù)據(jù),爬坑兩個(gè)半鐘頭找到了答案

axios用post異步形式提交的數(shù)據(jù)和我們直接使用from表單提交的數(shù)據(jù)的格式(Form Data格式)是不一樣的,在下面列舉

默認(rèn)格式Request Payload

直接使用axios發(fā)送異步請(qǐng)求,沒任何處理的代碼如下:

const service = axios.create({})

doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
 })

這種方式提交的表單格式是默認(rèn)是RequestPayload, 它的長(zhǎng)下面這個(gè)樣子

可以看到,它的Contet-type是 "Content-Type": "application/json;"
但是后臺(tái)的SpringSecurity對(duì)這種結(jié)果可不買單,在Request中解析不出任何數(shù)據(jù)來

處理成Form Data格式

使用插件qs, 安裝命令如下:

npm install --save qs

請(qǐng)求編碼:

const service = axios.create({})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }
 
 或者
 
 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo ,
  transformRequest: [function (data) {
  data = qs.stringify(data);
  return data;
  }],
 })
 }

經(jīng)過這樣處理的表單數(shù)據(jù)長(zhǎng)成下面的這樣, 這也是我們最常用的Form Data格式,這種格式的數(shù)據(jù)可以從后臺(tái)的HttpRequest中把提交的屬性解析出來

其他類型的Content-Type對(duì)應(yīng)的表單數(shù)據(jù)格式

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
  })
 }

它長(zhǎng)這樣

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
  })
 }
---

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data:pojo
  })
 }

const service = axios.create({
 headers: {
  "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
 }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }