Axios通过get和post方法提交和获取数据[基本使用]

在main.js中全局引入axios

//全局引入axios
//需要npm两个包axios和vue-axios
Vue.use(VueAxios,axios);
//axios相关配置 //更多配置待处理
axios.defaults.baseURL = 'http://localhost:8080/项目名/';

通过get方法获取数据

getData(){
    var _this=this;
    //需要处理异步请求的问题
    this.axios.get('请求地址?可以直接带参数')
        .then(function (response) {
            //将response获得的数据进行处理
            var data=response.data;
            _this.tableData=data;    //data可以是多种数据类型，通过全局变量tableData将数据传出。
        })
        .catch(function (error) {
            console.log(error);
        });
}

通过get方法传递参数出现编码问题时使用下面的方法传递参数

getData(){
    var _this=this;
    //需要处理异步请求的问题
    this.axios.get('请求地址', {//通过这种方式解决模糊匹配后台报空指针异常的问题
        params: {
            key1: value1,
            key2: value2,
        }
    })
        .then(function (response) {
            //数据处理同上
        })
        .catch(function (error) {
            //异常处理同上
        });
}

通过post发送json类型的数据

addXqdm(){
    var _this=this;
    //post的第二个产生就是发送出去的数据内容
    this.axios.post('请求地址/add',
        {
            key1: _this.value1,
            key2: _this.value2
        })
        .then(function (response) {
            //对获取的数据处理
        })
        .catch(function (error) {
            //对异常处理
        });
},