vue axios數據請求的兩種請求頭，一種是JSON序列化對象，一種是formData,這兩種格式的處理方式

請求頭與響應頭的查看

PC端，發送請求後，點擊控制檯中的Network中的請求鏈接，此時爲了篩選請求鏈接，可以點擊XHR.
打開請求鏈接後，在Headers中可以看到Response Headers響應頭和Request Headers請求頭。
無論是請求頭和響應頭，都有對應的數據格式，也就是content-type.
最近工作中，遇到了兩種不同的請求格式，這兩種格式的處理方式也是不同的。

content-type:‘application/json;charset=UTF-8’

content-type:'application/json;charset=UTF-8'這種是最常見的一種數據請求格式，我之前遇到的都是這樣的。
這種數據格式是：axios將JavaScript對象序列化爲JSON
在控制檯中展示的形式如下：

GET請求如下圖：

POST請求如下圖：

無論是get還是post請求，都可以直接使用axios中的get和post方法進行數據發送。
參照axois中的操作鏈接：
axois
簡單的寫法如下：

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

在使用 catch 時，或傳遞 rejection callback 作爲 then 的第二個參數時，響應可以通過 error 對象可被使用，
也就是說，如果要catch錯誤消息，可以使用 axios.get(url).then(res=>{成功函數執行}).catch(error=>{錯誤接收處理})

“Content-Type”:‘application/x-www-form-urlencoded’

"Content-Type":'application/x-www-form-urlencoded'這種數據格式，是不能用上面的方式直接處理的。
axios中針對這種數據formdata數據，有詳細的說明：
axios formdata數據格式處理
以下部分內容摘自axios

使用 application/x-www-form-urlencoded format
默認情況下，axios將JavaScript對象序列化爲JSON。 要以application / x-www-form-urlencoded格式發送數據，您可以使用以下選項之一。

瀏覽器
在瀏覽器中，您可以使用URLSearchParams API，如下所示：

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
請注意，所有瀏覽器都不支持URLSearchParams（請參閱caniuse.com），但可以使用polyfill（確保填充全局環境）。

或者，您可以使用qs庫編碼數據：

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或者以另一種方式（ES6），

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

我使用的過程中，用的是qs庫的方式：
使用方法如下:
1.安裝: 控制檯 npm install qs 等待安裝完成即可
2.引入並使用
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
代碼貼圖如下：

import axios from 'axios' //引入axios
import router from '@/router/routers' //引入router路由
import { Notification, MessageBox } from 'element-ui' //引入element-ui中的彈窗和提示窗組件
import store from '../store' //引入vuex中的store
import { getToken } from '@/utils/auth' //引入getToken方法，獲取token值
import Config from '@/settings' //引入配置文件
var qs = require('qs')

//axios的使用就是  創建axios   request攔截器 
// 創建axios實例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
  timeout: Config.timeout // 請求超時時間
})

// request攔截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    //此處以下爲重點
    //headers中的content-type 默認的大多數情況是  application/json，就是json序列化的格式
    config.headers['Content-Type'] = 'application/json'
    //爲了判斷是否爲formdata格式，增加了一個變量爲type,如果type存在，而且是form的話，則代表是formData的格式
    if (config.type && config.type === 'form') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
      //data是接收的數據，接收的數據需要通過qs編碼纔可以直接使用
      if (config.data) {
        config.data = qs.stringify(config.data)
      }
    }

    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

控制檯展示情況如下：

多多積累，終成大神。