async ist es7. Async und Wait sind neue Erg?nzungen zu ES7 und L?sungen für asynchrone Vorg?nge. Man kann sagen, dass Async/Await syntaktischer Zucker für Co-Module und Generatorfunktionen ist und js asynchronen Code mit klarerer Semantik l?st. Wie der Name schon sagt, bedeutet Async ?asynchron“. Async wird verwendet, um zu deklarieren, dass eine Funktion asynchron ist. Es gibt eine strikte Regel zwischen Async und Wait.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

In ES7 (ES2017) vorgeschlagene asynchrone Front-End-Funktionen: asynchron, warten.

Was ist Async/Await?

Async und Wait sind neue Erg?nzungen in ES7. Für L?sungen für asynchrone Vorg?nge kann man sagen, dass Async/Await syntaktischer Zucker für Co-Module und Generatorfunktionen ist. L?sen Sie asynchronen js-Code mit klarerer Semantik.

async bedeutet, wie der Name schon sagt, ?asynchron“. Mit async wird erkl?rt, dass eine Funktion asynchron ist. Und Warten bedeutet w?rtlich ?Warten“ und wird verwendet, um auf den asynchronen Abschluss zu warten.

Async und Wait haben eine strenge Regel. Beide k?nnen nicht ohne einander leben. Wait kann jedoch nur in asynchronen Funktionen geschrieben werden.

Studenten, die mit dem Co-Modul vertraut sind, sollten wissen, dass das Co-Modul ein von Master TJ geschriebenes Modul ist, das eine Generatorfunktion zur L?sung asynchroner Prozesse verwendet. Es kann als Ausführer der Generatorfunktion angesehen werden. Async/await ist ein Upgrade des Co-Moduls. Es verfügt über einen integrierten Generatorfunktions-Executor und ist nicht mehr auf das Co-Modul angewiesen. Gleichzeitig gibt async Promise zurück.

Aus der oben genannten Sicht wird Promise als grundlegendste Einheit verwendet, unabh?ngig davon, ob es sich um das Co-Modul oder um Async/Await handelt. Schüler, die nicht viel über Promise wissen, k?nnen zun?chst mehr über Promise lernen.

Vergleichen Sie Promise, Co, Async/Await

Lassen Sie uns anhand eines einfachen Beispiels die ?hnlichkeiten, Unterschiede und Kompromisse zwischen den drei Methoden vergleichen.

Wir verwenden als Beispiel den NodeJS-Treiber von Mongodb, um die Mongodb-Datenbank abzufragen. Der Grund dafür ist, dass der JS-Treiber von Mongodb die Rückgabe von Promise standardm??ig implementiert hat und wir Promise nicht separat verpacken müssen.

Verwenden Sie die Promise-Kette

MongoClient.connect(url + db_name).then(db => {
    return db.collection('blogs');
}).then(coll => {
    return coll.find().toArray();
}).then(blogs => {
    console.log(blogs.length);
}).catch(err => {
    console.log(err);
})

Die then()-Methode von Promise kann ein anderes Promise oder einen synchronisierten Wert zurückgeben. Wenn ein synchronisierter Wert zurückgegeben wird, wird er in ein Promise gepackt. Im obigen Beispiel gibt db.collection() einen synchronisierten Wert zurück, d. h. ein Sammlungsobjekt, das jedoch in ein Promise eingeschlossen und transparent an die n?chste then()-Methode übergeben wird. Das obige Beispiel verwendet eine Promise-Kette. Stellen Sie zun?chst eine Verbindung zur Datenbank MongoClient her. connect () gibt ein Versprechen zurück, rufen Sie dann die Datenbankobjekt-Datenbank in der Methode then () ab, rufen Sie dann das Coll-Objekt ab und geben Sie es zurück. Rufen Sie das Coll-Objekt in der n?chsten then()-Methode ab, führen Sie dann eine Abfrage durch, geben Sie die Abfrageergebnisse zurück und rufen Sie die then()-Methode Schicht für Schicht auf, um eine Promise-Kette zu bilden. Wenn in dieser Promise-Kette eine Ausnahme in einem Link auftritt, wird diese vom letzten Catch() abgefangen. Man kann sagen, dass dieser mit der Promise-Kette geschriebene Code eleganter und der Prozess klarer ist als der schichtweise Aufruf von Callback-Funktionen. Rufen Sie zuerst das Datenbankobjekt ab, dann das Sammlungsobjekt und fragen Sie schlie?lich die Daten ab. Hier liegt jedoch ein nicht sehr ?elegantes“ Problem vor, n?mlich dass das von jeder then()-Methode erhaltene Objekt die von der vorherigen then()-Methode zurückgegebenen Daten sind. Es kann nicht schichtübergreifend darauf zugegriffen werden. Das bedeutet, dass wir im dritten Fall (blogs => {}) nur das Abfrageergebnis blogs erhalten, aber das obige DB-Objekt und Coll-Objekt nicht verwenden k?nnen. Was ist zu diesem Zeitpunkt, wenn Sie die Datenbank db.close() schlie?en m?chten, nachdem Sie die Blogliste ausgedruckt haben? Derzeit gibt es zwei L?sungen:

