Vue.js 使用 vue-resource 发送 GET 和 POST 请求

Vue.js 是一个流行的前端框架，它提供了许多有用的功能，例如双向数据绑定、组件化和模块化。在 Vue.js 中，我们可以使用 vue-resource 插件来发送 GET 和 POST 请求。

安装 vue-resource

首先，我们需要安装 vue-resource。可以使用 npm 或 yarn 进行安装：

# 使用 npm 安装
npm install vue-resource --save

# 使用 yarn 安装
yarn add vue-resource

发送 GET 请求

接下来，我们可以使用 vue-resource 发送 GET 请求。在 Vue.js 中，我们可以通过在组件中使用 this.$http.get() 方法来发送 GET 请求。例如，我们可以在 created 钩子函数中发送 GET 请求：

// javascriptcn.com 代码示例
export default {
  created() {
    this.$http.get('/api/data').then(response => {
      console.log(response.body);
    }, error => {
      console.log(error);
    });
  }
}

在这个例子中，我们发送了一个 GET 请求到 /api/data 地址，并在控制台输出返回的数据。如果请求失败，我们也会在控制台输出错误信息。

发送 POST 请求

除了发送 GET 请求，我们还可以使用 vue-resource 发送 POST 请求。在 Vue.js 中，我们可以通过在组件中使用 this.$http.post() 方法来发送 POST 请求。例如，我们可以在点击事件中发送 POST 请求：

// javascriptcn.com 代码示例
export default {
  methods: {
    handleSubmit() {
      const data = {
        name: 'John Doe',
        email: 'john.doe@example.com'
      };
      this.$http.post('/api/data', data).then(response => {
        console.log(response.body);
      }, error => {
        console.log(error);
      });
    }
  }
}

在这个例子中，我们创建了一个对象 data，它包含了名字和电子邮件地址。然后，我们使用 this.$http.post() 方法将数据发送到 /api/data 地址，并在控制台输出返回的数据。如果请求失败，我们也会在控制台输出错误信息。

总结

在本文中，我们学习了如何使用 vue-resource 插件发送 GET 和 POST 请求。通过使用这些技术，我们可以轻松地与后端服务器进行通信，并获得所需的数据。希望本文对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65743e64d2f5e1655dd85bc8