前端使用 RESTful API 和 GraphQL
前端使用 RESTful API 和 GraphQL 的详细安装与使用步骤，涵盖环境搭建、核心库安装和基础代码示例。
一、RESTful API 的使用
RESTful API 是传统的前后端通信方式，使用 HTTP 方法（GET/POST/PUT/DELETE）操作资源。
- 安装 Axios（推荐库）
Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js。
npm install axios
# 或
yarn add axios
- 发送 RESTful 请求
示例 1：GET 请求
import axios from 'axios';// 获取数据
axios.get('https://api.example.com/posts').then(response => {console.log('GET 响应数据:', response.data);}).catch(error => {console.error('GET 请求失败:', error);});// 带参数的 GET 请求
axios.get('https://api.example.com/posts', {params: {userId: 1,_limit: 5}
});
示例 2：POST 请求
javascript// 提交数据
axios.post('https://api.example.com/posts', {title: '新文章',body: '内容',userId: 1
}).then(response => {console.log('POST 响应数据:', response.data);});
示例 3：全局配置
javascript
// 设置全局基础 URL 和超时时间
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;// 添加请求拦截器（如添加 Token）
axios.interceptors.request.use(config => {config.headers.Authorization = 'Bearer your_token';return config;
});
二、GraphQL 的使用
GraphQL 是一种查询语言，允许客户端精确指定需要的数据，减少冗余请求。
- 安装 Apollo Client（推荐库）
Apollo Client 是主流的 GraphQL 客户端，支持 React/Vue/Angular。
bash
npm install @apollo/client graphql
# 或
yarn add @apollo/client graphql
- 初始化 Apollo Client
javascript
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';// 创建客户端实例
const client = new ApolloClient({uri: 'https://api.example.com/graphql', // GraphQL 服务端地址cache: new InMemoryCache(),headers: {Authorization: 'Bearer your_token' // 可选认证头}
});
- 发送 GraphQL 请求
示例 1：查询（Query）
javascript
// 定义查询语句
const GET_POSTS = gql`query GetPosts {posts {idtitlebodyuser {name}}}
`;// 执行查询
client.query({query: GET_POSTS
}).then(result => {console.log('GraphQL 查询结果:', result.data.posts);});
示例 2：变更（Mutation）
javascript
// 定义变更语句
const CREATE_POST = gql`mutation CreatePost($title: String!, $body: String!) {createPost(title: $title, body: $body) {idtitle}}
`;// 执行变更
client.mutate({mutation: CREATE_POST,variables: {title: '新文章',body: '内容'}
}).then(result => {console.log('创建的文章:', result.data.createPost);});
- 在 React 中使用（结合 Hooks）
javascript
import { useQuery, useMutation } from '@apollo/client';function PostList() {const { loading, error, data } = useQuery(GET_POSTS);const [createPost] = useMutation(CREATE_POST, {onCompleted: (data) => {console.log('Mutation 完成:', data);}});if (loading) return <p>加载中...</p>;if (error) return <p>错误: {error.message}</p>;return (<div>{data.posts.map(post => (<div key={post.id}>{post.title}</div>))}<button onClick={() => createPost({ variables: { title: '新标题', body: '新内容' })}>创建文章</button></div>);
}
三、对比与选择建议
特性 RESTful API GraphQL
数据获取 多个端点，多次请求 单端点，一次请求获取所需数据
灵活性 后端定义响应格式 客户端自定义查询结构
适用场景 简单数据模型，标准化操作 复杂数据需求，减少冗余请求
缓存机制 依赖 HTTP 缓存 内置客户端缓存（如 Apollo Client）
学习成本 低 中高（需学习 GraphQL 语法和工具链）
四、注意事项
跨域问题：确保后端配置 CORS（如 Access-Control-Allow-Origin）。
错误处理：统一处理 HTTP 状态码和 GraphQL 错误。
安全性：敏感操作（如 Mutation）需添加认证（JWT/OAuth）。
性能优化：RESTful 使用分页，GraphQL 使用分页指令（如 first, after）。
通过上述步骤，可快速实现 RESTful 和 GraphQL 在前端项目中的集成。
以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！