Axios是一个流行的基于Promise的HTTP客户端库，可以在浏览器和Node.js中使用。Axios提供了一种拦截HTTP请求和响应的机制，以便您可以在请求发送之前或响应返回之后进行操作。以下是如何拦截重复无用的请求以及常用的方法。

拦截重复无用的请求

import axios from 'axios';

let isRequesting = false;

const api = axios.create({
  baseURL: 'https://example.com/api',
});

api.interceptors.request.use((config) => {
  if (isRequesting) {
    return Promise.reject(new Error('Duplicate request detected.'));
  }

  isRequesting = true;
  return config;
}, (error) => Promise.reject(error));

api.interceptors.response.use((response) => {
  isRequesting = false;
  return response;
}, (error) => {
  isRequesting = false;
  return Promise.reject(error);
});

export default api;

在这个示例中，我们创建了一个Axios实例，并添加了一个请求拦截器和一个响应拦截器。我们使用'isRequesting'变量来跟踪当前是否正在发送请求。如果正在发送请求，则拒绝新的请求。当请求完成时，我们将'isRequesting'变量重置为'false'。

请求拦截器

请求拦截器允许您在发送请求之前修改请求的配置，或者在请求被发送之前执行一些操作。以下是一个使用请求拦截器的示例，用于向请求头添加Authorization标头：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://example.com/api',
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
}, (error) => Promise.reject(error));

export default api;

在这个示例中，我们使用'api.interceptors.request.use()'方法添加了一个请求拦截器。我们检查本地存储中是否存在令牌，如果存在，则向请求头添加Authorization标头。

响应拦截器

响应拦截器允许您在处理响应数据之前对其进行修改，或者在响应被处理之前执行一些操作。以下是一个使用响应拦截器的示例，用于检查响应数据是否包含错误信息：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://example.com/api',
});

api.interceptors.response.use((response) => {
  if (response.data.error) {
    return Promise.reject(response.data.error);
  }

  return response;
}, (error) => Promise.reject(error));

export default api;

在这个示例中，我们使用'api.interceptors.response.use()'方法添加了一个响应拦截器。我们检查响应数据是否包含错误信息，如果包含错误信息，则返回一个拒绝的Promise，将错误信息传递给后续的'.catch()'回调函数。

错误处理

Axios提供了两种错误处理机制：使用'.catch()'回调函数或使用全局错误处理器。以下是使用'.catch()'回调函数的示例：

import axios from 'axios';

axios.get('https://example.com/api/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，我们使用'.catch()'回调函数处理请求的错误。如果请求失败，则控制台将输出错误信息。

以下是使用全局错误处理器的示例：

import axios from 'axios';

axios.defaults.baseURL = 'https://example.com/api';

axios.interceptors.response.use((response) => {
  return response;
}, (error) => {
  console.error(error);
  return Promise.reject(error);
});

axios.get('/data')
  .then((response) => {
    console.log(response.data);
  });

在这个示例中，我们使用'axios.interceptors.response.use()'方法添加了一个响应拦截器，用于全局处理错误。如果发生错误，则控制台将输出错误信息，并将错误传递给后续的'.catch()'回调函数。