关于vue中axios的数据data格式问题

**# 注:

网上很多都是使用post发送的例子,但是我使用过程当中,就是参数有问题,一直报参数无法present的问题,后来看到这篇博客,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了,特别注意QS的功能:

**

**`第一个坑:使用axios的then之后,要给data赋值,使用this报错,以下是原因和解决方案:`**

> 第一种方法

在then 这个里边的赋值方法this.followed = response.data.followed会出现报错，什么原因呢？在Google上查了下，原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。  

可以看下 Stackoverflow 的解释：  

  

In option functions like data and created, vue binds this to the view-model instance for us, so we can use this.followed, but in the function inside then, this is not bound.  

So you need to preserve the view-model like (created means the component's data structure is assembled, which is enough here, mounted will delay the operation more):  

  

解决方法：  

  

    created() {  

       var self = this;  

       axios.post('/api/question/follower', {  

           'question':this.question,  

           'user':this.user  

       }).then(function(response){  

           // console.log(response.data);  

           self.followed = response.data.followed;  

       })  

    },  

或者我们可以使用 ES6 的 箭头函数arrow function，箭头方法可以和父方法共享变量 ：  

  

 created() {  

       axios.post('/api/question/follower', {  

           'question':this.question,  

           'user':this.user  

       }).then((response) => {  

           this.followed = response.data.followed;  

       })  

    }

> 第二种方法

在研究中我们发现我们可以讲拼接进接口中，但是在企业级开发中这样的书写方法并不规范，所以在这个时候我们需要将axios的写法规范，在一般写法中我们

$axios{

  urls:baseurl,

  methond:base,

  data:{}

  headers:[xx:xxxx]

}

但是我们可以在每个文件中对config进行编译  

例如：

import Qs from 'qs'

 var vm = this

var data = Qs.stringify({"name":"痞子达"});

 this.$http.post(vm.testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{

     alert(response.data.msg);

})

`这个的使用前提是  我们需要 引入axios中的qs去改变 数据的格式`

因此 为了避免这样的重复的书写动作 ，我们会在入口文件中进行公共写法的编译

在axios的官方文档中指出（ https://www.kancloud.cn/yunye/axios/234845）

这里的主要操作是对  请求过程中的  then或者 catch   

进行拦截 （也就是在请求发送前对我们的data数据进行  转化 ）

官方文档中给出了 两种解决方法 我们使用   axios.create方法

可以使用自定义配置新建一个 axios 实例

axios.create([config])

var instance = axios.create({

  baseURL: 'https://some-domain.com/api/',

  timeout: 1000,

  headers: {'X-Custom-Header': 'foobar'}

});

// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。

  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL

  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据

  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法

  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

  transformRequest: [function (data) {

    // 对 data 进行任意转换处理

    return data;

  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据

  transformResponse: [function (data) {

    // 对 data 进行任意转换处理

    return data;

  }],

  // `headers` 是即将被发送的自定义请求头

  headers: {'X-Requested-With': 'XMLHttpRequest'},

在这里改变 具体代码如下

**var instance = axios.create({

  //config里面有这个transformRquest，这个选项会在发送参数前进行处理。

  //这时候我们通过Qs.stringify转换为表单查询参数

      transformRequest: [function (data) {

          data = Qs.stringify(data);

          return data;

      }],

      headers:{'Content-Type':'application/x-www-form-urlencoded'}

})**

同时需要在   vue.use(vueaxios , axios )前  实例化 一个   vue.use(vueaxios,instance)

这里的方法  直接影响了整个  instance的 使用

参考文章

引用文章（ https://blog.csdn.net/nihaoqiulinhe/article/details/79084755）中关于数据格式不正确情况下修改数据格式的方法。