Vue中的数据请求

Vue当中的数据请求

在以前的开发过程当中，我们会使用Ajax(jQuery)里面的Ajax来进行数据通讯，它主要就是为了进行数据请求，现在在Vue里面，我们也有一个专门的插件去进行数据请求

vur-resource数据请求

1. get请求

new Vue({
  el: "#app",
  methods: {
    getDate() {
      var url = "http://api.softeem.xin/movie/list.json?type=hot&offset=0&limit=10";
      //在vue-resource里面，他内部的请求是通过Promise来完成的异步操作，所以 我们要通过then或catch来处理它的后面操作
      this.$http.get(url).then(res => {
        //vue-resource返回的结果是一个对象  res,它有两个属性，一个是control 另一个是data
        //它真正请求回来的数据在data里面
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    }
  }
})

2. 带参数params的get请求

   我们在使用get请求的时候，请求地址与请求参数是以?的形式连接在一起的，但是现在我们可以直接把请求参数当成一个对象传递进去

   new Vue({
     el: "#app",
     methods: {
       getDate() {
         var url = "http://api.softeem.xin/movie/list.json?type=hot&offset=0&limit=10";
         //axios
         this.$http.get("http://api.softeem.xin/movie/list.json", {
           params: {
             type: "hot",
             offset: 0,
             limit: 10
           }
         }).then(res => {
           //res里面有两个，一个是data,一个是control，这两个属性都属于我们的body里面的
           //body是请求回来的对象 （直接转成的JS对象）
           console.log(res.body);
           //如果你要拿到JSON字符串，这个时候bodyText它是请求的字符串
           console.log(res.bodyText);
           //headers代表了response Headers 服务器返回头部信息
         }).catch(err => {
           console.log(err);
         })
       }
     }
   })
   

3. post请求

   说明：vue-resource的post请求与axios的post请求保持一致语法

   new Vue({
     el: "#app",
     methods: {
       getDate() {
         //vue-resource它的请求的get与post是根axios保持一致
         var url = "http://api.softeem.xin/movie/list.json?type=hot&offset=0&limit=10";
         //axios
         this.$http.get("http://api.softeem.xin/movie/list.json", {
           type: "hot",
           offset: 0,
           limit: 10
         }).then(res => {
           //res里面有两个，一个是data,一个是control，这两个属性都属于我们的body里面的
           //body是请求回来的对象 （直接转成的JS对象）
           console.log(res.body);
           //如果你要拿到JSON字符串，这个时候bodyText它是请求的字符串
           console.log(res.bodyText);
           //headers代表了response Headers 服务器返回头部信息
         }).catch(err => {
           console.log(err);
         })
       }
     }
   })
   

4. jsonp请求

   vue-resource保持一个特性就是可以发起jsonp的请求，具体如下

   new Vue({
     el: "#app",
     methods: {
       getDate() {
         //url:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&cb=jQuery110208650253613299665_1523514428484
         //后面的cb是回调的方法名
         this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", {
           jsonp: "cb",
           params: {
             wd: "b"
           }
         }).then(res => {
           console.log(res);
           //在这里，要注意 ，它的值，也拿到回调时面去了
         }).catch(err => {
           console.log(err);
         })
       }
     }
   })
   

vue在webpack开发环境下的Ajax跨域请求