Vue.js的AJAX

作者: Arvin Chen 分类: vue 来源: Break易站(www.breakyizhan.com)

Vue.js中,Vue 要实现异步加载需要使用到 vue-resource 库, 如下:

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

我们可以通过Vue.js的AJAX的get和post请求来了解。

Vue.js的AJAX的get请求

以下是一个简单的 Get 请求实例,请求地址是一个简单的 txt 文本:

     提示:可以修改代码后运行

Vue.js的AJAX的post请求

post 发送数据到后端,需要第三个参数 {emulateJSON:true}

emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。

     提示:可以修改代码后运行

Vue.js的AJAX的语法&API

你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。

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

vue-resource 提供了 7 种请求 API(REST 风格):

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

除了 jsonp 以外,另外 6 种的 API 名称是标准的 HTTP 方法。

options 参数说明:

参数 类型 描述
url string 请求的目标URL
body ObjectFormDatastring 作为请求体发送的数据
headers Object 作为请求头部发送的头部对象
params Object 作为URL参数的参数对象
method string HTTP方法 (例如GET,POST,...)
timeout number 请求超时(单位:毫秒) (0表示永不超时)
before function(request) 在请求发送之前修改请求的回调函数
progress function(event) 用于处理上传进度的回调函数 ProgressEvent
credentials boolean 是否需要出示用于跨站点请求的凭据
emulateHTTP boolean 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT,PATCH和DELETE请求。
emulateJSON boolean 设置请求体的类型为application/x-www-form-urlencoded

通过如下属性和方法处理一个请求获取到的响应对象:

属性 类型 描述
url string 响应的URL源
body ObjectBlobstring 响应体数据
headers Header 请求头部对象
ok boolean 当HTTP响应码为200到299之间的数值时该值为true
status number HTTP响应吗
statusText string HTTP响应状态
方法 类型 描述
text() 约定值 以字符串方式返回响应体
json() 约定值 以格式化后的json对象方式返回响应体
blob() 约定值 以二进制Blob对象方式返回响应体
  •   本文标题:Vue.js的AJAX - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6711.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注