VUE axios 發送 Form Data 格式數據請求

axios 默認是 Payload 格式數據請求，但有時候後端接收參數要求必須是 Form Data 格式的，所以我們就得進行轉換。Payload 和 Form Data 的主要設置是根據請求頭的 Content-Type 的值來的。

Payload   　　   Content-Type: 'application/json; charset=utf-8'

Form Data　　  Content-Type: 'application/x-www-form-urlencoded'

 

一、設置單個的POST請求爲 Form Data 格式

axios({
   method: 'post',
   url: 'http://localhost:8080/login',
   data: {
      username: this.loginForm.username,
      password: this.loginForm.password
   },
   transformRequest: [
      function (data) {
         let ret = ''
         for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
         }
         ret = ret.substring(0, ret.lastIndexOf('&'));
         return ret
      }
    ],
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
    }
})

主要配置兩個地方，transformRequest 方法進行數據格式轉換， Content-Type 值改爲 'application/x-www-form-urlencoded'

 

二、全局設置POST請求爲 Form Data 格式

因爲像上面那樣每個請求都要配置 transformRequest 和 Content-Type 非常的麻煩，重複性代碼也很醜陋，所以通常都會進行全局設置。具體代碼如下

import axios from 'axios'
import qs from 'qs'

// 實例對象
let instance = axios.create({
  timeout: 6000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

// 請求攔截器
instance.interceptors.request.use(
  config => {
    config.data = qs.stringify(config.data) // 轉爲formdata數據格式
    return config
  },
  error => Promise.error(error)
)

就是我們在封裝 axios 的時候，設置請求頭 Content-Type 爲 application/x-www-form-urlencoded。 然後在請求攔截器中，通過 qs.stringify() 進行數據格式轉換，這樣每次發送的POST請求都是 Form Data 格式的數據了。 其中 qs 模塊是安裝 axios 模塊的時候就有的，不用另行安裝，通過 import 引入即可使用。