Is await es6 or es7?

await is es7. async and await are new additions to ES7 and are solutions for asynchronous operations. As the name suggests, async means "asynchronous". Async is used to declare that a function is asynchronous; await literally means "waiting", which is used to wait for asynchronous completion. There is a strict rule between async and await. Both are inseparable from each other, and await can only be written in async functions.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 7, Dell G3 computer.

The front-end asynchronous features proposed in the latest ES7 (ES2017): async, await.

1. What are async and await

async and await are new additions in ES7. For solutions to asynchronous operations, it is Syntactic sugar for Generator functions.

• async|await is a new way to write asynchronously. Promise was used before in ES6.
• async|await is a new writing method based on promise.

• async|await is also non-blocking.

async, as the name suggests, means "asynchronous". async is used to declare that a function is asynchronous. And await literally means "waiting", which is used to wait for asynchronous completion.

Async and await have a strict rule. Both cannot be separated from each other. However, await can only be written in the async function.

2. Usage

How async handles the return value
The return value of async is a promise object. That is to say, it will directly encapsulate the return value into a promise object through the method in promise.

async function Async() {
return "hello world";
}
const result = Async();
console.log(result);

From the results, it seems that the async function returns a promise object, and it will directly encapsulate the return value into a promise object.

If there is no return value

async function Async() {
    console.log("hello world");
}
let result1 = Async();
console.log(result1);

From the results, it seems that the async function returns a promise object, and the value at that time is undefined. therefore. In the absence of await, a promise object is returned and does not block subsequent statements.

But what is await waiting for?

function time(s) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function Async(value, s) {
  await time(s);
  console.log(value);
}
Async('hello world', 50);

After specifying 50 milliseconds, hello world will be output.

Generally, await is used to wait for the async function to complete. Await waits for an expression, and the calculation result of the expression is a promise object or other value. Therefore, await can actually receive ordinary function calls or direct values.
If await is not waiting for a promise object, the result of the expression operation is what it is waiting for.
If it is a promise object, await will block the subsequent code. When the promise object is successfully processed, the value obtained is the operation result of the await expression. Although await blocks, await is in async. Async does not block. All blocking inside it is encapsulated in a promise object and executed asynchronously.

Any Promise object after an await statement changes to the reject state, then the execution of the entire async function will be interrupted.

async function Async() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
let result1 = Async();
console.log(result1);

Judging from the results, the second await statement will not be executed because the status of the first await statement changes to reject.

3. Error handling of Async function

If an error occurs in the asynchronous operation after await, then the promise object returned by the async function is rejected.

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // await 没有执行
}
f().then(v => console.log(a));

From the results, when one of the awaits in the async function appears in the reject state, the subsequent awaits will not be executed. The general solution is to use try...catch.

// 正确的写法
let a;
async function f() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

f().then(v => console.log(a)); // 1

Judging from the results, this solves the problem very well. When there are multiple awaits that will not be executed, they can all be placed in try...catch.

4. Conclusion

Async|Advantages of await:

• async| await solves the problem of callback hell
• async|await supports concurrent execution
• async|await is more concise for asynchronous processing
• async|await can capture errors in try...catch

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of Is await es6 or es7?. For more information, please follow other related articles on the PHP Chinese website!