layui 请求封装

<think>嗯，用户想了解Layui的请求封装，我得先回忆一下Layui的相关知识。Layui是一个经典的前端模块化框架，虽然现在可能不如Vue或React流行，但仍有不少老项目在用。用户可能正在维护这样的项目，或者对轻量级框架感兴趣。 首先，Layui自带的模块是$.ajax，但用户提到“请求封装”，应该是想简化重复的代码，比如统一处理错误、添加loading效果，或者自动携带token。需要解释封装的原因和常见方法。 用户可能是开发者，遇到重复配置ajax的问题，想提高效率。可能需要分步骤说明，比如创建函数，配置默认参数，处理响应和异常。还要提到如何添加拦截器，比如请求前检查token，响应后处理错误码。 另外，用户可能希望示例代码，但不确定他们的具体技术栈，比如是否使用token验证，或者如何处理响应数据。需要给出通用的封装示例，并说明可以根据项目需求调整。 要注意的是，Layui的更新可能停滞，需要提醒用户如果新项目可以考虑其他框架，但维护旧项目时封装ajax还是有用的。最后总结封装的好处，比如提高效率、统一管理，同时指出Layui的现状，让用户有全面的了解。</think>Layui 是一个经典的前端模块化框架（虽然官方已宣布“回归经典”并逐渐停止维护），但其轻量、简洁的设计仍被一些项目使用。在 Layui 中，网络请求通常基于 `$.ajax`（依赖 jQuery）或其自带的 `layui.jquery`，但开发者常对请求进行二次封装以提高代码复用性。以下是一个典型的 **Layui 请求封装思路** 和示例： --- ### **为何要封装请求？** 1. **统一处理错误**：自动拦截 HTTP 异常、业务逻辑错误码。 2. **减少重复代码**：如固定请求头（`token`）、`loading` 动画、基础 URL 配置等。 3. **标准化响应格式**：约定后端返回的数据结构（如 `{ code: 200, data: {}, msg: "" }`）。 --- ### **封装示例代码** ```javascript // 在 layui 模块中使用（一般写在独立的 utils.js 或 request.js 中） layui.define(['jquery', 'layer'], function(exports) { var $ = layui.jquery; var layer = layui.layer; // 封装核心方法 function request(options) { // 默认配置 var defaults = { url: '', method: 'GET', data: {}, contentType: 'application/json', loading: true, // 是否显示加载层 success: null, error: null }; var config = $.extend({}, defaults, options); // 显示 loading var loadIndex = config.loading ? layer.load(1) : -1; // 发起请求 return $.ajax({ url: config.url, type: config.method, data: config.method === 'GET' ? config.data : JSON.stringify(config.data), contentType: config.contentType, headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') // 自动携带 token }, success: function(res) { layer.close(loadIndex); if (res.code === 200) { // 成功回调 config.success && config.success(res.data); } else { // 业务错误处理 layer.msg(res.msg || '操作失败'); config.error && config.error(res); } }, error: function(xhr) { layer.close(loadIndex); // HTTP 错误处理 layer.msg('请求失败: ' + xhr.status); config.error && config.error(xhr); } }); } // 导出方法 exports('request', request); }); ``` --- ### **使用方式** ```javascript layui.use(['request'], function(request) { // GET 请求 request({ url: '/api/user/list', method: 'GET', data: { page: 1 }, success: function(data) { console.log('获取数据:', data); } }); // POST 请求 request({ url: '/api/user/create', method: 'POST', data: { name: 'John', age: 25 }, success: function() { layer.msg('创建成功'); } }); }); ``` --- ### **常见封装优化点** 1. **请求拦截器**：在请求前检查 `token` 是否存在，否则跳转登录页。 2. **响应拦截器**：统一处理特定错误码（如 401 跳转登录）。 3. **自动序列化**：根据 `Content-Type` 自动处理 `data` 格式（如 `FormData` 或 `JSON`）。 4. **超时处理**：统一设置超时时间并提示。 5. **防重复提交**：通过标识符防止短时间内重复请求。 --- ### **注意事项** - Layui 自身已逐步停止更新，如果是新项目，建议考虑更现代的框架（如 Vue/React + Axios）。 - 若维护旧项目，合理封装请求能显著提升代码可维护性，但需确保与后端接口规范一致。