JavaScript Asynchronous Calling Framework (Part 4 - Chained Calling)_javascript skills

In real development, it is very common to perform a series of synchronous and asynchronous operations in sequence. Still using the example in Baidu Hi web version, we first need to asynchronously obtain the contact list, and then asynchronously obtain the specific information of each contact, and the latter is obtained in pages. Each request sends the names of 10 contacts and then Retrieve the corresponding specific information. This is multiple asynchronous requests that need to be executed sequentially.
To this end, we need to design a new operation method to optimize code readability, so that the sequential asynchronous operation code looks as elegant as the traditional sequential synchronous operation code.
Traditional approach
Most programmers can well understand sequential execution code, such as this:

Copy Code The code is as follows:

var firstResult = firstOperation(initialArgument);
var secondResult = secondOperation(firstResult);
var finalResult = thirdOperation(secondResult );
alert(finalResult);

The function executed first provides the required data for the function executed later. However, after using our asynchronous calling framework, the same logic must become like this:

Copy code The code is as follows:

firstAsyncOperation(initialArgument).addCallback(function(firstResult) {
secondAsyncOperation(firstResult).addCallback(function(secondResult) {
thirdAsyncOperation(secondResult).addCallback(function(finalResult) {
alert(finalResult);
});
});
});

Chain writing
I think the above code It’s really unsightly, and I hope it can be transformed into jQuery-style chain writing. To do this, we first construct a use case:

Copy the code The code is as follows:

Async.go (initialArgument)
.next(firstAsyncOperation)
.next(secondAsyncOperation)
.next(thirdAsyncOperation)
.next(function(finalResult) { alert(finalResult); })

In this use case, we pass in initialization data to go, and then pass in a data processing function after each next. These processing functions process the data in order.
Synchronous coexistence
All the above use cases call asynchronous functions, but it is best for us to be compatible with synchronous functions so that users can use this function without caring about the specific implementation of the function. Function. For this purpose we write another use case like this:

Copy code The code is as follows:

Async. go(0)
.next(function(i) { alert(i); return i 1; })
.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i 1); }, 1000);
return operation;
})
.next(function(i ) { alert(i); return i 1; })
.next(function(i) { alert(i); return i; });

In the above use case, we Expect to see a prompt information sequence of 0, 1, 2, 3, with an interval of 1000 milliseconds between 1 and 2.
Asynchronous nature
A chain call is essentially an asynchronous call, so it also returns an Operation instance. This instance naturally also has the fields result, state and completed, and when the entire chain of calls is completed, result is equal to the result returned by the last call, and completed is naturally equal to true.
We can expand the previous use case and get the following use case code:

Copy the code The code is as follows:

var chainOperation = Async.go(0)
.next(function(i) { alert(i); return i 1; })
.next(function(i) {
alert (i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i 1); }, 1000);
return operation;
})
.next(function(i) { alert(i); return i 1; })
.next(function(i) { alert(i); return i; });
setTiemout(function () { alert(chainOperation.result; }, 2000);

Save the return of the chain call. When the chain call is completed, its result should be consistent with the return of the last operation. In the use case above, that's 3.
Calling Timing
Although we provide a chained calling method, users may not necessarily call in this fixed way, so we still have to consider various possibilities for compatibility with users Usage, for example, use next to add an operation to the call chain asynchronously:

Copy code The code is as follows:

var chainOperation = Async.go(0);
chainOperation.next(function(i) { alert(i); return i 1; });
setTimeout(function() {
chainOperation. next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout(function() { operation.yield(i 1); }, 2000);
return operation;
})
}, 1000);
setTimeout(function() {
chainOperation.next(function(i) { alert(i); return i 1; } );
}, 2000);

In this use case, the user adds an operation every 1000 milliseconds, and the second operation takes 2000 milliseconds. In other words, the second operation has not yet returned when the third operation is added. As a robust framework, it must be compatible with such usage.
In addition, we also need to consider that users may want to construct the call chain first and then execute the call chain. At this time, the user will first use the next method to add the operation, and then use the go method to execute it.

Copy code The code is as follows:

var chainOperation = Async
.chain(function( i) { alert(i); return i 1; })
.next(function(i) {
alert(i);
var operation = new Async.Operation();
setTimeout (function() { operation.yield(i 1); }, 2000);
return operation;
})
.go(0)
setTimeout(function() {
chainOperation .next(function(i) { alert(i); return i 1; })
}, 1000);

In the above use case, the user added header synchronization via chain and next One operation and one asynchronous operation, then use go to execute the call chain, and use next to asynchronously append an operation before the call chain is completed. A robust framework should be able to prompt 0, 1, 2 as the user expects in such use cases.
Summary
In response to the demand for chain calls, we have designed so many use cases, including various strange asynchronous calling methods. How to finally achieve such a function?