vue-resource使用笔记

Posted 2020-10-22 前端攻城录

基本语法

//基于全局Vue对象使用http
Vue.http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback);
Vue.http.post(‘/someUrl‘, [body], [options]).then(successCallback, errorCallback);
 
//在一个Vue实例内使用$http
this.$http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback);
this.$http.post(‘/someUrl‘, [body], [options]).then(successCallback, errorCallback);

 

7种请求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])

 

options对象

参数	类型	描述
url	string	请求的 URL
method	string	请求的 HTTP 方法，例如：‘GET‘，‘POST‘ 或其他 HTTP 方法
body	Object, FormData string	request body
params	Object	请求的 URL 参数对象
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 以 content-type 为 application/x-www-form-urlencoded 的方式发送

 

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;

 

response 对象

方法	类型	描述
text()	string	以 string 形式返回 response body
json()	Object	以 JSON 对象形式返回 response body
blob()	Blob	以二进制形式返回 response body
属性	类型	描述
ok	boolean	响应的 HTTP 状态码在 200~299 之间时，该属性为 true
status	number	响应的 HTTP 状态码
statusText	string	响应的状态文本
headers	Object	响应头

 

全局配置

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

Vue.http.interceptors.push(function (request, next) {
    // ...
    // 请求发送前的处理逻辑
    // ...
  next(function (response) {
    // ...
    // 请求发送后的处理逻辑
    // ...
    // 根据请求的状态，response 参数会返回给 successCallback 或 errorCallback
    return response;
  });
});

上面的配置会对所有请求生效