Vue.js 中 常用方法详解·是一个基于·导入 jQuery在 Vue 组件中导入 jQuery

作者：编程小白 | 发布时间：2025-06-20 |

Vue.js 中 AJAX 请求的常用方法详解

一、使用 Axios 库

Axios 是一个基于 Promise 的 HTTP 库，适用于浏览器和 Node.js，是 Vue.js 项目中非常受欢迎的 HTTP 库之一。

1. 安装 Axios

在命令行中运行以下命令来安装 Axios：

npm install axios

2. 在 Vue 组件中使用 Axios

在 Vue 组件中导入 Axios，并定义一个方法来发起请求。

import axios from 'axios'; export default { methods: { fetchData() { axios.get('https://api.example.com/data') .then(response => { this.data = response.data; }) .catch(error => { console.error('There was an error!', error); }); } } }

3. 详细解释

安装 Axios：使用 npm 安装 Axios 库。

导入 Axios：在 Vue 组件中导入 Axios。

定义方法：在组件的方法中定义一个 fetchData 方法，用于发起 GET 请求。

处理响应：使用 .then 方法处理成功响应，将数据保存到组件的 data 中；使用 .catch 方法处理错误响应。

二、使用 Fetch API

Fetch API 是现代浏览器中内置的用于发起网络请求的接口，基于 Promise，可以替代传统的 XMLHttpRequest。

1. 在 Vue 组件中使用 Fetch API

在 Vue 组件的方法中使用 fetch 函数发起 GET 请求。

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { this.data = data; }) .catch(error => { console.error('There was an error!', error); });

三、使用 Vue Resource 插件

Vue Resource 是 Vue.js 官方提供的插件，用于处理 HTTP 请求，但在 Vue 2.0 之后不再推荐使用。

1. 安装 Vue Resource

在命令行中运行以下命令来安装 Vue Resource：

npm install vue-resource

2. 在 Vue 项目中使用 Vue Resource

在 Vue 项目中全局引入并使用 Vue Resource 插件。

import VueResource from 'vue-resource'; Vue.use(VueResource); export default { created() { this.$http.get('https://api.example.com/data') .then(response => { this.data = response.data; }) .catch(error => { console.error('There was an error!', error); }); } }

3. 详细解释

安装 Vue Resource：使用 npm 安装 Vue Resource 插件。

使用 Vue Resource：在 Vue 项目中全局引入并使用 Vue Resource 插件。

发起请求：在组件的方法中使用 this.$http.get 发起 GET 请求，并处理响应和错误。

四、使用 jQuery

虽然 jQuery 不再是现代前端开发的首选，但仍然可以在 Vue.js 项目中使用 jQuery 发起 AJAX 请求。

1. 安装 jQuery

在命令行中运行以下命令来安装 jQuery：

npm install jquery

2. 在 Vue 组件中使用 jQuery

在 Vue 组件中导入 jQuery，并使用 $.ajax 发起 GET 请求。

import $ from 'jquery'; export default { methods: { fetchData() { $.ajax({ url: 'https://api.example.com/data', type: 'GET', success: function(data) { this.data = data; }.bind(this), error: function(error) { console.error('There was an error!', error); } }); } } }

3. 详细解释

安装 jQuery：使用 npm 安装 jQuery。

导入 jQuery：在 Vue 组件中导入 jQuery。

发起请求：在组件的方法中使用 $.ajax 发起 GET 请求，并处理成功和错误响应。

五、

方法 推荐程度 适用场景
Axios 推荐 功能强大，社区支持广泛
Fetch API 熟悉 现代浏览器内置，适合简单请求
Vue Resource 不推荐 Vue 2.0 之后不再推荐使用
jQuery 特定需求 现代前端开发首选，但可用于特定需求

建议