Vue 与后端通讯的技术介绍-在项目里运行-Vue如何使用 Axios 与后端通讯

作者：机器人技术佬 | 发布时间：2025-07-07 |

Vue 与后端通讯的技术介绍

一、Axios

Axios 是一个基于 Promise 的 HTTP 库，适用于浏览器和 Node.js。它操作简单，能让与后端的交互变得轻松。

安装 Axios：在项目里运行 npm install axios。

在 Vue 项目中引入 Axios：在 main.js 中引入并使用：

import axios from 'axios';



Vue.prototype.$http = axios;

进行 GET 请求：

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

  console.log(response.data);

});

进行 POST 请求：

this.$http.post('/api/data', {

  key: 'value'

}).then(response => {

  console.log(response.data);

});

Axios 优点：

易用性：操作简单直观。
跨浏览器兼容性：在不同浏览器中表现一致。
丰富功能：支持请求和响应拦截器、取消请求等。

二、Fetch API

Fetch API 是现代浏览器内置的 API，用于进行 HTTP 请求。它比 XMLHttpRequest 更现代、简洁。

进行 GET 请求：

fetch('/api/data')

  .then(response => response.json())

  .then(data => console.log(data));

进行 POST 请求：

fetch('/api/data', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json',

  },

  body: JSON.stringify({ key: 'value' }),

})

.then(response => response.json())

.then(data => console.log(data));

Fetch API 优点：

现代化设计：提供了更灵活和强大的功能。
内置支持：现代浏览器原生支持。
更灵活的配置：支持更多的请求配置选项。

三、GraphQL

GraphQL 是一种 API 查询语言，由 Facebook 开发。它允许客户端指定所需数据结构，减少数据传输。

安装 Apollo Client（GraphQL 客户端）：在项目里运行 npm install @apollo/client。

在 Vue 项目中引入 Apollo Client：在 main.js 中引入并使用：

import { ApolloClient, InMemoryCache } from '@apollo/client';



const client = new ApolloClient({

  uri: '',

  cache: new InMemoryCache(),

});



Vue.prototype.$apollo = client;

进行查询（Query）请求：

const { data } = await this.$apollo.query({

  query: gql`

    query GetData {

      data {

        key

      }

    }

  `,

});

console.log(data.data.key);

进行变更（Mutation）请求：

const { data } = await this.$apollo.mutate({

  mutation: gql`

    mutation UpdateData($key: String!) {

      updateData(key: $key) {

        key

      }

    }

  `,

  variables: {

    key: 'newValue',

  },

});

console.log(data.data.updateData.key);

GraphQL 优点：

精确数据获取：客户端可以指定所需数据，减少数据传输。
单一端点：所有请求通过一个端点进行，简化 API 管理。
强类型系统：提供明确的类型定义，减少错误和不一致性。

四、对比与选择

特性	Axios	Fetch API	GraphQL
易用性	高	中	中
灵活性	高	高	高
跨浏览器支持	高	高	高
数据获取	基于 REST，需多次请求	基于 REST，需多次请求	单一请求获取所需数据
安装依赖	需要	不需要	需要
流行程度	高	高	增加中

根据具体需求和项目特点选择适合的技术。

Axios：易用、功能丰富的 HTTP 库。
Fetch API：现代、简洁的浏览器内置 API。
GraphQL：精确、高效的 API 查询语言。

确保所选技术与项目需求和团队技术栈兼容，定期更新和维护以保证系统稳定性和安全性。

Vue 与后端通讯的技术介绍-在项目里运行-Vue如何使用 Axios 与后端通讯