Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you how to call the jQuery style chain of the JavaScript asynchronous invocation framework. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

We have implemented a simple JavaScript asynchronous invocation framework, but there are some drawbacks, that is, sequentially executed asynchronous functions need to be declared in a nested way.

In real development, it is common to perform a series of synchronous and asynchronous operations sequentially. Using the example in the Baidu Hi web version, we first get the contact list asynchronously, 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 retrieves the corresponding specific information. These are multiple asynchronous requests that need to be executed sequentially.

To this end, we need to design a new mode of operation to optimize the readability of the code, so that the sequential asynchronous operation code looks as elegant as the traditional sequential synchronous operation code.

Traditional practice

Most programmers have a good understanding of sequentially executed code, such as this:

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 that is executed later. However, after using our JavaScript asynchronous invocation framework, the same logic must look like this:

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

Chain writing

I think the above code is really ugly, and I hope it can be transformed into jQuery-style chained writing. To do this, let's first construct a use case:

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

In this use case, we pass in the initialization data in the go, and then pass in a data processing function after each next, which processes the data sequentially.

Synchronous coexistence

All of the above use cases are asynchronous functions, but we * are compatible with synchronous functions, so that users can use this feature without worrying about the specific implementation of the function. To do this, let's write another use case like this:

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 sequence of prompts of 0, 1, 2, 3, with an interval of 1000 milliseconds between 1 and 2.

Asynchronous essence

A chained call is essentially an asynchronous call, so it also returns an instance of Operation. This example naturally also has result, state, and completed fields, and when the entire chained call is complete, result is equal to the result returned by a call, and completed is naturally equal to true.

We can extend the previous use case to get the following use case code:

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 chained call, and when the chained call is completed, its result should be the same as the return of an operation. In the above use case, that is 3.

Call timing

Although we provide a chained invocation method, users may not necessarily call it in this fixed way, so we still need to consider various possible uses that are compatible with users, such as asynchronously using next to add operations to the calling chain:

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 action every 1000 milliseconds, and the second action takes 2000 milliseconds. That is, the second operation has not been returned when the third operation is added. As a robust framework, it must be compatible with this way of use.

We also need to consider that the user may want to construct the call chain before executing the call chain. At this point, the user will first use the next method to add the operation, and then use the go method to perform.

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 adds a header synchronous operation and an asynchronous operation each through chain and next, then executes the call chain with go, and appends another operation asynchronously with next before the call chain is completed. A robust framework should be able to prompt 0, 1, 2 as expected by the user in such a use case.

To meet the requirements of chain calls, we have designed so many use cases, including various strange ways of calling JavaScript asynchronously.

This is how to call the jQuery style chain of the JavaScript asynchronous invocation framework shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.