Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Mitä asynkronointifunktiot ovat? Sanalla sanoen, se on Generator-funktion syntaktinen sokeri.

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-funktio on korvata Generator-funktion tähti (*) asyncilla ja tuotto tilalla await, ja siinä kaikki.

Asynkronointitoiminnon parannukset generaattoritoimintoon näkyvät seuraavissa neljässä kohdassa:

(1) Sisäänrakennettu toimilaite.
Generator-funktion suorittamisen on perustuttava suorittajaan, joten siellä on co-moduuli ja async-funktion mukana tulee oma suorittaja. Toisin sanoen async-funktioiden suoritus on täsmälleen sama kuin tavallisten funktioiden, vain yhdellä rivillä.

co-moduuli: Co-moduuli on kuuluisan ohjelmoijan TJ Holowaychukin kesäkuussa 2013 julkaisema pieni työkalu, jota käytettiin generaattoritoimintojen automaattiseen suorittamiseen.
Co-moduuli säästää sinua kirjoittamasta Generator-funktion suorittajaa.

// 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) Parempi semantiikka.
Asyncillä ja awaitilla on selkeämpi semantiikka kuin tähdellä ja tuottolla. async tarkoittaa, että funktiossa on asynkroninen toiminto, ja await tarkoittaa, että seuraavan lausekkeen on odotettava tulosta.
(3) Laajempi sovellettavuus.
Co-moduulikäytännön mukaan tuotto-komentoa voi seurata vain Thunk-funktio tai Promise-objekti, kun taas async-funktion await-komentoa voi seurata Promise-objekti ja primitiivityyppinen arvo (numeerinen arvo, merkkijono ja Boolen arvo arvo, mutta se muunnetaan automaattisesti välittömästi ratkaistuksi Promise-objektiksi).
(4) Palautusarvo on Promise.
Async-funktion palautusarvo on Promise-objekti, joka on paljon kätevämpi kuin Generator-funktion paluuarvo on Iterator-objekti. Voit määrittää seuraavan toiminnon sitten -menetelmällä.

Lisäksi asynkronointifunktiota voidaan pitää useana asynkronisena toimintona, joka on pakattu Promise-objektiin, ja await-komento on sisäisen sitten -komennon syntaktinen sokeri.

1. Asynkronoinnin perustoiminnot

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

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

2. Käytä await-toimintoa odottaaksesi lupausta

// 模拟一个异步请求函数
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. Virheiden käsittely

// 异步函数中的错误处理
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. Ketjutetut asynk.funktiot

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-toiminto tapahtumankäsittelytoimintona

// 假设有一个按钮元素
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-funktio ja 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