TypeScript 金科玉律：不可不知的拦截器

Interceptor 的原理

Interceptor 是一个在请求或响应被发送到服务器之前或之后对其进行拦截的工具。它允许你对请求或响应进行修改、添加或删除信息，从而实现各种功能，如身份验证、日志记录、错误处理等。

Interceptor 的使用方法

在 TypeScript 中，可以使用 axios.interceptors.request.use() 和 axios.interceptors.response.use() 方法来添加拦截器。这两个方法都有两个参数：

• interceptor：拦截器函数，它接收一个请求或响应对象作为参数，并返回一个修改后的请求或响应对象。
• config：可选的配置对象，用于自定义拦截器行为。

例如，你可以使用以下代码来添加一个简单的日志记录拦截器：

axios.interceptors.request.use((request) => {
  console.log(`Sending request to ${request.url}`);
  return request;
});

axios.interceptors.response.use((response) => {
  console.log(`Received response from ${response.config.url}`);
  return response;
});

Interceptor 的使用场景

Interceptor 可以用于各种场景，例如：

• 身份验证： 可以使用拦截器来添加身份验证信息，如令牌或用户名和密码，到请求中。
• 日志记录： 可以使用拦截器来记录请求和响应的信息，以便进行调试和分析。
• 错误处理： 可以使用拦截器来处理错误，并返回友好的错误信息给用户。
• 请求缓存： 可以使用拦截器来缓存请求结果，以提高性能。
• 请求重试： 可以使用拦截器来重试失败的请求。

拦截器使用中的常见问题

配置了拦截器但 axios 返回值提示却没变？

在使用 axios 的时候，我们会经常需要对其进行封装，以更简单地使用其功能。例如，我们会使用 axios.create() 方法来创建一个 axios 实例，并对其进行一些配置，例如设置 baseURL、超时时间等。

在对 axios 进行封装时，我们需要确保正确地应用拦截器。否则，拦截器可能不会生效。

以下是一些常见的问题：

• 拦截器没有添加到正确的 axios 实例中。
• 拦截器没有被正确地触发。
• 拦截器返回了一个错误的响应。

为了解决这些问题，我们需要仔细检查我们的代码，确保拦截器被正确地添加、触发和返回。

结语

Interceptor 是 TypeScript 中一个非常强大的工具，它可以帮助你简化和增强你的代码。如果你还没有使用过 Interceptor，我强烈建议你尝试一下。我相信你一定会发现它非常有用。