blog-web/source/_posts/JavaScript/函数式进阶-管道.md

title	date	tags	categories
函数式进阶-管道	2023-01-19 22:09:39	JavaScript 函数	JavaScript

管道处理是一种比较常见的api设计方式，意思是上一步的执行结果作为下一步的入参 顺序执行

如果我们需要在JS中实现这一点 当然可以这样做

func1(func2(func3(arg)))

首先这样代码很难看，其次是这样嵌套的代码调用是固定的，没有做到动态的函数式编程

基本形式

如果要实现一个管道，可以这样做

// pipe函数的参数接受若干个参数, 都是Function类型
const pipe = (...funcs) => {
  // 这个pipe函数是会返回一个函数
  return inputValue => { // 这个函数的初始入参作为第一个函数的调用入参, 之后将该函数返回值作为下一个函数的入参
    return funcs.reduce((currentValue, currentFunction) => {
      return currentFunction(currentValue)
    }, inputValue)
  }
}

上面是使用reduce作用是正序执行，如果要逆序执行可以使用reduceRight 调用示例

const func1 = value => {
  return value * 10
}
const func2 = value => {
  return value + 5
}
const func3 = value => {
  return value * 0.5
}
const result = pipe(func1, func2, func3)(30)
console.log(result)

异步函数

如果输入的函数是异步的，或者同步异步都有呢 那么函数的返回结果就不能立刻拿到了

const pipeAsync = (...funcs) => {
  return async (inputValue) => {
    return funcs.reduce((chain, func) => {
      return chain.then(func)
    }, Promise.resolve(inputValue))
  }
}

区别就是不管函数是不是异步的，都当做异步处理，作为then的回调函数 调用示例

const func4 = async value => {
  return value * 10
}

const func5 = value => {
  return value + 5
}

const func6 = async value => {
  return value * 0.5
}

pipeAsync(func4, func5, func6)(30).then(result2 => {
  console.log(result2)
})