Axios三层封装及拦截器详解

什么是axios三层封装?

Axios是一个常用的JavaScript库，用于在浏览器和Node.js中发送HTTP请求。在使用Axios发送请求时，我们可以使用多种方法，但是这些方法可能会有重复代码、不易维护等问题。

为了解决这些问题，我们可以对Axios进行三层封装。三层封装的基本思想是将Axios请求进行抽象封装，提供通用的请求方法，并在此基础上进行业务请求的封装。通过封装，我们能够提高代码的可读性、可维护性和可扩展性。

具体来讲，Axios三层封装的三个层次如下：

第一层：封装Axios基础请求方法，如设置默认请求配置、请求拦截等。这一层是对Axios的基本封装，提供了Axios实例的创建。

文件名:axios.js

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

第二层：封装通用的请求方法，如对请求数据进行验证、对响应数据进行处理、统一处理错误等。这一层是对请求方法的通用封装，提供了一些常用的处理方法，减少了重复代码。

文件名:request.js

import axios from './axios';

// 封装通用请求方法
function request(config) {
  return axios(config)
    .then(res => {
      // 对响应数据做一些处理
      return Promise.resolve(res.data);
    })
    .catch(error => {
      // 对错误进行处理，如打印日志等
      return Promise.reject(error);
    });
}

export default request;

第三层：业务请求方法，提供了具体的请求和响应数据处理方法。这一层是对第二层封装的进一步封装，根据不同的业务需求定义具体的请求方法。

文件名:api.js

import request from './request';

// 用户登录
export function login(params) {
  return request({
    url: '/user/login',
    method: 'post',
    params,
  });
}

// 用户注册
export function register(data) {
  return request({
    url: '/user/register',
    method: 'post',
    data,
  });
}

// 获取用户信息
export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get',
  });
}

在使用时只需引入我们封装的请求

import { login } from "@/api/user.js"; //普通引入需要解构

// 验证通过,提交数据去登陆
let res = await login(this.form);

什么是拦截器？

在发请求和获取服务器响应数据的过程中，可以设置拦截器将请求或响应的数据流拦截下来，做相关操作以后再放行，有请求拦截器和响应拦截器两种。

拦截器写在第一步里面

请求拦截器

在发请求时，将请求拦截下来，自动带上token

axios.interceptors.request.use(function (config) {
    //发请求时，自动携带token
    let token = local.get('token');
    if(token){
        config.headers.Authorization = 'Bearer '+token;
    }

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

响应拦截器

在axios三层封装的第一层设置拦截器，用于拦截响应的数据，并根据操作状态弹出对应的提示框

//添加响应拦截器
axios.interceptors.response.use(function (res) {
    //判断操作状态是否成功
    if(res.data.code===0){
        Message.success(res.data.msg);
    }else{
        Message.error(res.data.msg)
    }

    return res;
}, function (err) {
    //访问失败时执行
    return Promise.reject(err);
});