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

梦里梦外; 2022-04-03 01:20 631阅读 0赞

在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) {
                //对异常处理
            });
    },

[http://comonly.cn/i/][http_comonly.cn_i]

[http_comonly.cn_i]: http://comonly.cn/i/