As you probably know, the Javascript language is executed in a “single thread” environment.

Single-threaded means that you can only complete one task at a time. If there are multiple tasks, they must be queued, the first task completed, the next task executed, and so on.

The advantage of this mode is that the implementation is relatively simple, the execution environment is relatively simple; The disadvantage is that as long as one task takes a long time, subsequent tasks must wait in line, which will delay the execution of the entire program. A common browser non-response (suspended animation) is usually the result of a single piece of Javascript code running for so long (such as an infinite loop) that the entire page gets stuck in one place and no other task can be performed.

To solve this problem, the Javascript language divides the execution mode of the task into two modes: Synchronous and Asynchronous.

1. The callback

Callbacks are the most basic approach to asynchronous programming.

Suppose you have two functions f1 and f2, the latter waiting for the result of the former.

f1();
f2();
Copy the code

If f1 is a time-consuming task, consider rewriting F1 to write f2 as a callback function of F1.

function f1(callback){
    setTimeout(function() {// callback(); }, 1000); }Copy the code

The executing code looks like this

f1(f2);
Copy the code

In this way, we change the synchronous operation to asynchronous operation. F1 does not block the program execution, which is equivalent to executing the main logic of the program first and postponing the execution of time-consuming operation.

The advantages of the callback function are that it is simple, easy to understand, and deploy. The disadvantages are that it is not easy to read and maintain the code, the parts are highly coupled, the process can be messy, and only one callback function can be specified per task.

2.Promise

Promises Objects are a specification developed by the CommonJS working group to provide a unified interface for asynchronous programming.

In a nutshell, the idea is that each asynchronous task returns a Promise object that has a THEN method that allows the callback function to be specified. Promises greatly improve async dilemma, avoid callback hell, and improve nested hierarchies.

Basic Api

  • Promise.resolve()
  • Promise.reject()
  • Promise.prototype.then()
  • Promise.prototype.catch()
  • Promise.all() // All completed
  • Promise.race() // Finish one

See Ruan yifong’s Introduction to ECMAScript 6 for a detailed introduction to the API. Here I’ll show you a few simple scenarios.

Simulate two asynchronous requests

The associated reject() and catch() methods for the Rejected state of the promise are omitted for the sake of code introduction

/ / 1 requestfunction getData1 () {
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        console.log('1 executed ')
        resolve('Request to analog data 1111 pull')}, 2000)})} // 2 requestfunction getData2 (params) {
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        console.log('2 executed ')
        resolve('Request to analog data 22222 pull! Params: ' + params)
      }, 1500)
    })
  }
Copy the code

Promise implements asynchronous callback asynchronous queue

After request 1 completes, pass the response parameters of 1 to 2, and send request 2

  function promiseDemo () {
    getData1()
      .then(res => {
        returnGetData2 (res)}).then(res => {console.log(res)})} promiseDemo() Params: Request to simulated data 1111 takes 3500 ms to pullCopy the code

Promise.all () implements asynchronous callbacks concurrent with all completion

1 request and 2 request are sent at the same time. After receiving both responses, the system executes them

  function promiseDemo () {
    Promise.all([getData1(), getData2()]).then(function(res) {the console. The log (res)})} executed the / / 1 / / 2 / / /"Request to analog data 1111 pull"."Request to analog data 22222 pull! Params: undefined."] took 2000 msCopy the code

Promise.race () implements asynchronous callback concurrent racing

Request 1 and request 2 are sent at the same time, and one of them is executed upon receiving the request

  function promiseDemo () {
    Promise.race([getData1(), getData2()]).then(function(res) {console.log(res)})} // 2 Executed // request to analog data 22222 pull! Params: undefined time 1500 ms // 1 executedCopy the code

As a result, the Promise object works well, and the control over the asynchronous flow is greatly improved, with the.then() method making chaining calls. But the use of.then().catch() also makes the code very ugly and deeply nested, so async/await comes out

async/await

Async/await is a new way for Javascript to write asynchronous programs. Past asynchronous methods have been nothing more than callback functions and promises. But Async/await is built on Promise.

Introduction to the async/await

  • Async /await is the new way of asynchronous code
  • Async /await is implemented based on promises
  • Async /await makes asynchronous code more like synchronous code
  • Await can only be used in async functions, not in normal functions
  • The await keyword must be followed by a Promise object
  • After the function executes to await, the Promise function executes, but since promises are usually asynchronous functions inside, the event loop will wait forever, The rest of this function is not re-executed until the event polling checks that the Promise has a state: Resolve or Reject

Async/await usage

The async function returns a Promise object, and callbacks can be added using the then method. When a function executes, upon encountering an await, it returns a Promise object, waits for the asynchronous operation to complete, and then executes the following statement in the function body.

How do I use Async functions

Let’s take a look at nguyen Yifeng’s introduction to ECMAScript 6

async function timeout(ms) {
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);
Copy the code

The code above specifies that after 50 milliseconds, it prints Hello World. Further, async functions can be thought of as multiple asynchronous operations wrapped as a Promise object, and await commands are syntactic sugar for internal THEN commands

Let’s look at a concrete example

Async implements asynchronous callback asynchronous queue

After request 1 completes, pass the response parameters of 1 to 2, and send request 2

The promise implementation method mentioned above is a chain call to THEN, but async is more concise

  async function asyncDemo() {const r1 = await getData1() const r2 = await getData2(r1) console.log(r2)} // 1 executed // 2 executed // requested to simulated data 22222 pull! Params: Request to simulated data 1111 takes 3500 ms to pullCopy the code

Asynchronous code is realized by synchronous writing. Wait for the asynchronous function getData1 to complete and send the return value to R1, pass it to R2, and execute R2

Async Asynchronous callback concurrency

1 request and 2 request are sent at the same time, specifying the arrival sequence of the request

Suppose we have a business requirement to make two requests, but specify the order in which they are received? Here or draw lessons from ruan a peak god of the code

  async function asyncDemo2 () {
    const arr = [getData1, getData2]
    const textPromises = arr.map(async function (doc) {
      const response = await doc()
      returnResponse}) // Output in orderfor(const textPromise of textPromises) { console.log(await textPromise); } // select * from (1, 1, 2);for. Of) specifies the order of output // requests to simulated data 22222 pull! Params: undefinedCopy the code

In planar code, although the map method takes an async function as an argument, it is executed concurrently, because only the async function is executed internally, and the outside is not affected. Behind the for… The of loop uses await inside, so it outputs sequentially

How so BT demand can be achieved.

Async summary

It makes asynchronous code less obvious as well, but it’s best to choose the asynchronous code that works best for the situation. Async is the syntactic sugar for Generator functions. So take a look at Generator functions if you want to understand more

reference

Use of Promise and Async/await

Understand the async/await

How to avoid async/await hell

Async /await shall know and shall know

Async /await elegant error handling

Understand ES7 async/await in depth

Async /await

Introduction to the Async/Await

ES6 series articles async-await

An introduction to async/await functions

Implement A Promise object (follow the Promise/A+ specification)

I Promise I will (10 questions)

Promise won’t…? Look here!! The most accessible Promise ever!!

Promise implementation principle (source code attached)

Introduction to Promise

Understanding Promise in depth (PART 1)

Detail the advantages of async/await over Promise

Talk about promises for interview questions and practical use

Do you know Promise?