node.js vue-axios和vue-resource-优快云博客

本文通过实例展示了如何使用Vue.js结合vue-resource和axios进行GET、POST和JSONP等不同类型的网络请求，同时介绍了ES6语法特性及Promise的使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource</title>
  <script src="../../node_modules/"></script>
  <script src="../../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
  <h2>vue-resource演示</h2>
  <a href="#" @click="sendGet">发送Get请求</a>
  <a href="#" @click="sendPost">发送Post请求</a>
  <a href="#" @click="sendJsonp">发送Jsonp请求</a>
  <a href="#" @click="send">全局函数</a>
  <p v-text="response"></p>
</div>

<script>

  new Vue({
    el:"#app",
    data:{
      response:'',
      msg:''
    },
    methods:{
      sendGet: function () {
        var _this = this;
        //http://www.imooc.com/course/ajaxskillcourse?cid=796
        this.$http.get("/login",{
          params:{
            userId:"123"
          },
          headers:{
            access_token:"abcded"
          }
        }).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }, function (error) {
          console.log("error:"+error);
          _this.response = error;
        });
      },
      sendPost: function () {
        var _this = this;
        var params = {
          username:"sunnyboysoft@163.com",
          password:"hdeeciu4ZauaDaWF/g+92R8FqNMVA8zoX0UWHinjRM6ND8PMFP9Bt2dr0vGUzZPKXDkzhOJbn3Le0ZcbCiQ1Nx7AIvsrwMzjcSStWNzdyBftzsJS0xsUrtmhqzqaWquXKQoEYgDrP+mNrv0C2ITSpbs+QOql4fPvNSWeAVu54XE=",
          remember:"1",
          pwencode:"1",
          browser_key:"c1eafecb03c5ef07651fb7bd9a7f4b72",
          referer:"http://www.imooc.com"
        }
        //http://www.imooc.com/passport/user/login
        this.$http.post("/login",params).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }, function (error) {
          console.log("error:"+error);
          _this.response = error;
        });
      },
      sendJsonp: function () {
        var _this = this;
        this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
          params:{
            userId:"1001"
          }
        }).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }, function (error) {
          console.log("error:"+error);
        });
      },
      send: function () {
        var _this = this;
        this.$http({
          url:"package.json",
          method:"get",
          params:{
            userId:"103"
          },
          headers:{
            token:"123"
          },
          timeout:5,
          before: function () {
            console.log("before init")
          }
        }).then(function (res) {
          this.msg = res.data;
        });
      }
    }
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../../node_modules/requirejs/require.js"></script>
  <script src="../../node_modules/vue/dist/vue.js"></script>
  <script src="../../node_modules/axios/dist/axios.js"></script>
  <script src="../../node_modules/jsonp/index.js"></script>
</head>
<body>
<div id="app">
  <h2>axios演示</h2>
  <a href="#" @click="sendGet">发送Get请求</a>
  <a href="#" @click="sendPost">发送Post请求</a>
  <a href="#" @click="sendJsonp">发送Jsonp请求</a>
  <a href="#" @click="send">全局函数</a>
  <p v-text="response"></p>
</div>
<script>
//  Vue.use(axios);
  Vue.prototype.$http = axios;
  new Vue({
    el:"#app",
    data:{
      response:''
    },
    methods:{
      sendGet: function () {
        var _this = this;
        //
        axios.get("/login",{
          params:{
            userId:"123"
          },
          headers:{
            access_token:"abcded"
          }
        }).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }).catch(function (err) {
          console.log("error:"+err);
        });
      },
      sendPost: function () {
        var _this = this;
        var params = {
          username:"sunnyboysoft@163.com",
          password:"hdeeciu4ZauaDaWF/g+92R8FqNMVA8zoX0UWHinjRM6ND8PMFP9Bt2dr0vGUzZPKXDkzhOJbn3Le0ZcbCiQ1Nx7AIvsrwMzjcSStWNzdyBftzsJS0xsUrtmhqzqaWquXKQoEYgDrP+mNrv0C2ITSpbs+QOql4fPvNSWeAVu54XE=",
          remember:"1",
          pwencode:"1",
          browser_key:"c1eafecb03c5ef07651fb7bd9a7f4b72",
          referer:"http://www.imooc.com"
        }
        //http://www.imooc.com/passport/user/login
        axios.post("/login",params).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }).catch(function (err) {
          console.log("error:"+err);
        });
      },
      sendJsonp: function () {
        var _this = this;
        jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
          params:{
            userId:"1001"
          }
        },function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        });
      },
      send: function () {
        var _this = this;
        axios({
          method: 'post',
          url: '/user/12345',
          data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
          }
        }).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }).catch(function (err) {
          console.log("error:"+err);
        });;
      }
    }
  });
</script>
</body>
</html>

　　ES6的一些语法：

<script>
  function sum(x,y,z){
    let  total=0;
    if(x) total+=x;
    if(y) total+=y;
    if(z) total+=z;
    console.log(`total:${total}`)
  }
  sum(4,"",9);

  function  sum2(...m) {
    let total = 0;
    for (var i of m) {
      total+=i;
    }
    console.log(`total:${total}`)
  }
  sum2(4,8,9,10);

  let sum3=(...m)=>{
    let total = 0;
    for (var i of m) {
      total+=i;
    }
    console.log(`total:${total}`)
  }
  sum3(4,8,9,10);

  var [x,y]=[4,8]
  console.log(...[4,8]);

  let arr1=[1,3]; let arr2=[4,8];
  console.log("concat",arr1.concat(arr2));

//  [...arr1,...arr2]
//  var [x,y]=[4,8];

  var [x,...y]=[4,8,10,30]
  let [a,b,c]="ES6";
  let xy=["...ES6"];
</script>

　　Promise的用法：

let checkLogin=function () {
  return  new Promise(function (resolve,reject){
    let  flag=document.cookie.indexOf("userId")>-1?true:false;
    if(flag=true){
      resolve({
        status:0,
        result:true
      })
    }else {
      reject("error");
    }
  })
};

let getUserInfo=()=>{
  return new Promise((resolve,reject)=>{
    let userInfo={
      userId:"101"
    }
    resolve(userInfo);
  });
}

checkLogin().then((res)=>{
  if(res.status==0)
  {
    console.log("login success");
    return getUserInfo();
  }
}).catch((error)=>{
  console.log(`error:${error}`);
}).then((res2)=>{
  console.log(`userId:${res2.userId}`)
});

Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
console.log(`result1:${res1.result},result2:${res2.userId}`)
})

转载于:https://www.cnblogs.com/sunliyuan/p/9948230.html