js fetch 拦截器|极客笔记

js fetch 拦截器

在现代的网页开发中，我们经常会使用到 Fetch API 来进行网络请求。Fetch API 是一种更加现代化、强大的网络请求方式，取代了传统的 XMLHttpRequest，它提供了一种简单、统一的接口来实现网络请求。在使用 Fetch API 发送请求时，我们可以通过拦截器来对请求和响应进行加工处理，以满足特定的需求。本文将详细介绍如何在 JavaScript 中使用 Fetch API 拦截器。

Fetch API 概述

在开始讲解 Fetch 拦截器之前，让我们先了解一下 Fetch API 的基本用法和特点。

Fetch API 是浏览器提供的一种用于发送网络请求和处理响应的接口。它基于 Promise 设计，使用起来更加简洁、易用。通过 Fetch API，我们可以向服务器发送 GET、POST、PUT、DELETE 等不同类型的请求，并对响应进行处理。

下面是使用 Fetch API 发送 GET 请求的一个示例代码：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });

在上面的示例中，我们使用 fetch() 方法发送了一个 GET 请求，并在 then 方法中对响应进行处理。如果请求成功，我们将数据解析为 JSON 格式并打印出来；如果请求失败，我们会捕获错误并打印出错误信息。

Fetch 拦截器介绍

在实际应用中，我们可能需要对所有的网络请求和响应进行统一的处理，比如添加请求头、处理错误、修改请求参数等。为了方便管理和复用这些逻辑，我们可以使用 Fetch 拦截器来对请求和响应进行拦截并进行相应的处理。

Fetch 拦截器基于 Fetch API 提供的 fetch() 方法，可以拦截请求和响应，并在其前后插入自定义逻辑。Fetch 拦截器由 fetch() 方法返回的 Promise 对象链中的一系列 fetch 和 then 函数组成。

Fetch 拦截器的使用

请求拦截器

首先，让我们来看一下如何在 Fetch API 中实现一个请求拦截器。请求拦截器可以用来在发送请求之前对请求参数进行修改或者添加统一的请求头。下面是一个简单的请求拦截器示例：

fetch('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' }),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });

在上面的代码中，我们向 fetch() 方法传入了一个包含请求参数的配置对象。在这个对象中，我们可以设置请求方法、请求体、请求头等参数。

响应拦截器

除了请求拦截器，我们还可以实现一个响应拦截器来处理请求返回的响应。响应拦截器可以用来统一处理响应数据，比如对响应进行解密、格式化，或者添加统一的错误处理逻辑。下面是一个简单的响应拦截器示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });

在上面的代码中，我们可以在 then 方法中对响应进行处理。在这里，我们先判断响应是否成功，如果成功则解析为 JSON 格式并打印出来；如果失败，则捕获错误并打印出错误信息。

使用 Fetch 拦截器

要在 Fetch API 中使用拦截器，我们需要使用 fetch 方法的 prototype 属性，来添加拦截器函数。下面是一个使用 Fetch 拦截器的示例代码：

// 定义一个请求拦截器
const requestInterceptor = {
  apply: async (url, options) => {
    // 在发送请求前做一些处理
    console.log('Request intercepted:', url, options);

    return [url, options];
  }
};

// 定义一个响应拦截器
const responseInterceptor = {
  apply: async (response) => {
    // 处理返回的响应数据
    console.log('Response intercepted:', response);

    return response;
  }
};

// 将拦截器应用到 fetch 函数上
fetch.prototype.use(requestInterceptor, responseInterceptor);

// 发送网络请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });

在上面的示例中，我们首先定义了一个请求拦截器和一个响应拦截器，然后通过 fetch.prototype.use() 方法将这两个拦截器应用到 fetch() 方法上。当发送网络请求时，请求拦截器会在发送请求前执行相应的处理逻辑，然后再发送请求；当收到响应时，响应拦截器会对响应数据进行处理。