Подробное объяснение асинхронной функции ES6 (10)

2024-07-12

Что такое асинхронные функции? Одним словом, это синтаксический сахар функции Генератора.

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

Функция async заключается в замене звездочки (*) функции Generator на async, а return на await, и все.

Улучшения функции async по сравнению с функцией Generator отражены в следующих четырех моментах:

(1) Встроенный привод.
Выполнение функции генератора должно зависеть от исполнителя, поэтому существует модуль co, а функция async имеет собственный исполнитель. Другими словами, выполнение асинхронных функций точно такое же, как и обычных функций, только с одной строкой.

Модуль co: Модуль co — это небольшой инструмент, выпущенный известным программистом Ти Джей Холовайчуком в июне 2013 года и используемый для автоматического выполнения функций генератора.
Модуль co избавляет вас от написания исполнителя функции 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) Лучшая семантика.
Async и await имеют более четкую семантику, чем звездочка и выход. async означает, что в функции выполняется асинхронная операция, а await означает, что следующее выражение должно дождаться результата.
(3) Более широкая применимость.
Согласно соглашению модуля co, за командой yield может следовать только функция Thunk или объект Promise, тогда как за командой await функции async может следовать объект Promise и значение примитивного типа (числовое значение, строка и логическое значение). значение, но оно будет автоматически преобразовано в немедленно разрешенный объект Promise).
(4) Возвращаемое значение — Promise.
Возвращаемое значение функции async — это объект Promise, что гораздо удобнее, чем возвращаемое значение функции Generator — объект Iterator. Вы можете использовать метод then, чтобы указать следующее действие.

Более того, асинхронную функцию можно рассматривать как несколько асинхронных операций, упакованных в объект Promise, а команда await является синтаксическим сахаром внутренней команды then.

1. Основные асинхронные функции

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

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

2. Используйте await, чтобы дождаться Promise

// 模拟一个异步请求函数
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. Обработка ошибок

// 异步函数中的错误处理
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. Связанные асинхронные функции

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. асинхронная функция как функция обработки событий

// 假设有一个按钮元素
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. асинхронная функция и 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

Обмен технологиями