Adakah async untuk es6 atau es7?

async ialah es7. async dan await ialah penambahan baharu kepada ES7 dan merupakan penyelesaian untuk operasi asynchronous/wait boleh dikatakan sebagai gula sintaktik untuk modul bersama dan fungsi penjana, menyelesaikan kod tak segerak dengan semantik yang lebih jelas. Seperti namanya, async bermaksud "tak segerak".

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Ciri tak segerak bahagian hadapan yang dicadangkan dalam ES7 (ES2017): async, tunggu.

Apa itu async/wait

async and wait ialah tambahan baharu dalam ES7 Untuk penyelesaian kepada operasi tak segerak, async/wait boleh dikatakan sebagai modul bersama dan penjanaan Gula sintaksis untuk fungsi peranti. Selesaikan kod asynchronous js dengan semantik yang lebih jelas.

Async, seperti namanya, bermaksud "asynchronous". Dan menunggu secara literal bermaksud "menunggu", yang digunakan untuk menunggu penyiapan tak segerak.

Terdapat peraturan ketat antara tak segerak dan menunggu Kedua-duanya tidak boleh dipisahkan antara satu sama lain.

Pelajar yang biasa dengan modul ko harus tahu bahawa modul ko adalah modul yang ditulis oleh Master TJ yang menggunakan fungsi penjana untuk menyelesaikan proses tak segerak Ia boleh dianggap sebagai pelaksana penjana fungsi. Async/wait ialah peningkatan kepada modul bersama Ia mempunyai pelaksana fungsi penjana terbina dalam dan tidak lagi bergantung pada modul bersama. Pada masa yang sama, async mengembalikan Janji.

Dari sudut pandangan di atas, sama ada modul co atau async/wait, Promise digunakan sebagai unit paling asas Pelajar yang tidak tahu Promise boleh terlebih dahulu mengetahui lebih lanjut tentang Promise.

Membandingkan Promise, co, async/wait

Di bawah kami menggunakan contoh mudah untuk membandingkan persamaan, perbezaan dan pertukaran antara ketiga-tiga kaedah.

Kami menggunakan pemacu nodejs mongodb untuk menanyakan pangkalan data mongodb sebagai contoh. Sebabnya ialah pemacu js mongodb telah melaksanakan Promise yang dikembalikan secara lalai, dan kami tidak perlu membungkus Promise secara berasingan.

Gunakan rantaian Promise

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);
})

Kaedah Promise kemudian() boleh mengembalikan Promise atau nilai yang disegerakkan Jika nilai yang disegerakkan dikembalikan, Nilai itu akan terbungkus dalam Janji. Dalam contoh di atas, db.collection() akan mengembalikan nilai yang disegerakkan, iaitu objek koleksi, tetapi ia akan dibungkus ke dalam Promise dan akan dihantar secara telus kepada kaedah then() seterusnya. Contoh di atas menggunakan rantai Janji. Mula-mula sambung ke pangkalan data MongoClient.connect() mengembalikan Promise, kemudian dapatkan objek pangkalan data db dalam kaedah then() dan kemudian dapatkan objek coll dan kembalikannya. Dapatkan objek coll dalam kaedah then() seterusnya, kemudian lakukan pertanyaan, kembalikan hasil pertanyaan dan panggil kaedah then() lapisan demi lapisan untuk membentuk rantai Promise. Dalam rantai Promise ini, jika pengecualian berlaku dalam mana-mana pautan, ia akan ditangkap oleh tangkapan akhir(). Boleh dikatakan kod yang ditulis menggunakan rantai Promise ini lebih elegan dan prosesnya lebih jelas daripada memanggil fungsi panggil balik lapisan demi lapisan. Mula-mula dapatkan objek pangkalan data, kemudian dapatkan objek koleksi, dan akhirnya menanyakan data. Tetapi terdapat masalah yang tidak terlalu "elegan" di sini, iaitu objek yang diperolehi oleh setiap kaedah then() ialah data yang dikembalikan oleh kaedah then() sebelumnya. Ia tidak boleh diakses merentas lapisan. Apakah maksudnya, iaitu, dalam ketiga kemudian (blog => {}), kita hanya boleh mendapatkan blog hasil pertanyaan, tetapi tidak boleh menggunakan objek db dan objek coll di atas. Pada masa ini, bagaimana jika anda ingin menutup pangkalan data db.close() selepas mencetak senarai blog? Pada masa ini, terdapat dua penyelesaian:

Pertama ialah menggunakan then() nesting. Kami mengganggu rantai Promise dan menjadikannya bersarang, sama seperti menggunakan fungsi panggil balik:

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);
})

