Vue-Resource基础介绍

客官°小女子只卖身不卖艺 2022-05-09 05:58 156阅读 0赞

![70][]

![70 1][]

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

![70 2][]

![70 3][]

就是在很多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,就可以随阿扁请求

[70]: /images/20220509/9c4dbcb53f704f8ca369dc0e86c9634b.png
[70 1]: /images/20220509/dd53ff81084143368848d70f17397e96.png
[70 2]: /images/20220509/b06b2e8ade9842428c6aa08551eb09a5.png
[70 3]: /images/20220509/d736b34e32374379a428dd999c61cd8f.png