axios是spa專案中常用的前後端的互動方式，其實就是promise封裝的ajax，如下為axios的基本使用

axios使用post傳送資料時，預設是直接將json放到請求體中提交到後端的，也就是說Content-Type變成了application/json；charset=utf-8,這是axios預設的請求頭content-type型別。但是實際後端要求的‘Content-Type’:

'application/x-www=form-urlencodeed'為多見，與預設配置不同。就會導致請求地址和引數都對了卻得不到資料。

post常見的資料格式(content-type)

1.Content-Type:application/json:請求體中的資料會以json字串的形式傳送到後端

2.Content-Type:application/x-www-form-urlencoded:請求體中的資料會以普通表單形式鍵值對傳送到後端

3.Content-Type:multipart/form-data:它會將請求體的資料處理為一條資訊，以標籤為單元，用分隔符分開，既可以上傳鍵值對也可以上傳檔案

下面說下常見的處理方式:

1.用URLSearchParams傳遞引數，比較省事

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 
 
'post',
    url: '/api/lockServer/search',
    data: param
})

但是這種方式不支援所有的瀏覽器，總體的支援比較ok，優先推薦這種解決

2.就是給axios配置預設請求頭

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'或者{headers:{'Content-Type':'application/x-www-form-urlencoded'}}

然後將引數轉換為query引數，利用qs

引入qs，這個庫是axios裡面包含的，不需要下載了

import Qs from 'qs'
let data = {
    "username": "cc",
    "psd": "123456"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

那麼對於multipart/form-data又該如何解決呢

常見的使用場景就是前端頁面上傳個人頭像，然後點選儲存傳送後端修改原始資料，解決辦法如下:

1.Content-Type:multipart/form-data

let params = new FormData()
        params.append('file', this.file)
        params.append('id', localStorage.getItem('userID'))
        params.append('userName', this.name)
        params.append('sex', this.sex)
        params.append('mobile', this.phone)
        params.append('email', this.email)
        params.append('qq', this.qq)
        params.append('weChat', this.WeChat)

        axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
          if (res.data.code === 0) {
            this.$router.go(-1)
          }
        }).catch(error => {
          alert('更新使用者資料失敗' + error)
        })

使用如下實現使用者頭像更新

2.Content-Type:application/json

這種就是axios預設的請求資料型別了，只需要將引數序列化json字串進行傳遞就行，無須多餘的配置