Die erste besteht darin, die Verschachtelung von then() zu verwenden. Wir unterbrechen die Promise-Kette und machen sie verschachtelt, genau wie bei der Verschachtelung von Callback-Funktionen:

MongoClient.connect(url + db_name).then(db => {
    let coll = db.collection('blogs');
    coll.find().toArray().then(blogs => {
        console.log(blogs.length);
        db.close();
    }).catch(err => {
        console.log(err);
    });
}).catch(err => {
    console.log(err);
})

Hier verschachteln wir zwei Promise, sodass im letzten Abfragevorgang das externe Datenbankobjekt aufgerufen werden kann. Diese Methode wird jedoch nicht empfohlen. Der Grund ist einfach: Wir sind von einer Art Callback-Funktionsh?lle zu einer anderen Promise-Callback-H?lle übergegangen.
Darüber hinaus müssen wir die Ausnahme jedes Versprechens abfangen, da Versprechen keine Kette bilden.

Es gibt eine andere M?glichkeit, n?mlich die Datenbank in jeder then()-Methode zu übergeben:

MongoClient.connect(url + db_name).then(db => {
    return {db:db,coll:db.collection('blogs')};
}).then(result => {
    return {db:result.db,blogs:result.coll.find().toArray()};
}).then(result => {
    return result.blogs.then(blogs => {   //注意這里，result.coll.find().toArray()返回的是一個Promise，因此這里需要再解析一層
        return {db:result.db,blogs:blogs}
    })
}).then(result => {
    console.log(result.blogs.length);
    result.db.close();
}).catch(err => {
    console.log(err);
});

Bei der Rückgabe jeder then()-Methode kombinieren wir die Datenbank und ihre anderen Ergebnisse jedes Mal in einer Objektrückgabe. Bitte beachten Sie, dass es in Ordnung ist, wenn jedes Ergebnis ein synchronisierter Wert ist. Wenn es sich jedoch um einen Promise-Wert handelt, erfordert jedes Promise eine zus?tzliche Analyseebene.
Im obigen Beispiel ist das von der zweiten then()-Methode zurückgegebene {db:result.db,blogs:result.coll.find().toArray()}對象中，blogs ein Promise. In der n?chsten then()-Methode k?nnen wir nicht direkt auf den Array-Wert der Blogliste verweisen, daher müssen wir then() aufrufen. Methode, um zuerst eine Ebene zu analysieren und dann die beiden Synchronisationswerte db und blogs zurückzugeben. Beachten Sie, dass dies die Verschachtelung von Promise beinhaltet, ein Promise jedoch nur eine Ebene von then() verschachtelt.

這種方式，也是很蛋疼的一個方式，因為如果遇到then()方法中返回的不是同步的值，而是Promise的話，我們需要多做很多工作。而且，每次都透傳一個“多余”的db對象，在邏輯上也有點冗余。

但除此之外，對于Promise鏈的使用，如果遇到上面的問題，好像也沒其他更好的方法解決了。我們只能根據(jù)場景去選擇一種“最優(yōu)”的方案，如果要使用Promise鏈的話。

鑒于Promise上面蛋疼的問題，TJ大神將ES6中的生成器函數(shù)，用co模塊包裝了一下，以更優(yōu)雅的方式來解決上面的問題。

co搭配生成器函數(shù)

如果使用co模塊搭配生成器函數(shù)，那么上面的例子可以改寫如下：

const co = require('co');
co(function* (){
    let db = yield MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = yield coll.find().toArray();
    console.log(blogs.length);
    db.close();
}).catch(err => {
    console.log(err);
});

co是一個函數(shù)，將接受一個生成器函數(shù)作為參數(shù)，去執(zhí)行這個生成器函數(shù)。生成器函數(shù)中使用yield關鍵字來“同步”獲取每個異步操作的值。
上面代碼在代碼形式上，比上面使用Promise鏈要優(yōu)雅，我們消滅了回調(diào)函數(shù)，代碼看起來都是同步的。除了使用co和yield有點怪之外。

使用co模塊，我們要將所有的操作包裝成一個生成器函數(shù)，然后使用co()去調(diào)用這個生成器函數(shù)。看上去也還可以接受，但是ES的進化是不滿足于此的，于是async/await被提到了ES7的提案。

async/await

我們先看一下使用async/await改寫上面的代碼：

(async function(){
    let db = await MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = await coll.find().toArray();
    console.log(blogs.length);
    db.close();
})().catch(err => {
    console.log(err);
});

我們對比代碼可以看出，async/await和co兩種方式代碼極為相似。co換成了async，yield換成了await。同時生成器函數(shù)變成了普通函數(shù)。這種方式在語義上更加清晰明了，async表明這個函數(shù)是異步的，同時await表示要“等待”異步操作返回值。

