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 后面。

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

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

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

配置选项需要传入一个对象，下面是配置选项说明：

注意！请求头，也就是 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 无刷新上传文件