Penjelasan mendetail tentang fungsi async ES6 (10)

2024-07-12

Apa fungsi asinkron? Singkatnya, ini adalah gula sintaksis dari fungsi Generator.

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

Fungsi async adalah mengganti tanda bintang (*) pada fungsi Generator dengan async, dan mengganti hasil dengan menunggu, dan selesai.

Peningkatan fungsi async pada fungsi Generator tercermin dalam empat poin berikut:

(1) Aktuator bawaan.
Eksekusi fungsi Generator harus bergantung pada eksekutor, jadi ada modul co, dan fungsi async dilengkapi dengan eksekutornya sendiri. Dengan kata lain, eksekusi fungsi async sama persis dengan fungsi biasa, hanya dengan satu baris.

modul co: Modul co adalah alat kecil yang dirilis oleh programmer terkenal TJ Holowaychuk pada bulan Juni 2013, digunakan untuk eksekusi otomatis fungsi Generator.
Modul co menyelamatkan Anda dari menulis pelaksana fungsi Generator.

// 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) Semantik yang lebih baik.
Async dan menunggu memiliki semantik yang lebih jelas daripada asterisk dan hasil. async berarti ada operasi asinkron dalam fungsi tersebut, dan menunggu berarti ekspresi berikut perlu menunggu hasilnya.
(3) Penerapan yang lebih luas.
Menurut konvensi modul co, perintah hasil hanya dapat diikuti oleh fungsi Thunk atau objek Promise, sedangkan perintah menunggu dari fungsi async dapat diikuti oleh objek Promise dan nilai tipe primitif (nilai numerik, string, dan Boolean nilai, tetapi akan secara otomatis dikonversi ke objek Janji yang segera diselesaikan).
(4) Nilai kembaliannya adalah Janji.
Nilai kembalian fungsi async adalah objek Promise, yang jauh lebih nyaman daripada nilai kembalian fungsi Generator adalah objek Iterator. Anda dapat menggunakan metode kemudian untuk menentukan tindakan selanjutnya.

Selain itu, fungsi async dapat dianggap sebagai beberapa operasi asinkron, dikemas ke dalam objek Promise, dan perintah menunggu adalah gula sintaksis dari perintah internal lalu.

1. Fungsi dasar asinkron

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

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

2. Gunakan menunggu untuk menunggu Janji

// 模拟一个异步请求函数
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. Penanganan kesalahan

// 异步函数中的错误处理
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. Fungsi asinkron berantai

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. fungsi async sebagai fungsi penanganan event

// 假设有一个按钮元素
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. fungsi async dan 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

Berbagi teknologi