luch-request跨平台请求库使用指南
项目地址: https://gitcode.com/gh_mirrors/lu/luch-request luch-request是一个基于Promise开发的uni-app跨平台、项目级别的请求库。它具有更小的体积、易用的API和方便简单的自定义能力，支持请求和响应拦截、全局挂载、多个全局配置实例等功能。
项目介绍与特性
luch-request是专为uni-app生态设计的网络请求解决方案，目前版本为3.1.1。该库具有以下核心特性：
- 基于Promise对象实现更简单的request使用方式
- 支持请求和响应拦截器
- 支持全局挂载和多个全局配置实例
- 支持自定义验证器和文件上传/下载
- 支持task操作和自定义参数
- 支持多拦截器配置
- 对参数的处理比uni.request更强大
快速开始
安装方式
使用npm安装luch-request：
npm install luch-request -S
创建请求实例
在项目中创建Request实例并进行基本配置：
import Request from 'luch-request';
const http = new Request();
基础请求示例
GET请求
http.get('/user/login', {
params: {
userName: 'name',
password: '123456'
}
}).then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});
POST请求
http.post('/user/login', {
userName: 'name',
password: '123456'
}).then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});
文件上传
luch-request提供了强大的文件上传功能：
http.upload('api/upload/img', {
filePath: '', // 要上传文件资源的路径
name: 'file', // 文件对应的key
header: {}, // 请求头配置
formData: {}, // 额外的form数据
custom: {auth: true} // 自定义参数
}).then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});
拦截器配置
请求拦截器
可以在请求发送前进行全局拦截：
http.interceptors.request.use(config => {
// 在发送请求之前做些什么
// 例如添加认证令牌
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
响应拦截器
对响应数据进行统一处理：
http.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
高级配置选项
自定义验证器
http.validateStatus = function (statusCode) {
return statusCode >= 200 && statusCode < 300;
};
局部配置覆盖全局配置
局部配置的优先级高于全局配置：
http.get('/user/login', {
params: {userName: 'name', password: '123456'},
header: {}, // 会与全局header合并，如有同名属性，局部覆盖全局
custom: {auth: true}, // 自定义参数
timeout: 60000, // 超时设置
validateStatus: function validateStatus(statusCode) {
return statusCode >= 200 && statusCode < 300;
}
});
项目结构与源码组织
luch-request的源码结构清晰，主要包含以下核心模块：
- core目录：包含请求核心类、拦截器管理、配置合并等基础功能
- helpers目录：URL构建、路径组合等辅助工具
- adapters目录：适配器接口，支持不同平台的请求实现
- utils目录：工具函数，如深度克隆等
luch-request项目的核心架构设计
开发与构建
项目使用现代化的构建工具链：
- Rollup作为模块打包器
- Babel进行ES6+语法转换
- ESLint保证代码规范
- VuePress构建文档网站
常用开发命令
npm run dev # 开发模式
npm run build # 生产构建
npm run docs # 文档开发服务器
最佳实践建议
配置管理
- 将静态配置放在setConfig中设置
- 动态参数在拦截器中处理
- 为不同API服务创建独立的配置实例
错误处理
- 合理使用validateStatus进行状态码验证
- 在响应拦截器中统一处理业务错误
- 利用Promise的catch机制捕获异常
性能优化
- 合理设置请求超时时间
- 利用缓存减少重复请求
- 合并相关请求提升效率
常见问题与解决方案
跨域请求处理
在H5环境下，可以通过配置withCredentials参数来控制是否携带凭证。不同平台对跨域的支持有所差异，建议根据目标平台进行相应的条件编译配置。
文件上传进度监控
通过getTask回调可以获取上传任务实例，进而实现进度监控：
getTask: (task, options) => {
task.onProgressUpdate((res) => {
console.log('上传进度' + res.progress);
});
}
总结
luch-request作为uni-app生态中成熟的网络请求解决方案，提供了全面而强大的功能集。通过合理配置和使用，可以显著提升跨平台应用的开发效率和网络请求的稳定性。
该库的持续维护和广泛使用证明了其在uni-app开发中的重要价值。无论是简单的数据请求还是复杂的文件操作，luch-request都能提供优秀的支持。开发者可以根据项目需求灵活选择配置方式，充分发挥其潜力。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
