This article introduces the basic concepts of Pipe in functional programming, how to use Pipe to make our code better, and the new Pipe operator, Fancy stuff behind it!

When I repackaged Axios a few days ago, I used the observation pattern to apply interceptors. Implemented a webpack-like extension to modify our AXIos. Recently, when I was processing response, I found that it was not a good way to process all the codes in THEN.

 private httpClient(mode: Method, uri: string, body: any, options? : AxiosRequestConfig) {

        const requestBody = ['GET'.'DELETE'].indexOf(mode) === 0 ?
            {
                params: body
            }
            :
            {
                data: body
            }

        return this.okHttp.getHttpClient().request({ ... requestBody,url: uri,
            method: mode,
        }).then(res= > {
            return res.data
        })
    }
Copy the code

At this point I needed a pattern to decouple the relationship, and it would be too complicated to use the observer pattern. Streaming operations with RXJS are not bad either, but RXJS is more sequential with asynchronous operations. I just want to lose the koA operation for the Onion (Pipe) example.

Pipe is a good option if you want to stream a task, dynamically loading the order of your Handle operations into then operations somewhere else.

What is a Pipe?

To see pipe as a simple example, we now have two simple functions addOne and addTwo, which addOne and two to arguments, respectively:

const addOne = x => x + 1
const addTwo = x => x + 2
Copy the code

Now we want to pass a parameter through the first function and then through the second function. The most direct and easiest way is:

addTwo(addOne(1)) // 4
Copy the code

Let’s write a simple pipe function that returns a new function to accomplish our purpose above:

const pipe = (func1, func2) => x => func2(func1(x))

const addThree = pipe(
  addOne,
  addTwo
)

addThree(1) // 4
Copy the code

Well, it’s hard to see the benefits right now, but as we go through more and more transforms, the benefits will become more and more obvious:

const addTen = pipe(
  addOne,
  addTwo,
  addThree,
  addFour
)
Copy the code

So we need a better pipe function that can take any number of arguments and, starting with the first, take the raw values and pass the output to the next function. Wait, we’re thinking of something. We’re going through an array, taking the output value as the next input, which sounds a lot like Reduce. So, you can write a simple pipe function using array.prototype. reduce:

const pipe = ... args => x => args.reduce( (outputValue, currentFunction) => currentFunction(outputValue), x )Copy the code

Of course, writing above ES6 can be done with simple notation.

a |> b // b(a)
Copy the code

Code transformation

 private httpClient(mode: Method, uri: string, body: any, options? : AxiosRequestConfig) {

        const requestBody = ['GET'.'DELETE'].indexOf(mode) === 0 ?
            {
                params: body
            }
            :
            {
                data: body
            }

        return this.okHttp.getHttpClient().request({ ... requestBody,url: uri,
            method: mode,
        }).then(res= > {
            const response = ResponseHandle.getInstance().pipe(
                AccessTokenHandle
            )
            response(res);
            return res.data
        })
    }
Copy the code

You can see that we use the following code to do our business development in the future, here is a small example of their own. How would you do it if you wanted to optimize it further, if it were me. Pipe requires the parameters to be made into an array, and this array can be made into a configuration item that needs to do the checksum stream processing. We need that, to manage the function combination in the configuration item.

  const response = ResponseHandle.getInstance().pipe(
        AccessTokenHandle
  )
  response(res);
Copy the code

We don’t need to look at the old shit Mountain business code when we need new features in the future. Add one and configure another. Note that pipe is simple if your business is sequential. Sequential combinations should be noted. If you use RXJS, you can create multiple observation topics and compose them yourself.

export function AccessTokenHandle(res: any) {
    const { code } = res.data;
    if (code === 1000) {
        alert('Good numbers! ')}}Copy the code

So much for today’s project construction thinking. In terms of how you’re going to use it, think about what scenarios you can use this design for. Not for use’s sake!