vue-resource基础介绍

1.vue-resource 的请求api是按照rest风格设计的，它提供了7种请求api

• get(url, [data], [options]); 

• head(url,[data],[options]);

• post(url, [data], [options]);

• put(url, [data], [options]);

• patch(url, [data], [options]);

• delete(url, [data], [options]);

• jsonp(url, [data], [options]);

都是接受三个参数：

• url（字符串），请求地址。可被options对象中url属性覆盖。

• data（可选，字符串或对象），要发送的数据，可被options对象中的data属性覆盖。

• options对象

  参数	类型	描述
  url	string	请求的URL
  method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
  body	Object, FormData string	request body
  params	Object	请求的URL参数对象 ，get
  headers	Object	request header 第三方请求数据需要用到
  timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
  before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
  progress	function(event)	ProgressEvent回调处理函数
  credentials	boolean	表示跨域请求时是否需要使用凭证
  emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
  emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

• emulateHTTP的作用

  如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。
  Vue.http.options.emulateHTTP = true;

• emulateJSON的作用

  如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。
  Vue.http.options.emulateJSON = true;

 2.如何使用vue-resource

• 安装vue-resource

npm i vue-resource --save -dev

--save 是安装到开发依赖中去

dependencies是项目的依赖，是项目上线后仍然要用的插件
devDependencies是开发的依赖，是在开发过程中要使用的

• 要引用插件

<script src="node_modules/vue-resouce/dist/vue-resource.min.js"></script>

• 调用get方法：

<div id="app">
  <a href="javascript:;" v-on:click="ready">get 请求</a>
 </div>
<script>
new vue({
el:"app:,
methods:{
ready: function() {
        // get 请求
        this.$http.get(this.apiUrl,{
         params:{ //填写传输的参数
        
         usersId:"101"
       }
      }) .then(res=> {
                // 请求成功回调

            },err => {
                // 请求失败回调

            });
    }
}
})
</script>

• 调用post方法

post:function(){
     this.$http.post(url,{usrid:'105"},{header:{acction:"sss"}).then(res=>{
   //成功回掉
})
}

• 调用jsonp跨域请求

jsonp: function() {
  this.$http.jsonp(this.apiUrl).then(function(response){
    this.$set('gridData', response.data)
  })
}

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：
1、使用Vue.http或this.$http
2、使用Vue.resource或this.$resource

转载于:https://www.cnblogs.com/yu-hailong/p/8458174.html