详解Vue.js 响应接口

Vue.js是一款前端框架，其数据响应机制是其核心特点之一。接口调用不可避免地涉及到数据响应，合理利用Vue.js的数据响应机制可以让我们更加方便地完成接口调用。

1.通过vue-resource获取数据

安装vue-resource

Vue.js提供了vue-resource插件用来进行HTTP请求，安装vue-resource可以通过npm包管理工具进行安装:

npm i vue-resource -S

在Vue框架中使用vue-resource

在使用vue-resource之前，需要在Vue框架中引用：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

这样就可以在Vue实例中使用VueResource了。下面我们来看一个获取数据的示例：

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

其中/api/getUser是后端接口的地址。代码使用get方式请求，如果请求成功，则response包含后端返回的数据，这里我们仅仅是将数据打印在控制台上。

2.利用Vue.js的数据响应机制实现表单验证

利用Vue.js的数据响应机制可以大大简化表单验证的操作。下面我们来演示一下如何利用Vue.js的数据响应机制进行表单验证。

<template>
  <div>
    <form>
      <input type="text" v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (!this.username) {
        alert('请输入用户名')
        return
      }
      if (!this.password) {
        alert('请输入密码')
        return
      }
      // 发送登录请求
    }
  }
}
</script>

上面的代码实现了一个简单的登录表单，当用户名或者密码为空的时候，会弹出提示框提示用户输入。

当表单中的数据发生改变的时候，Vue.js会自动更新UI界面，这样我们就可以实时检测表单中的数据是否合法。审核通过后，就可以发送后端请求了。