HTTP请求二次封装，Vue3+TS企业级项目开发秘笈

2022-11-08 23:03:05

Axios二次封装：提升项目开发效率

背景

随着应用程序规模的不断扩大，HTTP请求的数量和复杂度也在不断增加。传统上，每次发送请求都需要重复设置超时时间、请求头和请求地址，不仅代码冗余繁琐，还容易出错。为了解决这些问题，企业级项目中广泛采用Axios二次封装，通过对Axios进行扩展，有效管理HTTP请求。

Axios二次封装的优势

提高代码复用率： 封装常见的HTTP请求操作，减少代码重复，提高代码复用率，降低维护成本。
增强代码可读性： 将HTTP请求逻辑与其他代码分离，代码结构更清晰，便于后期维护和扩展。
简化开发流程： 封装后的HTTP请求操作更简洁易用，调用封装好的方法或类即可发起请求，简化开发流程，提高开发效率。
提升应用程序性能： 通过优化超时时间、请求头等参数，可以改善HTTP请求性能，减少请求延迟，提升应用程序整体性能。

Axios二次封装的实现

1. 安装Axios

npm install axios

2. 创建封装文件

例如创建一个名为axios.service.js的文件：

import axios from 'axios';

class AxiosService {
  constructor() {
    this.instance = axios.create({
      timeout: 10000,
      headers: { 'Content-Type': 'application/json' },
    });
  }

  get(url, params) {
    return this.instance.get(url, { params });
  }

  post(url, data) {
    return this.instance.post(url, data);
  }

  put(url, data) {
    return this.instance.put(url, data);
  }

  delete(url, params) {
    return this.instance.delete(url, { params });
  }
}

3. 使用封装后的HTTP请求

import { AxiosService } from './axios.service';

const service = new AxiosService();

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