非同期は es6 または es7 用ですか?-フロントエンドQ&A-php.cn

async は es7 です。 async と await は ES7 に新しく追加されたもので、非同期操作のソリューションです。async/await は co モジュールとジェネレーター関数の糖衣構文と言え、より明確なセマンティクスで JS 非同期コードを解決します。名前が示すように、async は「非同期」を意味します。async は関数が非同期であることを宣言するために使用されます。async と await の間には厳密な規則があります。両方を互いに分離することはできず、await は async 関数内でのみ記述できます。

非同期は es6 または es7 用ですか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES7 (ES2017) で提案されたフロントエンドの非同期機能: async、await。

async/await とは

async と await は ES7 の新しいコンテンツです。非同期操作のソリューションとして、async/await は co モジュールと言えます。デバイス機能の糖衣構文の生成。より明確なセマンティクスで js 非同期コードを解決します。

async は、その名前が示すように、「非同期」を意味します。async は、関数が非同期であることを宣言するために使用されます。また、await は文字通り「待機」を意味し、非同期の完了を待つために使用されます。

Async と await には厳密な規則があり、両者を分離することはできませんが、await は async 関数内でのみ記述できます。

co モジュールに精通している学生は、co モジュールがマスター TJ によって書かれたモジュールであり、ジェネレーター関数を使用して非同期プロセスを解決するモジュールであることを知っているはずです。関数。 Async/await は co モジュールのアップグレードであり、ジェネレーター関数エグゼキューターが組み込まれており、co モジュールに依存しなくなりました。同時に、async は Promise を返します。

上記の観点から、co モジュールにしろ async/await にしろ、Promise は最も基本的な単元として使用されるため、Promise についてあまり知らない学生は、まず Promise について詳しく学ぶことができます。

Promise、co、async/awaitの比較

簡単な例を使用して、3 つの方法の類似点、相違点、トレードオフを比較してみましょう。

例として、mongodb の nodejs ドライバーを使用して mongodb データベースをクエリします。その理由は、mongodb の js ドライバーがデフォルトで Promise を返すように実装されており、Promise を個別にラップする必要がないためです。

Promise チェーンを使用する

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

ログイン後にコピー

Promise の then() メソッドは、別の Promise または同期された値を返すことができます。同期された値が返された場合は、約束。上記の例では、 db.collection() は同期された値、つまりコレクションオブジェクトを返しますが、それは Promise にラップされ、次の then() メソッドに透過的に渡されます。上の例では Promise チェーンを使用しています。まずデータベースに接続します MongoClient.connect() は Promise を返し、次に then() メソッドでデータベースオブジェクト db を取得し、次に coll オブジェクトを取得して返します。次の then() メソッドで coll オブジェクトを取得し、クエリを実行してクエリ結果を返し、then() メソッドをレイヤーごとに呼び出して Promise チェーンを形成します。この Promise チェーンでは、いずれかのリンクで例外が発生すると、最後の catch() によってキャッチされます。 Promise チェーンを使用して記述されたこのコードは、レイヤーごとにコールバック関数を呼び出すよりも洗練されており、プロセスが明確であると言えます。最初にデータベースオブジェクトを取得し、次にコレクションオブジェクトを取得し、最後にデータをクエリします。しかし、ここにはあまり「エレガント」ではない問題があります。それは、各 then() メソッドによって取得されたオブジェクトが、前の then() メソッドによって返されたデータであるということです。レイヤーを越えてアクセスすることはできません。これはどういう意味ですか。つまり、3 番目の then (blogs => {}) では、クエリ結果 blogs のみを取得できますが、上記の db オブジェクトと coll オブジェクトは使用できません。このとき、ブログ一覧を出力した後にデータベース db.close() を閉じたい場合はどうすればよいでしょうか。現時点では、解決策が 2 つあります。

1 つ目は、then() ネストを使用することです。コールバック関数のネストを使用するのと同じように、Promise チェーンを分割してネストさせます。

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

ログイン後にコピー

ここでは 2 つの Promise をネストして、最後のクエリ操作で外部の db オブジェクトを呼び出すことができるようにします。ただし、この方法はお勧めできません。理由は簡単です。ある種類のコールバック関数地獄から別の種類の Promise コールバック地獄に変わったからです。
さらに、Promise はチェーンを形成しないため、各 Promise の例外をキャッチする必要があります。

もう 1 つの方法は、各 then() メソッドで db を渡すことです:

MongoClient.connect(url + db_name).then(db => {
    return {db:db,coll:db.collection(&#39;blogs&#39;)};
}).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);
});

ログイン後にコピー

各 then() メソッドの戻りでは、他の結果が形成されるたびに db とその DB を渡します。オブジェクトが返されました。各結果が同期された値である場合は問題ありませんが、それが Promise 値である場合、各 Promise には追加の解析層が必要になることに注意してください。
たとえば、上記の例では、2 番目の then() メソッドによって返される {db:result.db,blogs:result.coll.find().toArray()} オブジェクト内で、 blogs は Promise です。次の then() メソッドでは、ブログリストの配列値を直接参照できないため、then() メソッドを呼び出して最初に 1 つのレイヤーを解析し、次に 2 つのレイヤーを返す必要があります。値データベースとブログを同期します。これには Promise のネストが含まれますが、Promise は then() の 1 レベルのみをネストすることに注意してください。

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

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

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

co搭配生成器函数

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

const co = require(&#39;co&#39;);
co(function* (){
    let db = yield MongoClient.connect(url + db_name);
    let coll = db.collection(&#39;blogs&#39;);
    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(&#39;blogs&#39;);
    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(&#39;blogs&#39;);
    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(&#39;500&#39;);
        },500);
    });
}
timer().then(result => {
  console.log(result);  //500
}).catch(err => {
    console.log(err.message);
});

ログイン後にコピー

//返回一个同步的值
let sayHi = async function sayHi(){
  let hi = await &#39;hello world&#39;;   
  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(&#39;出错了&#39;);
}
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(&#39;故意抛出错误&#39;);
        },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(&#39;begin&#39;);
getList().then(result => {
    console.log(result);
}).catch(err => {
    console.timeEnd(&#39;begin&#39;);
    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(&#39;begin&#39;);
getList().then(result => {
    console.timeEnd(&#39;begin&#39;);  //begin: 505.557ms
    console.log(result);       //[ 100, [ 1, 2, 3 ] ]
}).catch(err => {
    console.timeEnd(&#39;begin&#39;);
    console.log(err);
});

ログイン後にコピー

我们将count()和list()使用Promise.all()“同时”执行，这里count()和list()可以看作是“并行”执行的，所耗时间将是两个异步操作中耗时最长的耗时。

最終結果は、2 つの操作の結果で構成される配列です。配列内の値を順番に取り出すだけです。

[推奨学習: JavaScript ビデオチュートリアル ]

以上が非同期は es6 または es7 用ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。