Fire in the asynchronous

In 1995, JavaScript (originally called LiveScript) began running in Netscape, the most popular browser at the time. In 1996, Microsoft released JScript compatible JavaScript. As netscape and Microsoft continued to compete with each other, the technical foundation for JavaScript was in place around 2000. Then, in the mid-2000s, Google, led by Google, began to focus on using AJAX (Asynchronous JavaScript and XML) to make complex web interaction experiences close to desktop applications.

Then, as Web applications became more complex, JavaScript became more ecological and important, and libraries such as YUI, Prototype.js and jQuery came on the scene, leading to a boom in JavaScript.

In 2008, Google released the JavaScript engine V8, which greatly improved the speed of JavaScript execution, further promoted the prosperity of JavaScript, and also laid the foundation for JavaScript to enter the server side (such as node.js).

Execute asynchronous functions sequentially

While asynchrony brings the benefits of non-blocking JavaScript, it also brings some disadvantages in some scenarios, such as sequential execution of asynchronous functions. Here are some common methods.

1. “Callback Hell”

As the application complexity geometry increases, we may encounter the following “callback hell” type of code.

Function task1 (callback) {setTimeout(() => {console.log('1', 'I am the first task, must be the first task '); callback && callback(1); }, 3000); } function task2 (callback) {setTimeout(() => {console.log('2', 'I am the second task '); callback && callback(2); }, 1000); } function task3 (callback) {setTimeout(() => {console.log('3', 'I am the third task '); callback && callback(3); }, 1000); Function allTasks () {task1((cb1) => {if (cb1) {task2((cb2) => {if (cb2) {task3((cb3) => {if (cb3) {// Complete all tasks in sequence}})}}); }}); } allTasks(); /** * 3 seconds after * 1 I am the first task and must be executed first * 1 seconds after * 2 Second task * 1 seconds after * 3 third task */Copy the code

2. Promise

  • Developer.mozilla.org/zh-CN/docs/…

To avoid the complexity and difficulty of “callback hell,” ES6 introduced Promise. This time it was much simpler to implement, but there was still the problem of nested layers of promises within promises, which seemed to go back to the “callback hell” kind of problem.

New Promise(resolve => {setTimeout(() => {console.log('1', 'I am the first task and must execute first '); resolve(1); }, 3000); }). Then ((val) = > {new Promise (resolve = > {setTimeout (() = > {the console. The log (' 2 ', 'I am the second task); resolve(2); }, 1000); }). Then (val = > {setTimeout (() = > {the console. The log (' 3 ', 'I am the third task); }, 1000); }); }); /** * 3 seconds after * 1 I am the first task and must be executed first * 1 seconds after * 2 Second task * 1 seconds after * 3 third task */Copy the code

3. Await, Async

Ensure support, see:
Caniuse.com/#search=asy…

  • Developer.mozilla.org/zh-CN/docs/…
  • Developer.mozilla.org/zh-CN/docs/…

ES2017 added await and Async to make it easier to write and read and implement sequential asynchronous functions. It’s a great writing experience, like writing synchronous code that fulfills the need for sequential asynchronous execution.

/ function task1 () {return new Promise(resolve => {setTimeout(() => {console.log('1', 'I am the first task,')) Must be executed first '); resolve('done'); }, 3000); }); } /** * task2 () {return new Promise(resolve => {setTimeout(() => {console.log('2', 'second task '); resolve('done'); }, 1000)}); } /** ** / function task3 () {return new Promise(resolve, reject) => {setTimeout(() => {console.log('3', 'Third mission '); reject('error'); }, 1000); }); } /** * task4 () {return new Promise(resolve => {setTimeout(() => {console.log('4', '4')); resolve('done'); }, 2000); }} /** * allTasks */ async function allTasks () {await task1(); await task2(); await task3(); await task4(); } // Execute the task allTasks(); /** * 3 seconds after * 1 I am the first task, must execute first * 1 seconds after * 2 Second task * 1 seconds after * 3 third task * Uncaught (in promise) error */Copy the code
Complete the case

Based on Node.js, asynchro is performed in the order of Await, Async and Promise implementation, and douban movie screenshots are climbed and pictures are downloaded sequentially.

  • Github.com/givebest/no…

reference

  • The complete Solution to JavaScript Programming
  • Developer.mozilla.org/zh-CN/docs/…

Please indicate the source of reprint:Blog. Givebest. Cn/javascript /…