Vue 使用 vue-resource 发送 AJAX 请求
vue-resource 是一个用来发送 XMLHttpRequest 请求的 Vue 插件,它的功能和 jQuery 中的 $.ajax
差不多。有了 vue-resource,简单的 AJAX 请求就不需要手动封装了。
安装
这里使用 npm 安装,在项目目录中输入:
npm install vue-resource --save-dev
如果 npm 速度慢的话,也可以使用 cnpm。
使用
首先需要在 main.js
中引入 vue-resource:
import VueResource from 'vue-resource' // 引入 vue-resource
Vue.use(VueResource) // 挂载插件
引入并挂载后全局都能使用。
下面使用 get 方式请求 data.json
文件:
this.$http.get('data.json').then(data => {
console.log(data) // 在控制台输出结果
this.contents = data.body // 把请求到的数据传给 contents
}, error => {
console.log(error) // 如果出错就在控制台输出错误信息
})
.get
方法有两个参数,第一个参数是 url,第二个参数是配置选项。
如果需要获取响应内容可以调用 then
方法,then
方法可以接收两个回调函数。
第一个回调函数会在请求成功后触发,可以用来接收数据。
第二个回调函数会在请求出错时触发,可以用来接收错误信息。
要发送的数据可以写在 url 后面。
无论请求成功还是失败都会返回一个对象,下面是返回值说明:
返回值 | 类型 | 说明 |
---|---|---|
url | string | 请求的 url |
body | Object or Blob or string | 后端返回的内容 |
headers | Header | 响应标头 |
ok | boolean | 状态码在 200 - 299 为 true |
status | number | HTTP 状态码 |
statusText | string | HTTP 状态文本 |
请求成功和请求失败都会返回同样的对象。
下面使用 post 方式给 https://www.misterma.com/test.php
发送请求:
this.$http.post('https://www.misterma.com/test.php', 'data=hello', {
headers: {
'Content-type': 'application/x-www-form-urlencoded'
}
}).then(data => {
console.log(data.body) // 在控制台输出后端返回的内容
}, error => {
console.log(error) // 如果出错就在控制台输出错误信息
})
.post
的第一个参数是 url,第二个参数是要发送的数据,第三个参数是配置选项。
.post
要获取响应内容还是调用 then
方法,参数和返回内容和上面的 .get
是一样的。
除了 .get
和 .post
外,vue-resource 还提供了以下几种快捷方法:
delete(url, config)
jsonp(url, config)
head(url, config)
put(url, body, config)
patch(url, body, config)
参数中的 url
就是要请求的 url,body
就是要发送的内容,config
就是配置选项。
配置选项需要传入一个对象,下面是配置选项说明:
参数 | 类型 | 说明 |
---|---|---|
url | string | 要请求的 url |
body | Object or FormData or string | 要发送的数据 |
headers | Object | HTTP 请求头 |
params | Object | Parameters object to be sent as URL parameters |
method | string | 请求方式(get 或 post) |
responseType | string | 接收响应的类型(json 或 blob 或 text) |
timeout | number | 请求超时,单位为毫秒 |
credentials | boolean | 是否应使用凭据发出跨站点访问控制请求 |
emulateHTTP | boolean | 设置 X-HTTP-Method-Override 请求头 |
emulateJSON | boolean | 对发送的数据进行 url 编码 |
before | function(request) | 在发送请求之前执行的回调函数 |
uploadProgress | function(event) | 上传进度改变时执行的回调函数 |
downloadProgress | function(event) | 下载进度改变时执行的回调函数 |
注意!请求头,也就是 headers
参数是需要手动设置的,否则在发送 POST 请求的时候可能会报错。
除了在 $http
中调用外也可以直接在 Vue 全局对象中调用 http
。
下面直接调用 Vue.http
发送 post 请求:
let submit = 'data=123' // 要发送的数据
Vue.http({
url: 'https://www.misterma.com/text.php',
body: submit,
headers: {
'Content-type': 'application/x-www-form-urlencoded'
},
method: 'post',
timeout: 20000
}).then(data => {
this.contents = data.body // 把接收到的数据传给 content
}, error => {
alert('出错了!错误代码:' + error.status) // 显示错误码
})
注意!上传文件和普通 post 请求的 HTTP 请求头是不一样的。
相关文章:
- Vue Router 的简单使用
- Vue 条件渲染 v-if 和 条件展示 v-show
- Vue 生命周期和钩子函数
- Vue CLI 的简单使用
- AJAX 简单使用教程
- 使用AJAX + FormData 无刷新上传文件
版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权。
本文地址:https://www.misterma.com/archives/828/
如果对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。