前言

很多同學在用vue開發(fā)的過程中會用到axios這個包去發(fā)ajax請求，但是在用它的post方法時會發(fā)生各種各樣的問題。網(wǎng)上也有各種的答案，現(xiàn)在我整理了一下，專門對axios做了一層封裝，一般情況下，我們只用到post, get這兩種方式。其實這兩種方式按理來說并沒有多大區(qū)別，只是他們的區(qū)別是因為瀏覽器對不同的請求方式做了不同的限制處理才有區(qū)別的。

post請求后臺收不到參數(shù)的可能原因

1，沒有對要發(fā)送的數(shù)據(jù)進行序列化
  解決方案： data: qs.stringify(data)

2，沒有設置對應的post的請求頭 
   解決方案：

    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }

3,解決axios發(fā)請求不帶cookies的問題
  axios.defaults.withCredentials = true // 請求會帶cookies

發(fā)post請求時，1，2項設置必不可少

具體封裝代碼可以參考一下,新建一個ajax.js

import axios from 'axios'
import qs from 'qs' // qs這個包在install  axios 時就已經(jīng)裝了，因為 qs 是 axios 的依賴包
axios.defaults.withCredentials = true // 帶cookie請求
axios.defaults.timeout = 5000 //  請求的超時時間 5000ms

axios.post = function (url, data = {}) {
  return axios({
    method: 'post', // 請求協(xié)議
    withCredentials: true, // true時，發(fā)送請求會帶cookie,不需要帶cookie可以設置false
    url: url, // 請求的地址
    data: qs.stringify(data), // post 請求的數(shù)據(jù),很多人
    timeout: 5000, // 請求超時時間, 單位毫秒
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  })
}

axios.get = function (url, params = {}) {
  return axios({
    method: 'get', // 請求協(xié)議
    withCredentials: true, // true時，發(fā)送請求會帶cookie,不需要帶cookie可以設置false
    url, // 請求的地址
    params, // get 請求的數(shù)據(jù)
    timeout: 5000 // 請求超時時間, 單位毫秒
  })
}

axios.interceptors.response.use(response => {
  return response.data // 只拿后臺返回的json數(shù)據(jù)
}, error => Promise.reject(error.response))

export default axios

如何用這個ajax.js

 1,可以掛載到vue的原型鏈上面去，這樣就全局通用
在主入口文件main.js里面
import ajax from './ajax.js'
import Vue from 'vue'
Vue.$ajax = ajax

然后在項目的任何組件里面可以這樣用get方式發(fā)送數(shù)據(jù):
let data = {page:1,pageSize: 10}

this.$ajax.get(url,data).then(result => {
  // 你的邏輯
}).catch(err => {
  // 你的邏輯
})

在項目的任何組件里面可以這樣用post方式發(fā)送數(shù)據(jù):
 this.$ajax.post(url,data).then(result => {
  // 你的邏輯
 }).catch(err => {
  // 你的邏輯
 })



 2,只在用到發(fā)ajax的組件用，
  import axios from './ajax.js'
  
  let data = {page:1,pageSize: 10}
 axios.get(url,data).then(result => {
  // 你的邏輯
 }).catch(err => {
  // 你的邏輯
 })

 在組件里面可以這樣用post方式發(fā)送數(shù)據(jù):
 axios.post(url,data).then(result => {
   // 你的邏輯
  }).catch(err => {
   // 你的邏輯
  })

上面的方法雖然解決了問題，但是方法不太好，已經(jīng)違反了軟件的面向?qū)ο笤O計原則：開放封閉原則。

我們要的正確做法是要在axios上擴展，而不是修改覆蓋它原有的東西。具體參考下一篇《用axios擴展出一個適合自己項目的ajax工具類》.