接收两个函数作为入参的JS函数最优编写方案

优化后实现代码 #

import { loader } from '../public/main.js';

// 默认按行解析逻辑，单独抽离更清晰
const defaultParse = (data, parseRow) => data.split('\n').map(row => parseRow(row));

export async function loadData(
  url, 
  dataName, 
  parseRowMethod = x => x, 
  onLoadCallback = defaultParse
) {
  return new Promise((resolve, reject) => {
    loader.load(
      url,
      rawData => resolve(onLoadCallback(rawData, parseRowMethod)),
      xhr => console.log(`加载${dataName}进度：${(xhr.loaded / xhr.total * 100).toFixed(2)}%`),
      err => {
        console.error(`加载${dataName}失败:`, err);
        reject(err); // 把错误抛给调用方处理
      }
    )
  })
}

核心优化点说明 #

• 消除冗余外部变量：原代码外层声明的dataOut完全没有必要，直接让Promise返回解析后的结果即可，减少了跨作用域变量赋值的冗余逻辑
• 补全错误链路：原代码只打印加载错误，没有执行reject，会导致调用loadData时如果加载失败，函数会进入永久pending状态，优化后错误会正常抛出，上层可以用try/catch捕获处理
• 逻辑解耦更清晰：把默认的按行解析逻辑单独抽离为独立函数，参数职责更明确：普通场景只需要传parseRowMethod自定义行解析规则即可，遇到非行结构的特殊格式文件，直接传自定义的onLoadCallback覆盖默认解析逻辑就行，两个参数的职责完全拆分，不会有耦合的奇怪感
• 细节优化：用模板字符串替换字符串拼接，进度展示增加两位小数可读性更好，默认回调改用更简洁的map实现按行转换

如果你的使用场景里90%以上都是用默认按行解析，自定义整体回调的场景极少，还可以进一步调整参数顺序，把低频的onLoadCallback放到最后作为可选参数，调用时不需要的时候可以直接忽略，写法更顺手。

内容的提问来源于stack exchange，提问作者Thibault Rolland