目 录CONTENT

文章目录

Vue中的数据请求

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 11048 阅读 / 3275 字 / 正在检测是否收录...

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);
      })
    }
  }
})
  1. 带参数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);
          })
        }
      }
    })
    
  2. 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);
          })
        }
      }
    })
    
  3. 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跨域请求

0

评论区