vue中使用axios简单的封装post请求,并使用返回的数据

发现在学习vue的时候,不论你用的是哪种编程工具,是否使用打包和脚手架,都需要手工的多练习,只能说步步是坑.

在使用的过程中一定要多按F12，多写console.log来看输出的值是什么，非常有助于排错和知道返回的是啥东西

1、在vue的data中定义一个数组pingxuanren，用于存放从服务器端请求来的数据

data:{
    pingxuanren:[],     //需要评分的人员信息  
    userinfo:[],        //用户自己的身份信息
    userxx:''
},

2、然后简单的封装一下axios的post请求，我也是从网上看了很多，抄了一下，自己并不会写。

//封装一下axios的POST请求
axiosPost:function(url,params){
    return new Promise((resolve, reject) => {
    axios({
        url: url,
        method: 'post',
        data: params,
        transformRequest: [function(data) {
           let ret = ''
           for(let it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
           }
           return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
   })
   .then(res=>{
       resolve(res.data);
   })
  });
},

上面的直接复制就能用,返回的数据存储在Promise对像中,只要知道数据返回了就行了.

3、具体的使用中需要注意params的参数,一定要写.then,返回的数据就是res,直接用就可以了.

 //返回被评分人的信息列表
 getyunangong:function(){
    var yhm=localStorage.getItem('yhm');
     5     var url='test.ashx?method=yuangong';
    var params={yhm_:yhm};
    this.axiosPost(url,params)
    .then(res=>{
        this.pingxuanren=res;
    })
 },

4、pingxueren数组中就已经有数组了，可以读取绑定到页面上了。

再看看原来的写法，乱的一批，每有不同的请求都得重写一次。

axios({
                            url: 'test.ashx?method=savedata',
                            method: 'post',
                            data: {
                                title_: _title,
                                fen_: mes,
                                yhm:localStorage.getItem('yhm'),
                                tofen:localStorage.getItem('tofen'),
                            },
                            transformRequest: [function(data) {
                                let ret = ''
                                for(let it in data) {
                                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                }
                                return ret
                            }],
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function (response) {
                            var info=response.data;
                            //console.log(info);
                            if (info===401){
                                alert("保存数据时出错了!");
                            }else{
                                alert("保存成功,点击'确定'将跳转至主评分页面!");
                                localStorage.removeItem('tofen');
                                window.location.href="home.htm";

                            }