Vue.js Ajax(vue-resource)（实战总结）

Vue.js Ajax(vue-resource) 入门与实战指南

在现代前端开发中，数据交互是应用的核心。Vue.js 作为一款渐进式框架，虽然本身不提供 HTTP 请求功能，但通过插件机制可以轻松集成各类网络请求工具。其中，vue-resource 是早期 Vue 项目中广泛使用的 Ajax 库，虽然在 Vue 3 中已逐渐被原生 Fetch 或 Axios 取代，但对于学习 Vue 2 项目、理解前后端通信机制仍有重要价值。

本文将带你系统掌握 Vue.js Ajax(vue-resource) 的使用方法，从环境搭建到实战案例，循序渐进，帮助你真正理解“如何让页面与服务器对话”。

安装与配置 vue-resource

在开始之前，我们需要先将 vue-resource 添加到项目中。它是一个轻量级的 HTTP 客户端，专为 Vue.js 设计，支持 GET、POST、PUT、DELETE 等常见请求方法。

打开终端，执行以下命令：

npm install vue-resource --save

这会将 vue-resource 安装为项目依赖。安装完成后，需要在主入口文件（通常是 main.js）中注册插件。

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'

// 注册 vue-resource 插件
Vue.use(VueResource)

new Vue({
  render: h => h(App),
}).$mount('#app')

💡 小贴士：Vue.use() 是 Vue 的插件注册机制。通过它，vue-resource 会被注入到每个 Vue 实例中，你就可以在组件中使用 $http 对象发起请求了。

使用 $http 发起 GET 请求

GET 请求是最常见的数据获取方式，比如加载用户列表、文章内容等。我们来实现一个简单的“获取用户列表”功能。

// UserList.vue
<template>
  <div>
    <h2>用户列表</h2>
    <!-- 显示加载状态 -->
    <p v-if="loading">正在加载...</p>
    <!-- 显示错误信息 -->
    <p v-else-if="error" style="color: red">{{ error }}</p>
    <!-- 显示用户数据 -->
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],        // 存储用户数据
      loading: true,    // 是否正在加载
      error: null       // 错误信息
    }
  },
  // 组件创建完成后自动调用
  created() {
    // 使用 $http 发起 GET 请求
    this.$http.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        // 请求成功，response.body 包含服务器返回的数据
        this.users = response.body
      })
      .catch(error => {
        // 请求失败，捕获错误
        this.error = '获取用户失败：' + error.message
      })
      .finally(() => {
        // 无论成功或失败，都设置 loading 为 false
        this.loading = false
      })
  }
}
</script>

✅ 关键点解析：

this.$http.get() 是发起 GET 请求的核心方法。

.then() 处理成功响应，response.body 是实际返回的数据。

.catch() 捕获网络错误或服务器返回的 4xx/5xx 错误。

.finally() 确保 loading 状态被正确关闭，避免界面卡住。

POST 请求：提交表单数据

当用户填写表单并提交时，通常需要使用 POST 请求将数据发送到服务器。我们来实现一个“添加新用户”的功能。

// AddUser.vue
<template>
  <div>
    <h2>添加新用户</h2>
    <form @submit.prevent="submitForm">
      <div>
        <label>姓名：</label>
        <input v-model="formData.name" type="text" placeholder="请输入姓名" required />
      </div>
      <div>
        <label>邮箱：</label>
        <input v-model="formData.email" type="email" placeholder="请输入邮箱" required />
      </div>
      <button type="submit">提交</button>
    </form>

    <!-- 显示提交结果 -->
    <p v-if="submitMessage" style="color: green">{{ submitMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      submitMessage: '' // 提交成功提示
    }
  },
  methods: {
    submitForm() {
      // 使用 $http.post 发起 POST 请求
      this.$http.post('https://jsonplaceholder.typicode.com/users', this.formData)
        .then(response => {
          // 服务器返回成功，response.body 包含新创建的用户数据
          this.submitMessage = `用户 ${response.body.name} 添加成功！ID: ${response.body.id}`
          // 重置表单
          this.formData = { name: '', email: '' }
        })
        .catch(error => {
          // 处理错误，如网络问题或数据格式不合法
          this.submitMessage = '提交失败：' + (error.body?.message || error.message)
        })
    }
  }
}
</script>

