Vue-resource发送网络请求

step1.下载

下载地址

https://github.com/pagekit/vue-resource

语法和属性

语法

全局使用写法

Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

Vue局部使用写法

this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

支持的方法种类

名称
get(url),[config])
head(url),[config])
delete(url),[config])
jsoup(url),[config])
post(url),[body],[config])
put(url),[body],[config])
patch(url),[body],[config])

config配置表

参数	数据类型	作用
url	string	请求发送到的URL
body	object,string,formdata	作为请求主体发送的数据
headers	object	要作为HTTP请求标头发送的Headers对象
param	object	要作为URL参数发送的Parameters对象
mehtod	string	HTTP 方法(e.g. GET, POST, …)
responseType	string	响应正文的类型（例如text、blob、json等）
timeout	number	请求超时（毫秒）（0表示无超时）
credentials	boolean	指示是否应使用凭据发出跨站点访问控制请求
emulateHTTP	boolean	使用httppost发送PUT、PATCH和DELETE请求，并设置X-HTTP-Method-Override头
emulateJSON	boolean	以application/x-www-form-urlencoded内容类型发送请求正文
before	function(request)	回调函数，用于在发送请求对象之前对其进行修改
uploadProgress	function(event)	用于处理上载的ProgressEvent的回调函数
downloadProgress	function(event)	用于处理下载的ProgressEvent的回调函数

response属性方法表

属性名	类型	描述
url	string	响应URL来源
body	Object, Blob, string	响应主体
headers	object	响应头对象
ok	boolean	HTTP状态代码介于200和299之间
status	number	响应的HTTP状态代码
statusText	string	响应的HTTP状态文本
text()	promise	将正文解析为字符串
json()	promise	将正文解析为解析的JSON对象
blob()	promise	将实体解析为Blob对象

发送get请求

发送post请求

注意:发生post请求是，一定要带上emulate，否则会因为网络拦截问题出现错误

全局配置数据接口的域名

语法

如果我们通过全局配置了，请求的数据接口根域名，则，在每次单独发起http请求的时候，请求的uzl路径，应该以相对路径开头，前面不能带/，否则不会启用根路径做拼接"

全局配置

Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

局部配置

new Vue({

  http: {
    root: '/root',
    headers: {
      Authorization: 'Basic YXBpOnBhc3N3b3Jk'
    }
  }

})

实例：

全局统一配置 emulateJSON与emulateHTTP属性

语法

全局配置

Vue.http.options.emulateJSON = true;
Vue.http.options.emulateHTTP = true;

局部配置

new Vue({
	http:{
		root:'http://localhost',
		emulateJSON:true,
		emulateHTTP:true
	}
})