Vue：（四）Ajax（Vue-Resource）

Vue 要实现异步加载需要使用到 vue-resource 库。（挂载到vue实例上）

（一）Vue-Resource引入

• <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
• npm install vue-resource --save

（二）基础API

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

（三）参数

（四）使用

• Get请求
• Post请求
• JSONP请求
• Http请求
• 全局拦截器使用

//methods外写全局地址，则请求中地址写文件名即可
http:{
  root:"http://xxxxxx"
}

（五）Get请求

methods:{
  get:function(){
    this.$http.get("package.json",{
      params:{
        userId:"101"
      },
      headers:{
        token:"abcd"
      }
    }).then(res=>{
       this.msg=res.data;
     },error=>{
       this.msg=error;
    });
  }
}

（六）Post请求

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

（七）JSONP请求

methods:{
  jsonp:function(){
    this.$http.jsonp("http://xxxxxx", {
      this.msg=res.data;
    });
  }
}

（八）Http请求

methods:{
  http:function(){
    url:"package.json",
    methods:'GET',
    params:{
        userId:"103"
    },
    headers:{
        token:"123"
    },
    timeout:50,
    before:function(){
      console.log("before init")
    }
  }).then(function(res){
     this.msg=res.data;
  });
}

（九）全局拦截器使用

mount:function(){
  Vue.http.interceptors.push(function(request,next){
    console.log("request init.");
    next(function(response){
      console.log("response init.");
      return response;
    });
  });
}

转载于:https://www.cnblogs.com/M-M-Monica/p/10080010.html