async函數(shù)返回一個Promise，上面的代碼其實是這樣：

let getBlogs = async function(){
    let db = await MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = await coll.find().toArray();
    db.close();
    return blogs;
};
getBlogs().then(result => {
    console.log(result.length);
}).catch(err => {
    console.log(err);
})

我們定義getBlogs為一個async函數(shù)，最后返回得到的博客列表最終會被包裝成一個Promise返回，如上，我們直接調(diào)用getBlogs().then()方法可獲取async函數(shù)返回值。

好了，上面我們簡單對比了一下三種解決異步方案，下面我們來深入了解一下async/await。

深入async/await

async返回值

async用于定義一個異步函數(shù)，該函數(shù)返回一個Promise。
如果async函數(shù)返回的是一個同步的值，這個值將被包裝成一個理解resolve的Promise，等同于return Promise.resolve(value)。
await用于一個異步操作之前，表示要“等待”這個異步操作的返回值。await也可以用于一個同步的值。

//返回一個Promise
let timer = async function timer(){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('500');
        },500);
    });
}
timer().then(result => {
  console.log(result);  //500
}).catch(err => {
    console.log(err.message);
});

//返回一個同步的值
let sayHi = async function sayHi(){
  let hi = await 'hello world';   
  return hi;  //等同于return Promise.resolve(hi);
}
sayHi().then(result => {
  console.log(result);
});

上面這個例子返回是一個同步的值，字符串’hello world’，sayHi()是一個async函數(shù)，返回值被包裝成一個Promise，可以調(diào)用then()方法獲取返回值。對于一個同步的值，可以使用await，也可以不使用await。效果效果是一樣的。具體用不用，看情況。

比如上面使用mongodb查詢博客那個例子，let coll = db.collection('blogs');，這里我們就沒有用await，因為這是一個同步的值。當然，也可以使用await，這樣會顯得代碼統(tǒng)一。雖然效果是一樣的。

async函數(shù)的異常

let sayHi = async function sayHi(){
    throw new Error('出錯了');
}
sayHi().then(result => {
  console.log(result);
}).catch(err => {
    console.log(err.message);   //出錯了
});

我們直接在async函數(shù)中拋出一個異常，由于返回的是一個Promise，因此，這個異常可以調(diào)用返回Promise的catch()方法捕捉到。

和Promise鏈的對比：
我們的async函數(shù)中可以包含多個異步操作，其異常和Promise鏈有相同之處，如果有一個Promise被reject()那么后面的將不會再進行。

let count = ()=>{
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            reject('故意拋出錯誤');
        },500);
    });
}
let list = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([1,2,3]);
        },500);
    });
}
let getList = async ()=>{
    let c = await count();
    let l = await list();
    return {count:c,list:l};
}
console.time('begin');
getList().then(result => {
    console.log(result);
}).catch(err => {
    console.timeEnd('begin');
    console.log(err);
});
//begin: 507.490ms
//故意拋出錯誤

如上面的代碼，定義兩個異步操作，count和list，使用setTimeout延時500毫秒，count故意直接拋出異常，從輸出結果來看，count()拋出異常后，直接由catch()捕捉到了，list()并沒有繼續(xù)執(zhí)行。

并行

使用async后，我們上面的例子都是串行的。比如上個list()和count()的例子，我們可以將這個例子用作分頁查詢數(shù)據(jù)的場景。先查詢出數(shù)據(jù)庫中總共有多少條記錄，然后再根據(jù)分頁條件查詢分頁數(shù)據(jù)，最后返回分頁數(shù)據(jù)以及分頁信息。

我們上面的例子count()和list()有個“先后順序”，即我們先查的總數(shù)，然后又查的列表。其實，這兩個操作并無先后關聯(lián)性，我們可以異步的同時進行查詢，然后等到所有結果都返回時再拼裝數(shù)據(jù)即可。

let count = ()=>{
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve(100);
        },500);
    });
}
let list = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([1,2,3]);
        },500);
    });
}
let getList = async ()=>{
    let result = await Promise.all([count(),list()]);
    return result;
}
console.time('begin');
getList().then(result => {
    console.timeEnd('begin');  //begin: 505.557ms
    console.log(result);       //[ 100, [ 1, 2, 3 ] ]
}).catch(err => {
    console.timeEnd('begin');
    console.log(err);
});

我們將count()和list()使用Promise.all()“同時”執(zhí)行，這里count()和list()可以看作是“并行”執(zhí)行的，所耗時間將是兩個異步操作中耗時最長的耗時。

Das Endergebnis ist ein Array, das aus den Ergebnissen der beiden Operationen besteht. Wir müssen nur die Werte im Array der Reihe nach herausnehmen.

【Empfohlenes Lernen: Javascript-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonIst Async für es6 oder es7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!