ES6 async function detailed explanation (10)

2024-07-12

What is an async function? In a word, it is the syntax sugar of the Generator function.

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
1
2
3
4
5
6
7
8
9
10
11
12
13

The async function replaces the asterisk (*) in the Generator function with async and replaces yield with await, that's all.

The improvements of async function over Generator function are reflected in the following four aspects:

(1) Built-in actuator.
Generator functions must be executed by an executor, so there is a co module, and async functions have their own executor. In other words, the execution of an async function is exactly the same as a normal function, with only one line.

co module: The co module is a small tool released by the famous programmer TJ Holowaychuk in June 2013 for automatic execution of Generator functions.
The co module saves you from having to write executors for Generator functions.

// Generator 函数
var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

//co模块使用
var co = require('co');
co(gen); //co 函数返回一个 Promise 对象
co(gen).then(function (){
  console.log('Generator 函数执行完成');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

(2) Better semantics.
Async and await have clearer semantics than asterisk and yield. Async indicates that there is an asynchronous operation in the function, and await indicates that the expression that follows needs to wait for the result.
(3) Wider applicability.
The co module stipulates that the yield command can only be followed by a Thunk function or a Promise object, while the await command of an async function can be followed by a Promise object and primitive values (numbers, strings, and Boolean values, but these will be automatically converted into immediately resolved Promise objects).
(4) The return value is Promise.
The return value of an async function is a Promise object, which is much more convenient than the return value of a Generator function, which is an Iterator object. You can use the then method to specify the next step.

Furthermore, the async function can be viewed as multiple asynchronous operations wrapped into a Promise object, and the await command is the syntactic sugar of the internal then command.

1. Basic async functions

// 定义一个异步函数
async function fetchData() {
    return 'Data fetched';
}

// 调用异步函数
fetchData().then(data => {
    console.log(data); // 输出: Data fetched
});
1
2
3
4
5
6
7
8
9

2. Waiting for Promise with await

// 模拟一个异步请求函数
function getUserData() {
    return new Promise(resolve => {
        setTimeout(() => resolve({ name: 'Alice' }), 1000);
    });
}

// 异步函数使用 await 等待 Promise
async function printUserData() {
    try {
        const userData = await getUserData();
        console.log(userData); // 输出: { name: 'Alice' }
    } catch (error) {
        console.error(error);
    }
}

printUserData();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. Error handling

// 异步函数中的错误处理
async function riskyFunction() {
    try {
        const result = await Promise.reject('An error occurred');
    } catch (error) {
        console.error(error); // 输出: An error occurred
    }
}

riskyFunction();
1
2
3
4
5
6
7
8
9
10

4. Chained async functions

async function asyncOperation() {
    return 'Operation completed';
}

async function chainAsyncFunctions() {
    try {
        const result1 = await asyncOperation();
        const result2 = await asyncOperation();
        console.log(result1, result2); // 输出: Operation completed Operation completed
    } catch (error) {
        console.error(error);
    }
}

chainAsyncFunctions();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. Async functions as event handlers

// 假设有一个按钮元素
const button = document.querySelector('#myButton');

// 为按钮添加点击事件处理函数
button.addEventListener('click', async event => {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
});
1
2
3
4
5
6
7
8
9
10
11
12

6. async functions and Promise.all

// 异步函数返回多个 Promise
async function fetchUsers() {
    return ["User1", "User2", "User3"];
}

async function fetchPosts() {
    return ["Post1", "Post2", "Post3"];
}

// 使用 Promise.all 并行处理多个异步操作
async function fetchAllData() {
    try {
        const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);
        console.log(users, posts); // 输出: [ 'User1', 'User2', 'User3' ] [ 'Post1', 'Post2', 'Post3' ]
    } catch (error) {
        console.error(error);
    }
}

fetchAllData();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Technology Sharing