当前位置：首页 > news >正文

告别uni.request烦恼！luch-request让文件上传/下载变得如此简单

news 2026/8/9 18:31:41

告别uni.request烦恼！luch-request让文件上传/下载变得如此简单

【免费下载链接】luch-requestluch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。项目地址: https://gitcode.com/gh_mirrors/lu/luch-request

在uni-app开发中，文件上传/下载功能常常让开发者头疼不已。原生的uni.request不仅代码繁琐，还需要处理各种兼容性问题。今天我要向大家推荐一款基于Promise开发的跨平台请求库——luch-request，它能让文件上传/下载变得前所未有的简单！

为什么选择luch-request？

luch-request是一个专为uni-app打造的项目级请求库，它具有体积小、API易用、自定义能力强等特点。相比原生的uni.request，它提供了更优雅的API设计和更完善的功能支持，尤其是在文件上传/下载方面，更是简化了开发者的工作流程。

核心优势：

支持文件上传/下载，API简洁直观
基于Promise开发，支持async/await语法
支持多个全局配置实例，满足复杂项目需求
提供拦截器功能，方便统一处理请求和响应
体积小巧，性能优异

快速开始：安装与配置

安装luch-request

安装luch-request非常简单，只需在项目根目录执行以下命令：

npm install luch-request -S

引入与配置

安装完成后，我们需要在项目中引入并进行基本配置。推荐创建一个api服务文件，集中管理请求配置：

// api/service.js import Request from 'luch-request' const http = new Request() // 设置全局配置 http.setConfig((config) => { config.baseURL = 'https://api.example.com' // 配置默认域名 return config }) export { http }

文件上传：一行代码搞定

luch-request提供了专门的upload方法，让文件上传变得异常简单。以下是一个完整的文件上传示例：

import { http } from '@/api/service.js' async function uploadFile() { uni.chooseImage({ count: 1, success: async (res) => { const tempFilePaths = res.tempFilePaths try { const uploadResult = await http.upload('/api/upload/img', { name: 'file', filePath: tempFilePaths[0], header: { 'Content-Type': 'multipart/form-data' }, // 上传进度回调 onUploadProgress: (progressEvent) => { const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total) console.log('上传进度: ' + percent + '%') } }) console.log('上传成功', uploadResult) uni.showToast({ title: '上传成功', icon: 'success' }) } catch (e) { console.log('上传失败', e) uni.showToast({ title: '上传失败', icon: 'none' }) } } }) }

上传配置项

luch-request的upload方法支持丰富的配置项，满足各种上传需求：

name: 文件对应的key，后端接收文件时的参数名
filePath: 要上传文件的路径
header: 请求头
formData: 额外的表单数据
onUploadProgress: 上传进度回调函数

文件下载：简单高效

与上传功能类似，luch-request也提供了专门的download方法来处理文件下载：

import { http } from '@/api/service.js' async function downloadFile() { try { const downloadResult = await http.download('/api/download/file', { // 下载进度回调 onDownloadProgress: (progressEvent) => { const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total) console.log('下载进度: ' + percent + '%') } }) // 保存文件 const saveResult = await uni.saveFile({ tempFilePath: downloadResult.tempFilePath }) console.log('下载成功', saveResult) uni.showToast({ title: '下载成功', icon: 'success' }) console.log('文件保存路径: ' + saveResult.savedFilePath) } catch (e) { console.log('下载失败', e) uni.showToast({ title: '下载失败', icon: 'none' }) } }

下载配置项

download方法同样支持多种配置：

header: 请求头
onDownloadProgress: 下载进度回调函数
filePath: 指定文件下载后保存的路径

高级技巧：配置合并与优先级

luch-request支持全局配置和局部配置，局部配置优先级高于全局配置。这使得我们可以灵活地处理不同场景的请求需求：

// 全局配置 http.setConfig((config) => { config.timeout = 60000 // 全局超时时间 return config }) // 局部配置，会覆盖全局同名配置 http.upload('/api/upload/img', { timeout: 120000, // 上传超时时间设置为120秒 filePath: tempFilePaths[0] })

错误处理：优雅应对异常情况

luch-request提供了完善的错误处理机制，让我们可以优雅地应对各种异常情况：

try { const uploadResult = await http.upload('/api/upload/img', { name: 'file', filePath: tempFilePaths[0] }) // 处理成功逻辑 } catch (e) { // 处理错误逻辑 if (e.statusCode) { // 服务器返回错误状态码 console.log('服务器错误:', e.statusCode) } else if (e.errMsg) { // 客户端错误信息 console.log('客户端错误:', e.errMsg) } }