Prisma GraphQL-Request 请求取消机制详解

Prisma GraphQL-Request 请求取消机制详解

graphql-request 项目地址: https://gitcode.com/gh_mirrors/gra/graphql-request

请求取消的重要性

在现代前端开发中，网络请求的取消是一个非常重要的功能。当用户快速切换页面或者执行某些操作时，如果之前的请求还在进行中，可能会导致数据混乱或资源浪费。Prisma的GraphQL-Request库提供了便捷的请求取消机制，通过AbortController实现。

AbortController基础

AbortController是现代浏览器提供的API，它允许开发者中止一个或多个Web请求。它包含两个主要部分：

1. signal：一个AbortSignal对象，可以传递给请求
2. abort()方法：调用此方法会触发signal的中止事件

全局配置取消信号

在GraphQL-Request中，可以在初始化客户端时就配置取消信号：

const abortController = new AbortController();

const client = new GraphQLClient(endpoint, {
  signal: abortController.signal,
});

client.request(gql`
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`);

// 当需要取消请求时
abortController.abort();

这种方式适合需要统一管理所有请求取消的场景，比如在React组件卸载时取消所有未完成的请求。

单个请求配置取消信号

如果需要对特定请求进行更细粒度的控制，可以在每个请求中单独配置signal：

const abortController = new AbortController();

const client = new GraphQLClient(endpoint);
const document = gql`
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`;

const requestPromise = client.request({
  document,
  signal: abortController.signal,
});

// 取消特定请求
abortController.abort();

这种方式会覆盖客户端级别的signal配置，适合需要单独控制某些请求的场景。

实际应用场景

1. 页面导航：当用户离开当前页面时，取消所有未完成的请求
2. 表单提交：用户快速连续提交表单时，取消前一次未完成的请求
3. 搜索建议：用户输入过程中，取消前一次的搜索请求
4. 大文件上传：提供用户取消上传的选项

错误处理

当请求被取消时，Promise会被拒绝并抛出AbortError。开发者应该捕获这个错误并做适当处理：

try {
  await client.request({ document, signal });
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('请求被取消');
  } else {
    console.error('请求出错', error);
  }
}

兼容性考虑

虽然AbortController是现代浏览器的标准API，但在旧版浏览器或某些环境中可能需要polyfill。开发者可以根据项目需求考虑添加相应的polyfill。

最佳实践

1. 为长时间运行的请求总是提供取消机制
2. 在React等框架中，在组件卸载时取消所有未完成请求
3. 避免在取消请求后更新UI状态
4. 对用户取消的请求和真正的错误请求做区分处理

通过合理使用GraphQL-Request的请求取消功能，可以显著提升应用性能和用户体验。

graphql-request 项目地址: https://gitcode.com/gh_mirrors/gra/graphql-request