Di sini kami menyusun dua Promise, supaya dalam operasi pertanyaan terakhir, kami boleh memanggil objek db luaran. Walau bagaimanapun, kaedah ini tidak disyorkan. Alasannya mudah, kami beralih daripada satu jenis fungsi panggilan balik neraka kepada satu jenis Neraka panggilan balik Janji.
Selain itu, kita perlu menangkap pengecualian setiap Janji, kerana Janji tidak membentuk rantai.

Terdapat cara lain, iaitu untuk lulus db dalam setiap kaedah then():

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);
});

Kami lulus db dalam pengembalian setiap kaedah then() Objek dikembalikan bersama-sama dengan setiap hasil yang lain. Sila ambil perhatian bahawa tidak mengapa jika setiap hasil adalah nilai yang disegerakkan, tetapi jika ia adalah nilai Promise, setiap Promise memerlukan lapisan penghuraian tambahan.
Sebagai contoh, dalam contoh di atas, dalam objek {db:result.db,blogs:result.coll.find().toArray()} yang dikembalikan oleh kaedah kemudian() kedua, blogs ialah kaedah Janji () seterusnya, kami tidak boleh merujuk secara langsung nilai tatasusunan senarai blog , jadi kita perlu Mula-mula panggil kaedah then() untuk menghuraikan satu lapisan, dan kemudian kembalikan dua nilai disegerakkan db dan blog. Ambil perhatian bahawa ini melibatkan sarang Promise, tetapi Promise hanya menempatkan satu tahap then().

这种方式，也是很蛋疼的一个方式，因为如果遇到then()方法中返回的不是同步的值，而是Promise的话，我们需要多做很多工作。而且，每次都透传一个“多余”的db对象，在逻辑上也有点冗余。

但除此之外，对于Promise链的使用，如果遇到上面的问题，好像也没其他更好的方法解决了。我们只能根据场景去选择一种“最优”的方案，如果要使用Promise链的话。

鉴于Promise上面蛋疼的问题，TJ大神将ES6中的生成器函数，用co模块包装了一下，以更优雅的方式来解决上面的问题。

co搭配生成器函数

如果使用co模块搭配生成器函数，那么上面的例子可以改写如下：

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是一个函数，将接受一个生成器函数作为参数，去执行这个生成器函数。生成器函数中使用yield关键字来“同步”获取每个异步操作的值。
上面代码在代码形式上，比上面使用Promise链要优雅，我们消灭了回调函数，代码看起来都是同步的。除了使用co和yield有点怪之外。

使用co模块，我们要将所有的操作包装成一个生成器函数，然后使用co()去调用这个生成器函数。看上去也还可以接受，但是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。同时生成器函数变成了普通函数。这种方式在语义上更加清晰明了，async表明这个函数是异步的，同时await表示要“等待”异步操作返回值。

async函数返回一个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函数，最后返回得到的博客列表最终会被包装成一个Promise返回，如上，我们直接调用getBlogs().then()方法可获取async函数返回值。

好了，上面我们简单对比了一下三种解决异步方案，下面我们来深入了解一下async/await。

深入async/await

async返回值

async用于定义一个异步函数，该函数返回一个Promise。
如果async函数返回的是一个同步的值，这个值将被包装成一个理解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函数，返回值被包装成一个Promise，可以调用then()方法获取返回值。对于一个同步的值，可以使用await，也可以不使用await。效果效果是一样的。具体用不用，看情况。

比如上面使用mongodb查询博客那个例子，let coll = db.collection('blogs');，这里我们就没有用await，因为这是一个同步的值。当然，也可以使用await，这样会显得代码统一。虽然效果是一样的。

async函数的异常

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

我们直接在async函数中抛出一个异常，由于返回的是一个Promise，因此，这个异常可以调用返回Promise的catch()方法捕捉到。

和Promise链的对比：
我们的async函数中可以包含多个异步操作，其异常和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()并没有继续执行。

并行

使用async后，我们上面的例子都是串行的。比如上个list()和count()的例子，我们可以将这个例子用作分页查询数据的场景。先查询出数据库中总共有多少条记录，然后再根据分页条件查询分页数据，最后返回分页数据以及分页信息。

我们上面的例子count()和list()有个“先后顺序”，即我们先查的总数，然后又查的列表。其实，这两个操作并无先后关联性，我们可以异步的同时进行查询，然后等到所有结果都返回时再拼装数据即可。

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()“同时”执行，这里count()和list()可以看作是“并行”执行的，所耗时间将是两个异步操作中耗时最长的耗时。

Hasil akhir ialah tatasusunan yang terdiri daripada hasil kedua-dua operasi. Kita hanya perlu mengeluarkan nilai-nilai dalam tatasusunan mengikut urutan.

[Pembelajaran yang disyorkan: tutorial video javascript]

Atas ialah kandungan terperinci Adakah async untuk es6 atau es7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!