Vue.js 中如何使用 VueResource 发送 HTTP 请求-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 是一个轻量级但功能强大的前端框架，能够让开发者更方便地创建复杂的 Web 应用程序。而 VueResource 可以让我们更加方便地实现前后端数据交互。在本文中，我们将详细介绍 VueResource 的使用方法，包括如何发送 HTTP 请求、如何处理响应等。

安装 VueResource

首先，我们需要在项目中引入 VueResource。可以使用 npm 安装：

npm install vue-resource --save

也可以直接在页面中引入：

<script src="https://unpkg.com/vue-resource@1.5.1"></script>

如果你是用 Vue.js 的单文件组件，则可以在该文件的 script 标签中引入：

import VueResource from 'vue-resource'
Vue.use(VueResource)

接下来，我们就可以使用 VueResource 发送 HTTP 请求了。VueResource 提供了一个 Vue 实例方法 $http，我们可以在 Vue 实例中使用该方法来发送请求。以下是一个基本的 GET 请求示例：

this.$http.get('/api/data').then(response => {
  console.log(response.body)
})

在上面的示例中，我们通过 $http.get 方法发送了一个 GET 请求，并在返回的 Promise 对象上使用 then 方法来处理响应。响应对象包括以下属性：

我们也可以发送 POST、PUT、DELETE 等请求。以下是一个 POST 请求示例：

const data = {
  name: 'John',
  age: 30
}
this.$http.post('/api/data', data).then(response => {
  console.log(response.body)
})

上面的示例中，我们将数据作为第二个参数传递给 $http.post 方法。

我们可以在请求成功后，在 then 方法中处理响应。我们也可以在 catch 方法中处理请求失败的情况。以下是一个处理错误的示例：

this.$http.get('/api/data').then(response => {
  console.log(response.body)
}, error => {
  console.log(error)
})

在上面的示例中，我们在 then 方法中处理正常情况，而在 catch 方法中处理错误情况。错误对象包括以下属性：

通过全局配置可以对所有的请求和响应进行预处理。比如，我们可以设置全局的请求头、URL 前缀等。以下是一个全局配置的示例：

Vue.http.options.root = '/api'
Vue.http.headers.common['Authorization'] = 'Bearer ' + getToken()

在上面的示例中，我们通过 Vue.http.options.root 设置了全局 URL 前缀，而通过 Vue.http.headers.common 设置了全局请求头。

除了全局配置，我们也可以在每个请求中进行自定义配置。以下是一个自定义配置的示例：

this.$http.get('/api/data', {
  headers: {
    Authorization: 'Bearer ' + getToken()
  }
}).then(response => {
  console.log(response.body)
})

在上面的示例中，我们通过第二个参数传递了一个配置对象，包括了自定义的请求头。

在本文中，我们详细介绍了如何在 Vue.js 中使用 VueResource 发送 HTTP 请求。包括如何安装 VueResource、如何发送请求、如何处理响应以及如何配置请求，希望本文对您有帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6482f43648841e9894251f5e