vue ajax获取返回header,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 后面。

无论请求成功还是失败都会返回一个对象，下面是返回值说明：返回值类型说明urlstring请求的 url

bodyObject or Blob or string后端返回的内容

headersHeader响应标头

okboolean状态码在 200 - 299 为 true

statusnumberHTTP 状态码

statusTextstringHTTP 状态文本

请求成功和请求失败都会返回同样的对象。

下面使用 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 就是配置选项。

配置选项需要传入一个对象，下面是配置选项说明：参数类型说明urlstring要请求的 url

bodyObject or FormData or string要发送的数据

headersObjectHTTP 请求头

paramsObjectParameters object to be sent as URL parameters

methodstring请求方式(get 或 post)

responseTypestring接收响应的类型(json 或 blob 或 text)

timeoutnumber请求超时，单位为毫秒

credentialsboolean是否应使用凭据发出跨站点访问控制请求

emulateHTTPboolean设置 X-HTTP-Method-Override 请求头

emulateJSONboolean对发送的数据进行 url 编码

beforefunction(request)在发送请求之前执行的回调函数

uploadProgressfunction(event)上传进度改变时执行的回调函数

downloadProgressfunction(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 请求头是不一样的。

相关文章：

版权声明：本文为原创文章，版权归 Mr. Ma's Blog 所有，转载请联系博主获得授权。

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。