无需手工操作，你的axios封装自动化之路开启了！

在现代的网络应用开发中，前端发送API请求是家常便饭，axios作为一款优秀的HTTP客户端库，深受广大开发者的喜爱。然而，在实际开发中，我们往往需要对axios进行封装，以满足不同的需求。例如，我们可能需要拦截重复的请求，将请求结果共享给所有请求源，或者支持多种请求方式和自定义headers。

开箱即用的axios封装

要对axios进行封装，我们首先需要创建一个axios实例，然后配置一些选项。我们可以使用以下代码来创建一个axios实例：

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.getItem('token'),
  },
});

拦截重复请求

为了拦截重复的请求，我们可以使用axios的interceptors功能。具体来说，我们可以使用以下代码来拦截重复的请求：

axiosInstance.interceptors.request.use((config) => {
  if (config.method === 'get') {
    if (localStorage.getItem('request_' + config.url)) {
      return Promise.reject('重复的请求');
    } else {
      localStorage.setItem('request_' + config.url, true);
    }
  }

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

将请求结果共享给所有请求源

为了将请求结果共享给所有请求源，我们可以使用axios的interceptors功能。具体来说，我们可以使用以下代码来将请求结果共享给所有请求源：

axiosInstance.interceptors.response.use((response) => {
  if (response.status === 200) {
    localStorage.setItem('response_' + response.config.url, JSON.stringify(response.data));
  }

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

支持多种请求方式和自定义headers

为了支持多种请求方式和自定义headers，我们可以使用axios的request方法。具体来说，我们可以使用以下代码来发送一个GET请求：

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

我们可以使用以下代码来发送一个POST请求：

axiosInstance.post('https://example.com/api/users', {
  name: 'John Doe',
  email: 'john.doe@example.com',
}).then((response) => {
  console.log(response.data);
});

自定义是否允许重复请求

为了自定义是否允许重复请求，我们可以使用axios的interceptors功能。具体来说，我们可以使用以下代码来自定义是否允许重复请求：

axiosInstance.interceptors.request.use((config) => {
  if (config.method === 'get') {
    if (localStorage.getItem('request_' + config.url)) {
      if (localStorage.getItem('allow_repeat_request_' + config.url) === 'true') {
        return config;
      } else {
        return Promise.reject('重复的请求');
      }
    } else {
      localStorage.setItem('request_' + config.url, true);
    }
  }

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

js封装

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.getItem('token'),
  },
});

axiosInstance.interceptors.request.use((config) => {
  if (config.method === 'get') {
    if (localStorage.getItem('request_' + config.url)) {
      if (localStorage.getItem('allow_repeat_request_' + config.url) === 'true') {
        return config;
      } else {
        return Promise.reject('重复的请求');
      }
    } else {
      localStorage.setItem('request_' + config.url, true);
    }
  }

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

axiosInstance.interceptors.response.use((response) => {
  if (response.status === 200) {
    localStorage.setItem('response_' + response.config.url, JSON.stringify(response.data));
  }

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

export default axiosInstance;

总结

通过以上操作，你的axios封装就能实现多种请求方式、拦截重复请求、共享请求结果、自定义headers和是否允许重复请求的功能，你再也不用手工编写重复的代码了，这将大大提高你的开发效率。