More detailed explanation article detailed explanation reprint address

1. Advantages of async/await

  • 1) Convenient cascading call: that is, the scenario in which calls occur successively;
  • 2) Synchronous code writing method: Promise uses then function to make chain calls, dot and dot all the time, which is a horizontal writing method from left to right; Async /await is executed sequentially from top to bottom, just like writing synchronous code, more in line with code writing conventions;
  • 3) Multiple parameter transfer: Promise’s then function can only pass one parameter. Although it can be packaged as an object to pass multiple parameters, it will lead to the transfer of redundant information, and frequent parsing and recombination of parameters will be troublesome; Async /await does not have this limitation and can be treated as ordinary local variables. Block level variables defined with let or const can be used as many as you want. There is no restriction and no redundancy.
  • 4) Synchronous code and asynchronous code can be written together: when using promises, it is best to put synchronous code and asynchronous code in different THEN nodes so that the structure is clearer; The whole writing habit of async/await is synchronous, there is no need to confuse the difference between synchronous and asynchronous, of course, the asynchronous process needs to wrap a Promise object after the await keyword;
  • 5) Coroutine based: Promise encapsulates asynchronous processes according to the paradigm of functional programming. Async /await is a coroutine based mechanism, which is a real “save context, switch control…… “Control restoration, context retrieval” is a more accurate description of asynchronous processes;
  • 6) Async /await is an optimization of Promise: Async /await is based on Promise and is a further optimization. However, when writing code, the API of Promise itself rarely appears, which is very close to synchronous code writing;

Async keyword

  • 1) async keyword: async keyword: async keyword: await keyword; Of course, it doesn’t matter if it’s all synchronous code, but then the async keyword is redundant;
  • 2) Non-blocking: If there is an asynchronous process in an async function, it will wait, but the async function itself will return immediately and will not block the current thread. It can be simply considered that async functions work on the main thread and execute synchronously without blocking the interface rendering. The asynchronous process inside async functions decorated with await keyword works on the corresponding coroutine. Blocks waiting for the asynchronous task to complete before returning;
  • 3) Async functions return Promise objects: this is essentially different from ordinary functions, and is also the place to pay attention to when using;
    • (1) return newPromise(); This is true of async;
    • (2) return data; Resolve (data); resolve(data); resolve(data); Then (data => {}) then(data => {}) then(data => {})
    • Resolve (undefined); resolve(undefined);
  • 4) No wait is associated with the features of Promise. If an async function is executed without await, it will execute immediately, return a Promise object, and never block subsequent statements, just like normal functions that return promises.
  • 5) await not processing asynchronous error: await is a reject(error) message of an asynchronous process. The catch function of the Promise object returned by async function is responsible for uniformly capturing all errors of the internal asynchronous process; As long as an error occurs in an asynchronous process within an async function, the whole execution process is interrupted, and the catch of the returned Promise object can catch the error;
  • 6) The execution of async function: The execution of async function is the same as that of ordinary functions, the function name with () is ok, the number of parameters is arbitrary, there is no limit, also need to have async keyword; However, the return value is a Promise object. Then function can be used to get the return value and catch the errors in the whole process.

3, await keyword

  • 1) Await can only be used inside async functions: cannot be placed inside normal functions, otherwise an error will be reported;

  • 2) Await keyword followed by Promise object: in Pending state, corresponding coroutine will hand over control and enter wait state, which is the essence of coroutine;

  • 3) await is async wait Resolve (data) and return Resolved data. For example, when the Promise object changes from Pending to Resolved, the variable A equals data, and console.log(a) is executed in sequence. It really executes sequentially and behaves almost exactly like synchronized code;

  • 4) “await” can also be followed by synchronous code: however, the system will automatically convert it to a Promsie object,

  • 5) await the processing of failure message: await only care about the successful message resolve(data) in the asynchronous process and get the corresponding data data, and reject(error) message, do not care about the processing; There are several options for error handling:

    • (1) Make the Promise object behind “await” catch itself;
    • (2) It can also make the Promise object returned by the outside async function unified catch;
    • (3) Place a try… Catch structure;

  • 6) await: await is an operator used to form an expression. The result of await depends on what it waits for. If it waits for something other than a Promise, then the result of await is what it waits for. If it waits for a Promise object, await is busy. It blocks the code behind it, waiting for the Promise object resolve, and then getting the value of resolve as a result of the await expression. Although it is blocking, async function calls do not block, and all blocks within it are executed asynchronously wrapped in a Promise object, which is why await must be used in async functions;