Vue-Resource基础介绍

get一般是向服务器端拿数据,

就是在很多http请求时,关闭一个loading一个

在a标签里,href="javascript:;"是因为a标签是跳转标签,为了防止页面刷新.

<a href="javascript:;" class="btn btn-primary">get请求</a>

get请求举例,get里有2个参数,一个是地址,一个是{}对象里的东西

<a href="javascript:;" class="btn btn-primary" v-on:click="get">Get请求</a>

get:function () {
          this.$http.get("package.json",{
          //传递的参数
            params:{
              userId:"101"
            },
            headers:{
              token:"abcd"
            }
//发送请求之后,用then来获取
          }).then(res=>{
          //这个data才是要获取的数据
              this.msg=res.data;
          },error=>{
              this.msg = error;
          })
      }

post请求,函数里有3个参数,一个是地址,一个是userId,一个是 headers

<a href="javascript:;"  class="btn btn-primary" @click="post">Post请求</a>

post:function () {
  this.$http.post("package.json",{
      userId:"102"},
    {
      headers:{
        access_token:"abc"
      }
    }).then(function (res) {
    this.msg = res.data;
  },error=>{
    this.msg = error;
  })
},

jsopn请求允许跨域访问,

请求类型和get一样

jsonp:function () {
  this.$http.jsonp("https://blog.csdn.net/qq_36358940/article/details/78570206",
    { params:{
    userId:"101"}
  }).then(function (res) {
    this.msg = res.data;
  },error=>{
    this.msg = error;
  })
}

interceptors全局拦截器

mounted:function(){
  Vue.http.interceptors.push(function (request,next) {
    console.log("request inint.");//请求之前打印
    next(function (response) {
      console.log('response init,');//请求之后打印
      return response;
    })
  })
}

http:{
  root:"http://localhost:8080/demo7/"
},

这个用来设置静态位置,可以不用关心路径的问题,请求文件,请求package.json文件的页面在哪,只要定义好了root,就可以随阿扁请求

 get:function () {
          this.$http.get("package.json",{
          //传递的参数
            params:{
              userId:"101"
            },
            headers:{
              token:"abcd"
            }
//发送请求之后,用then来获取
          }).then(res=>{
          //这个data才是要获取的数据
              this.msg=res.data;
          },error=>{
              this.msg = error;
          })
      },

Vue-Resource基础介绍

猜你喜欢