什么是axios三层封装

Axios是一个流行的JavaScript库，用于发送HTTP请求并与后端服务进行通信。对Axios的三层封装，是常见的在使用Axios时对其进行包装和封装的方法，其目的在于提高Axios的可重用性、可维护性和可扩展性。

三层封装的核心思想是，将Axios的一些公共配置和错误处理逻辑进行封装，使得我们可以在应用程序的各个地方随时使用包装后的实例来发送请求。

下面是Axios三层封装的实现方式：

1.第一层封装： 创建Axios实例，设置基本参数以及错误拦截器

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // do something with config
    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // do something with response data
    return response.data;
  },
  (error) => {
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

在第一层封装中，我们创建了一个名为“service”的Axios实例，并在其中设置了“baseURL”和“timeout”两个基本参数。通过添加请求拦截器和响应拦截器，我们可以在所有的请求和响应中修改相关参数和处理相关错误。

2. 第二层封装： 封装通用的 API 调用方法

在第二层封装中，我们通常会对一些常见的API调用方法，比如GET、POST等，进行封装，并对其返回的数据进行统一处理，以提高代码的可重用性和可维护性。例如：

import service from './request';

export function get(url, params) {
  return service({
    url,
    method: 'get',
    params,
  });
}

export function post(url, data) {
  return service({
    url,
    method: 'post',
    data,
  });
}

在以上例子中，我们封装了GET和POST请求，并直接返回Axios实例。这样，在调用这些方法时，我们只需要传入URL和参数或数据即可。

3. 第三层封装： 业务逻辑的封装

第三层封装是在第二层封装的基础上，进一步对业务相关的逻辑进行封装，提供更高层次的可重用性和可维护性。例如：

import { get } from '@/utils/request';

export function getUserInfo(id) {
  return get(`/api/user/${id}`);
}

export function postUserInfo(data) {
  return post(`/api/user`, data);
}

在上例中，我们调用了第二层封装时封装的get和post方法，向后端发送请求并获取数据。通过这种方式，我们可以更好地组织和管理我们应用程序的业务逻辑。