axios三层封装实践-CSDN博客

本文介绍了如何对企业级项目中axios进行三层封装：工具层用于增强axios，设置公共配置；接口函数层封装所有接口，便于集中管理；应用层在具体页面中调用封装后的接口，简化使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios企业级三层封装

第一层：工具层
第二层：接口函数层
第三层：应用层

以用户登陆为例（参数为account、password，响应成功码code为0）

第一层：工具层

对axios工具进行增强，如:设置公共的请求服务器、请求拦截器、响应拦截器…
示例文件地址 src/utils/axios.js

设置公共的请求服务器地址

//安装axios后引入
import axios from 'axios';
//‘’中是通用服务器地址
axios.defaults.baseURL = '';

设置请求拦截器

axios.interceptors.request.use(function (config) {
    // 发送请求之前触发，携带token
    config.headers.Authorization = 'Bearer ' + localStorage.getItem(key);
    return config;
}, function (error) {
    // 请求错误触发
    return Promise.reject(error);
});

设置响应拦截器

//引用elementUI的message消息提示（可选）
import { Message } from 'element-ui';
//设置响应拦截器
axios.interceptors.response.use(function (response) {
     //code为数字时进行判断
     if (typeof (response.data.code) === 'number') {
          // 状态码为2xx时触发该函数。
          if (response.data.code === 0) {
              Message.success(response.data.msg) //登陆成功弹出绿色提示框（可选）
          } else {
              Message.error(response.data.msg) //登陆失败弹出红色提示框（可选）
          }
      }
    return response;
}, function (error) {
    // 状态码超出2xx时触发该函数。
    return Promise.reject(error);
});

第二层：接口函数层

对项目所有的接口进行封装，项目接口有任何的改动只需要改这一层即可
示例文件地址 src/api/user.js

//引入第一层axios
import axios from '@/utils/axios.js';
//普通暴露（data为调用函数时需要传入的参数对象）
export const checkLogin = (data) => {
    return axios({
        method: 'post',
        url: '接口地址',
        data
    })
}

第三层：应用层

在实际项目页面中结构使用

//双向绑定的数据参数
data() {
     return {
          form: {
                account: '',
                password: ''
          }
     }
}

//解构引入
import { checkLogin } from '@/api/user.js'

//点击登陆先进行验证this.$refs.form.validate（），此处省略正则rules示例，需要可前往elementUI取
methods: {
      login() {
            this.$refs.form.validate(async result => {
                //验证通过时发送请求
                if (result) {
                    let res = await checkLogin(this.form)
                    if (res.data.code === 0) {
                         //登陆成功后储存token 此处省略
                         //再跳转到首页 此处省略
                    }
                }
            })
        }
    }