📌 重要说明：

@submit.prevent 是 Vue 的事件修饰符，阻止表单默认提交行为。

this.$http.post(url, data) 将 data 作为请求体发送。

服务器返回的 response.body 通常包含新资源的完整信息，可用于后续展示。

高级用法：请求拦截与响应拦截

在真实项目中，我们常常需要对请求和响应做统一处理，比如添加认证头、统一错误提示、自动处理 token 过期等。

vue-resource 支持请求和响应拦截器，让我们可以在请求发出前或返回后做预处理。

// 在 main.js 中配置拦截器
Vue.http.interceptors.push((request, next) => {
  // 请求拦截：在发送前添加 token
  const token = localStorage.getItem('auth_token')
  if (token) {
    request.headers.set('Authorization', `Bearer ${token}`)
  }

  // 打印请求信息（调试用）
  console.log('请求地址:', request.url)
  console.log('请求方法:', request.method)

  // 必须调用 next()，否则请求不会继续
  next((response) => {
    // 响应拦截：统一处理错误码
    if (response.status === 401) {
      alert('登录已过期，请重新登录')
      // 可以跳转到登录页
      window.location.href = '/login'
    }
    if (response.status === 403) {
      alert('权限不足，无法访问该资源')
    }

    // 可以在这里修改 response 数据
    // response.body = { ...response.body, timestamp: Date.now() }

    return response
  })
})

🔍 形象比喻：拦截器就像“安检通道”。请求是旅客，拦截器是安检员。在旅客进入前检查身份证（token），在旅客离开后检查行李是否违规（错误码）。

实战案例：动态加载博客文章

我们来做一个完整的例子：从模拟 API 获取博客文章列表，并支持分页。

// BlogList.vue
<template>
  <div>
    <h2>博客文章</h2>
    <button @click="loadMore" :disabled="loading">
      {{ loading ? '加载中...' : '加载更多' }}
    </button>

    <ul>
      <li v-for="article in articles" :key="article.id">
        <h3>{{ article.title }}</h3>
        <p>{{ article.body }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [],
      page: 1,
      loading: false
    }
  },
  methods: {
    loadMore() {
      if (this.loading) return

      this.loading = true

      // 请求第 page 页的数据
      this.$http.get(`https://jsonplaceholder.typicode.com/posts?_page=${this.page}&_limit=5`)
        .then(response => {
          // 将新数据合并到现有列表
          this.articles = this.articles.concat(response.body)
          this.page++
        })
        .catch(error => {
          alert('加载失败：' + error.message)
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  // 组件创建时加载第一页
  created() {
    this.loadMore()
  }
}
</script>

✅ 设计亮点：

使用分页参数 _page 和 _limit 控制数据量。

通过 concat() 合并新数据，避免覆盖旧数据。

添加 loading 状态防止重复点击。

总结与建议

Vue.js Ajax(vue-resource) 虽然已不再是新项目的首选，但它依然是理解 Vue 2 项目中数据通信机制的绝佳起点。它语法简洁，学习成本低，非常适合初学者入门。

通过本文，你已经掌握了：

如何安装并配置 vue-resource
如何使用 GET、POST 发送请求
如何使用拦截器统一处理请求与响应
如何在真实场景中实现数据加载与表单提交

📌 最后提醒：如果你正在使用 Vue 3，建议改用 axios 或原生 fetch。它们支持更现代的语法（如 async/await），生态更丰富，且与 Vue 3 的 Composition API 更契合。

但无论技术如何演进，理解“请求-响应”这一核心模式，永远是前端开发的基石。愿你在 Vue.js 的世界中，越来越得心应手。