vue axios前后端数据交互问题（2）

前一篇的介绍中遗留了几个问题，而且部分内容即success、error那部分有误，具体内容以本篇的为主。本篇解决的问题如下：

问题：1、后台获取前端数据的值；

         2、前端渲染接收到的后台的值；

         3、在axios中this的指向问题。

1、后台获取到前台的值，首先在main.js中配置以下文件

import axios from 'axios'

import qs from 'qs'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

Vue.prototype.$qs = qs

Vue.prototype.$ajax = axios
axios.interceptors.request.use((config) => {
    config.data = qs.stringify(config.data);
    return config;
}, function(error) {
    return Promise.reject(error);
});

2、前端渲染接收到的后台的值

  （1） 在data中定义一个：

    errorinfo:'',

  （2）在调用axios接收后台返回的值的地方使用this.errorinfo="后台获取的值"

 完成上述步骤后会出现一个this的指向问题，接着看3的解决办法。

3、在axios中this的指向问题

   要使在axios中的this指向这个vue中的 errorinfo，就要采用ES6的语法=>来写接收成功的那一部分内容。

完整的例子如下：

<span class="error_tip">{{errorinfo}}</span> 

<div class="form_item">

<input type="text" :style="test"  v-model="user" placeholder="请输入帐号" @blur="validataPhone(user)"/>

</div>

data中的数据：

      return {user:''，errorinfo:''｝

method中调用的方法：

      this.$ajax({

                    method: 'post',
                    url : "http://IP:8088/demo/user/login.do",
                    data : {
                        "后台的值": 前台的值
                    }

                })//   如果直接在里面访问 this，无法访问到 Vue 实例，this指向发生了变化。建议使用箭头函数,下面有讲

                //请求成功后执行then

        .then((response)=> {

       console.log(response);   //处理后台返回的数据
       var result = response ;
       var id=result.data.data.id; //获取对应的数据，赋值给id
       this.errorinfo=id;   // 将id的值给指向这个vue实例的errorinfo，实现页面的渲染

    })

               //请求失败后执行catch

   .catch(function(err){
       console.log(err)
    }) ;