vue--axios发送请求

首先安装：axios

$ npm install axios
$ cnpm install axios //taobao源
$ bower install axios
或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

main.js里面引入：

import axios from 'axios'
/* 使用 axios */
Vue.prototype.$http=axios;

其他封装的 .js 文件里面引入：

import axios from 'axios'
/* 使用 axios */
Vue.prototype.$http=axios;

1、发送 get 请求

let urls = url+"/id/789";
axios.get(urls).then(function (response) {
  console.log(response);
}).catch(function (error){
  console.log(error);
});
// 箭头函数
axios.get(urls).then((res)=>{
  console.log(res);
});

上面的get请求传递参数还不行：

// 传递参数 方法一
let urls = url+"?id=123&lpage=1";
axios.get(urls).then(function(res){
  console.log(res);
});
// 箭头函数
axios.get(urls).then((res)=>{
  console.log(res);
});

方法二：

// 传递参数 方法二
axios.get(url,{
  params:{id:123,name:'张三'}
}).then(function(res){
  console.log(res);
});
// 箭头函数
axios.get(url,{
  params:{id:123,name:'张三'}
}).then((res)=>{
  console.log(res);
});

2、发送post请求

axios.post(url,{name:'xiaoming'}).then(function(res){
    console.log(res);
});

上面这个是在网上找到发送 POST 的请求的方法，确实也是可以发送请求，但是参数带不过去。

废了九牛二虎之力自己写了一个：

axios({
    method:'post',
    url:url,
    data:{name:"aaa",id:1,age:20},
    headers:{'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj){
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    }
}).then(function(res){
  console.log(res);
}).catch(resp =>{
  console.log(res);
});

使用箭头函数：

axios({
    method:'post',
    url:url,
    data:{name:"aaa",id:1,age:20},
    headers:{'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj){
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    }
}).then((res)=>{
  console.log(res);
});

进行封装：

// 使用
axiosPost(url,{value:'不错'},function(res){
  console.log(res);
});
// 封装 axio post请求
function axiosPost(url,data,fun){
  axios({
      method:'post',
      url:url,
      data:data,
      headers:{'Content-Type': 'application/x-www-form-urlencoded'},
      transformRequest: function(obj) {
          var str = [];
          for(var p in obj){
              str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
          }
          return str.join("&");
      }
  }).then((res)=>{fun(res);});
};

发送数据建议使用 Qs:

// axiosPost
axiosPost:function(url,data,fun){
    axios({
        method: 'post',
        url:url,
        data:Qs.stringify(data),
    }).then((res)=>{fun(res);});
}

使用封装的请求：

this.axiosPost(url,data,function(res){
    console.log(res);
});
// 使用箭头函数
this.axiosPost(url,data,(res)=>{
    console.log();
});