从 REST 到 GraphQL：技术选型和实现方式对比-JavaScript中文网-JavaScript教程资源分享门户

随着现代 Web 应用程序变得越来越复杂，搭建一个抽象的 REST API 已经不再是最优解。为了解决传统 API 在查询数据时遇到的瓶颈和数据加载问题，GraphQL 应运而生。本文将从技术选型和实现方式对比这两种 API 技术，看看它们各自的优势和不足。

REST API

REST（Representational State Transfer）是一组处理网络资源的行为和状态的约束。API 的设计者通常将资源与转换（GET、POST、PUT、DELETE）相关的 URL 相关联。开发者可以通过发送 HTTP 请求来请求数据，并传递相关的参数和搜索条件，以获取 JSON 格式的响应数据。REST 属于一种比较成熟、广泛应用的标准化协议，具有以下优点：

优点：

简单易用，无需复杂的客户端实现；
标准化，支持很多格式的数据（比如 XML、JSON 等）；
传输层使用可靠的 TCP 协议，保证数据传输正确；
容易扩展，适用于移动设备和 Web、桌面等多种平台。

缺点：

过度通用化，不利于定制；
客户端获取的数据可能会存在请求过多、传输数据量大等问题，影响性能；
当查询过多时，客户端容易遭受“过载”的压力。

GraphQL

GraphQL 是一种由 Facebook 开源的查询语言和一个用来执行查询的运行时。GraphQL 通过定义类型和关系，以及 permitting 对预定义字段（field）和参数（arguments）进行编程，可以让客户端自由选择查询、返回所需内容和结构。与 REST API 的点对点请求相比，GraphQL 使用单个 API 知道所有资源，并提供面向查询的网络接口，这可以减少网络传输的负担。

优点：

GraphQL 提供了一种精确、强大的查询语言，支持复杂的查询；
客户端可以精确指定需要返回的数据，提高了查询效率；
GraphQL API 可以轻松扩展，支持版本控制；
GraphQL 强制类型检查，可以减少很多运行时错误。

缺点：

许多语言的绑定工具不支持 GraphQL；
需要对服务端接口进行重构；
相比 REST，学习曲线略高。

技术选型

在实现 Web 服务 API 时，以下是两种技术方案的对比：

前端

REST API

// GET /users 返回用户数组
fetch('/users').then(res => res.json()).then(data => console.log(data));

// GET /users/:id 返回单一用户对象
fetch('/users/1').then(res => res.json()).then(data => console.log(data));

GraphQL

// javascriptcn.com 代码示例
// 从 server 获取数据
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';

// 查询所有用户
const ALL_USERS = gql`
  {
    users {
      id
      username
    }
  }
`;
<Query query={ALL_USERS}>
  {({ loading, error, data }) => {
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;

    return (
      <ul>
        {data.users.map(user => (
          <li key={user.id}>{user.username}</li>
        ))}
      </ul>
    );
  }}
</Query>;
// 查询单一用户
const GET_USER = gql`
  query getUser($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

<Query query={GET_USER} variables={{ id: 1 }}>
  {({ loading, error, data }) => {
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
    return <h1>{data.user.name}</h1>;
  }}
</Query>;

后端

REST API

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

// 获取用户列表数组
app.get('/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

// 查询单一用户
app.get('/users/:id', async (req, res) => {
  const user = await User.findOne({ id: req.params.id });
  res.json(user);
});

GraphQL

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    email: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

const resolvers = {
  Query: {
    users: () => User.find(),
    user: (root, { id }) => User.findOne({ id }),
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

总结

在前端构建 Web 应用程序的时候，GraphQL 和 REST 技术都可以实现数据的查询和交互。GraphQL因其强大的查询语言和查询优化，可以为前端开发带来更快更高效的开发体验。虽然 GraphQL 对典型 Web 应用程序的性能具有更大的优势，但是在一些小型应用程序中，REST 也是非常优秀且有效的解决方案。所以在技术实现时，开发者可以从自己项目和需求出发，选择最适合自己项目的方案和技术实现方案。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6585d603d2f5e1655d05d03c