基于类的axios完整封装

以下是一个基于axios的简单类式封装示例，包括了请求拦截器和响应拦截器的基本实现。

import axios from 'axios';
 
class HttpRequest {
  constructor(baseUrl = '') {
    this.baseUrl = baseUrl;
    this.queue = {};
  }
 
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      headers: {},
    };
    return config;
  }
 
  destroy(url) {
    delete this.queue[url];
  }
 
  interceptors(instance, url) {
    // 请求拦截器
    instance.interceptors.request.use(
      config => {
        // 可以在这里添加请求头等信息
        // 例如：config.headers['Authorization'] = 'Bearer your-token';
        this.queue[url] = true;
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
 
    // 响应拦截器
    instance.interceptors.response.use(
      response => {
        this.destroy(url);
        const { data, status } = response;
        return { data, status };
      },
      error => {
        this.destroy(url);
        let { message } = error;
        if (message == "Network Error") {
          message = "后端接口连接异常";
        }
        // 这里可以对错误情况进行自定义处理
        // 例如：对于401错误，可以重新登录等
        return Promise.reject(error);
      }
    );
  }
 
  request(options) {
    const instance = axios.create();
    options = { ...this.getInsideConfig(), ...options };
    this.interceptors(instance, options.url);
    return instance(options);
  }
}
 
export default HttpRequest;

使用方法：

import HttpRequest from './HttpRequest';
 
const http = new HttpRequest('https://api.yourdomain.com');
 
http.request({
  url: '/endpoint',
  method: 'get',
  params: {
    key: 'value'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这个封装允许你创建一个全局的HTTP请求实例，并且可以方便地在请求或响应阶段添加拦截器来处理通用的逻辑，比如认证、错误处理等。在实例化HttpRequest时，可以传入一个基础URL，所有的请求都会基于这个URL。每个请求还可以配置自己的拦截器，以满足特定的需求。