前言

写这篇文章之前，我们需要首先知道什么是面向对象？面向对象对后端同学来说一定是再熟悉不过的东西了，但对前端同学来说，尤其是旧前端技术来说，大家可能更习惯于面向过程开发。

面向对象和面向过程

首先来简单介绍一下面向对象和面向过程的写法。

面向对象

面向对象思想中，万物皆对象，假设有一个叫小明的人去吃面，这个过程在面向对象思想中可以抽离出来两个对象：

1. 对象1：人，这个对象有一个属性姓名，有一个方法吃
2. 对象2：饭，这个对象有一个属性种类

用代码的形式来写如下：

class 人 {
  private 姓名;
  
  constructor(姓名){
    this.姓名 = 姓名;
  }
  
  吃(饭){
    console.log(`${this.姓名}在吃${饭}`);
  }
}

class 饭 {
  private 种类;
  
  constructor(种类){
    this.种类 = 种类;
  }
}

然后实现小明在吃面，首先实例化一个人对象，他叫小明，执行 吃 的行为

const 小明 = new 人("小明");
小明.吃()

接下来实现实例化一个 饭 对象，种类是 面

const 面 = new 饭("面");

最后实现小明吃面

小明.吃(面)

可以发现，面向对象的写法逻辑抽离，划分明显。

面向过程

接下来我们来用面向过程的写法实现小明吃面：

首先有一个变量叫小明，他是一个对象，并且有吃的方法:

const 小明 = {
  吃(啥){
    console.log(啥)
  }
};

然后有一个变量是面：

const 面 = "面";

最后小明开吃：

小明.吃(面);

可以看出来，面向过程的代码非常的少，但是当你的业务代码越来越多时，也就变得越来越难维护。

封装axios

扯得有点远来，现在我们来进入主题。

安装依赖

首先安装 axios 依赖：

npm i axios

封装类

在项目的 utils 目录下新建一个 Http.ts 文件，并完成基本的骨架：

export class Http {
  constructor(){
  
  }
}

该类接受一个 baseURL 属性，为接口地址：

export class Http {
  private baseURL = "";

  constructor({ baseURL }){
    this.baseURL = baseURL;
  }
}

然后在 构造方法 中创建一个 axios 并存储到该类的属性 request：

export class Http {
  // ...
  private request = null;

  constructor({ baseURL }){
    // ...
    this.request = axios.create({
      baseURL:this.baseURL,
      // 当然如果你想有更多的参数，只需要在构造方法中接收，在这里传入即可
    })
  }
}

接下来我们要自定义 请求拦截 和 响应拦截，同样在 构造方法中传入 请求拦截方法 和 响应拦截方法 并赋值给对象属性：

export class Http {
  // ...
  private request = null;
  
  // 请求之前的钩子(如果存在,则使用该方法返回的config)
  private beforeRequest = null;

  // 响应成功的钩子(如果存在,则使用该方法处理响应结果)
  private afterRequest = null;

  constructor({ baseURL,beforeRequest=null, afterRequest=null}){
    // ...
    this.request = axios.create({
      baseURL:this.baseURL,
      // 当然如果你想有更多的参数，只需要在构造方法中接收，在这里传入即可
    })
    
    // 请求之前的钩子
    if(beforeRequest) this.beforeRequest = beforeRequest;

    // 响应之后的钩子
    if(afterRequest) this.afterRequest = afterRequest;
  }
}

然后定义 请求拦截方法 和 响应拦截方法，并在 axios 请求拦截 和 响应拦截 时触发：

// ...
constructor(){
  // ...
  // 请求拦截器
  this.request.interceptors.request.use(this.requestInterceptors.bind(this));

  // 响应拦截器
  this.request.interceptors.response.use(this.responseInterceptors.bind(this));
}

// 请求拦截器
requestInterceptors(config){
  // 请求之前的回调
  if(this.beforeRequest) return this.beforeRequest(config);
  return config;
}

// 响应拦截器
responseInterceptors(res){
  // 请求成功之后的回调
  if(this.afterRequest) return this.afterRequest(res);
  return Promise.resolve(res.data);
}

最后，我们这个类要有 post 、get 等请求方法，只需要在构造方法中赋值即可：

// post请求方法
public post = null;

// get请求方法
public get = null;

constructor(){
  // ...
  // post请求
  this.post = this.request.post;

  // get请求
  this.get = this.request.get;
}

使用

我们可以实例化这个 Http，调用请求方法：

const request = new Http();

request.post("",{})
request.get("",{ params:{} })

结语

大家好，我是 webxue，一名前端程序员，但不止于前端，如果觉得文章哪里有瑕疵，欢迎评论区一起讨论，一起学习一起进步~，最后，再次感谢你能看到此处。