fly.js 对 DELETE 请求无法传入 body 的问题

fly.js 在小程序中进行 DELETE 请求无法传递 Body 参数

问题根源

原 fly.js 在源码中强制将 GET、HEAD、DELETE、OPTION 等方法的参数转换为 query 参数:

源码位置:148行

javascript 复制代码
// 源码位置:https://github.com/wendux/fly/blob/master/src/fly.js#L148
let needQuery = ["GET", "HEAD", "DELETE", "OPTION"].indexOf(options.method) !== -1;

这行代码导致小程序环境下所有 DELETE 请求的参数都被强制转换为 URL 查询参数,小程序环境下完全不支持 body 数据的发送,这是原 fly.js 一个重要的BUG

社区反馈

这个问题在社区中已经被多次反馈,例如:

  • GitHub Issue #238:用户反馈 fly.delete 不能发送 RequestBody 参数
  • 用户代码示例:
javascript 复制代码
let fly = require('flyio')
fly.delete('/sys/resource/op/batchDel', [1]).then(res => {
  debugger
})
// 参数未能以 body 方式发送

解决方案

由于作者已经长期不更新,于是我们了 fork 原项目并进行优化,发布了 Flyio.js 实现了 deleteWithBody 参数配置,能够独立并同时传递 query 参数和 body 参数 ,完美解决了小程序环境下的 delete 请求限制。

安装

bash 复制代码
npm i flyio.js

新的配置参数:deleteWithBody

Flyio.js 提供了 deleteWithBody 配置选项,允许在 DELETE 请求中同时使用 query 参数和 body 参数。

与原 fly.js 的对比

特性 原 fly.js Flyio.js (优化版)
DELETE body 支持 ❌ 不支持 ✅ 完全支持
参数分离 ❌ 强制转换为 query ✅ 可独立控制
小程序兼容性 ❌ 有限制 ✅ 完美支持
复杂数据结构 ❌ 无法传递 ✅ 完全支持
安全性 ❌ 敏感信息暴露在 URL ✅ 支持 body 传递

核心改进

javascript 复制代码
// 原 fly.js 的行为(小程序环境)
fly.delete('/api/users', { ids: '1,2,3' })
// 结果:DELETE /api/users?ids=1,2,3

// Flyio.js 的行为(使用 deleteWithBody)
fly.delete('/api/users', { ids: [1, 2, 3] }, { deleteWithBody: true })
// 结果:DELETE /api/users
// Body: { "ids": [1, 2, 3] }

基本语法

javascript 复制代码
fly.delete(url, data, {
  deleteWithBody: true // 允许 DELETE 请求传递 body 参数
})

// or

fly.delete(url, null, {
  params: { key: 'params-value' }, // 支持 query 参数
  body: { key: 'body-value' }, // 支持 body 参数
  deleteWithBody: true // 允许 DELETE 请求传递 body 参数
})

参数说明

参数 类型 说明
url String 请求地址,可包含 query 参数
data Object 请求体数据
options.deleteWithBody Boolean 启用 DELETE 请求传递 body

使用示例

1. 将fly的第二个入参data作为body参数

javascript 复制代码
fly.delete('/api/users', {
  ids: [1, 2, 3, 4, 5],
  reason: '批量清理无效用户',
  operator: 'admin'
}, {
  deleteWithBody: true
})

2. delete 同时传入 query & body 参数

javascript 复制代码
fly.delete('/api/users', null, {
  params: { userId: '123' },
  body: {
    reason: '用户注销',
    operator: 'admin'
  },
  deleteWithBody: true
})

完整示例

小程序端实现

javascript 复制代码
// 导入 Flyio.js
import Fly from 'flyio.js/dist/npm/wx'

const fly = new Fly()
javascript 复制代码
// 批量删除购物车商品
async function batchDeleteCartItems() {
  try {
    const response = await fly.delete('/api/cart/items', null, {
      params: { userId: '123' },
      body: {
          type: 'batch_delete',
          source: 'user_action',
          timestamp: Date.now()
      },
      deleteWithBody: true
    })

    console.log('删除成功:', response.data)
  } catch (error) {
    console.error('删除失败:', error)
  }
}

总结

为什么这个改进很重要?

  1. 解决小程序限制 :原 fly.js 在小程序环境中的 DELETE 请求限制是一个已知问题,我们的优化彻底解决了这个问题。这个问题在 GitHub Issue #238 中已经被社区多次反馈。

  2. 修复源码缺陷 :原 fly.js 在 源码第148行 强制将所有 DELETE 请求参数转换为 query 参数,我们的改进通过 deleteWithBody 选项优雅地绕过了这个限制。

  3. 提升开发体验:开发者不再需要为了适应原库的限制而改变 API 设计,可以按照标准的 RESTful 规范进行开发。

  4. 增强安全性:敏感信息不再暴露在 URL 中,提高了应用的安全性。

  5. 保持兼容性:在不需要 body 参数的场景下,Flyio,js 的行为与原 fly.js 完全一致,保证了向后兼容。

迁移指南

如果您正在使用原 fly.js,迁移到 Flyio.js 非常简单:

javascript 复制代码
// 原使用 fly.js 的导入
import Fly from 'flyio/dist/npm/wx'

// 迁移到 flyio.js 后的导入
import Fly from 'flyio.js/dist/npm/wx'

这个改进使得 Flyio.js 成为小程序开发中处理 DELETE 请求的最佳选择,完美解决了原 fly.js 的限制问题。

项目地址

NPM包名: flyio.js

文档: flyio-js.vercel.app/doc/flyio/d...

仓库: Flyio.js

这个新npm包保持了100%的向fly.js兼容性,同时添加了缺失的deleteWithBody功能。试试看吧!🚀

相关推荐
不在逃避q4 分钟前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁18 分钟前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One98523 分钟前
高进度算法模板速记(待完善)
java·前端·算法
陈随易28 分钟前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师2 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174462 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈2 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen3 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒3 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端
梅孔立4 小时前
两种免费的翻译API调用方式详解 - Edge官方API与个人缓存服务
前端·缓存·edge