vue-resource使用笔记

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

基本语法

//基于全局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

表示跨域请求时是否需要使用凭证（可用于解决 cors 跨域请求没带上 Cookie 的问题）

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;
  });
});

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

 

 

以上是 vue-resource使用笔记 的全部内容， 来源链接： utcz.com/z/379808.html

回到顶部