vue中用axios post方式报错的解决方法

前言

很多同学在用vue开发的过程中会用到axios这个包去发ajax请求，但是在用它的post方法时会发生各种各样的问题。网上也有各种的答案，现在我整理了一下，专门对axios做了一层封装，一般情况下，我们只用到post, get这两种方式。其实这两种方式按理来说并没有多大区别，只是他们的区别是因为浏览器对不同的请求方式做了不同的限制处理才有区别的。

post请求后台收不到参数的可能原因

1，没有对要发送的数据进行序列化
  解决方案： data: qs.stringify(data)

2，没有设置对应的post的请求头 
   解决方案：

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

3,解决axios发请求不带cookies的问题
  axios.defaults.withCredentials = true // 请求会带cookies

发post请求时，1，2项设置必不可少

具体封装代码可以参考一下,新建一个ajax.js

import axios from 'axios'
import qs from 'qs' // qs这个包在install  axios 时就已经装了，因为 qs 是 axios 的依赖包
axios.defaults.withCredentials = true // 带cookie请求
axios.defaults.timeout = 5000 //  请求的超时时间 5000ms

axios.post = function (url, data = {}) {
  return axios({
    method: 'post', // 请求协议
    withCredentials: true, // true时，发送请求会带cookie,不需要带cookie可以设置false
    url: url, // 请求的地址
    data: qs.stringify(data), // post 请求的数据,很多人
    timeout: 5000, // 请求超时时间, 单位毫秒
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  })
}

axios.get = function (url, params = {}) {
  return axios({
    method: 'get', // 请求协议
    withCredentials: true, // true时，发送请求会带cookie,不需要带cookie可以设置false
    url, // 请求的地址
    params, // get 请求的数据
    timeout: 5000 // 请求超时时间, 单位毫秒
  })
}

axios.interceptors.response.use(response => {
  return response.data // 只拿后台返回的json数据
}, 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方式发送数据:
let data = {page:1,pageSize: 10}

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

在项目的任何组件里面可以这样用post方式发送数据:
 this.$ajax.post(url,data).then(result => {
  // 你的逻辑
 }).catch(err => {
  // 你的逻辑
 })



 2,只在用到发ajax的组件用，
  import axios from './ajax.js'
  
  let data = {page:1,pageSize: 10}
 axios.get(url,data).then(result => {
  // 你的逻辑
 }).catch(err => {
  // 你的逻辑
 })

 在组件里面可以这样用post方式发送数据:
 axios.post(url,data).then(result => {
   // 你的逻辑
  }).catch(err => {
   // 你的逻辑
  })

上面的方法虽然解决了问题，但是方法不太好，已经违反了软件的面向对象设计原则：开放封闭原则。

我们要的正确做法是要在axios上扩展，而不是修改覆盖它原有的东西。具体参考下一篇《用axios扩展出一个适合自己项目的ajax工具类》.