ホームページ > 記事 > ウェブフロントエンド > JavaScript での async と await の使用法の詳細な紹介
この記事では主に Javascript での async/await の使い方を紹介します。async/await がどのように機能するかについて説明します。興味のある方は学習してください。優れた非同期ソリューション。現時点では、async/await の機能はすでにステージ 3 の推奨事項になっています。この記事では、async/await の仕組みについて説明します。この記事を読む前に、Promise などの ES6 関連の知識を持っていることを望みます。ジェネレーターと知識。
async/await を詳しく紹介する前に、ES6 の現在の優れた非同期処理メソッドを確認してみましょう。次の例では、データ リクエストは Node.js のリクエスト モジュールを使用し、データ インターフェイスはサンプル デモンストレーションとして Github v3 API ドキュメントによって提供されるリポジトリ コード リポジトリ詳細 API を使用します。
Promise の非同期処理Node.js の非同期 IO は、高い同時実行性を適切にサポートしますが、「コールバック」を悲惨なものにし、簡単にコールバック地獄を引き起こす可能性があります。名前付き関数の使用などの従来の方法では、ネスト レベルの数を減らし、コードをより明確に見せることができます。ただし、名前付き関数の定義を見つけるには Ctrl + F を頻繁に使用する必要があり、IDE ウィンドウが頻繁に上下に移動するため、コーディングやデバッグのエクスペリエンスが低下します。 Promise を使用すると、ネスト レベルの数を大幅に減らすことができます。さらに、Promise の実装にはステート マシンが使用され、関数内の解決と拒否を通じてプロセスを適切に制御でき、一連のコード ロジックをシーケンシャル チェーンで実行できます。以下は Promise の使用例です:
const request = require('request'); // 请求的url和header const options = { url: 'https://api.github.com/repos/cpselvis/zhihu-crawler', headers: { 'User-Agent': 'request' } }; // 获取仓库信息 const getRepoData = () => { return new Promise((resolve, reject) => { request(options, (err, res, body) => { if (err) { reject(err); } resolve(body); }); }); }; getRepoData() .then((result) => console.log(result);) .catch((reason) => console.error(reason);); // 此处如果是多个Promise顺序执行的话,如下: // 每个then里面去执行下一个promise // getRepoData() // .then((value2) => {return promise2}) // .then((value3) => {return promise3}) // .then((x) => console.log(x))
ただし、Promise にはネストが軽減されるだけで、ネストが完全に排除されるわけではありません。たとえば、複数の Promise が連続して実行される場合、最初の Promise のロジックが実行された後、then 関数で 2 番目の Promise を実行する必要があります。これにより、ネストの層が作成されます。さらに、Promise を使用したコードは依然として非同期に見えます。記述されたコードが同期になれば素晴らしいでしょう。
ジェネレーターの非同期処理ジェネレーターに関しては、馴染みのないものではありません。 Node.jsでのコールバック処理では、私たちがよく使うTJ/Coは、ジェネレーターとpromiseを組み合わせて実装されています。Coはcoroutineの略称で、
pythonやluaなどの言語のコルーチンから借用しています。非同期コード ロジックを同期的な方法で作成できるため、コードの読み取りと構成がより明確になり、デバッグが容易になります。 const co = require('co');
const request = require('request');
const options = {
url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
headers: {
'User-Agent': 'request'
}
};
// yield后面是一个生成器 generator
const getRepoData = function* () {
return new Promise((resolve, reject) => {
request(options, (err, res, body) => {
if (err) {
reject(err);
}
resolve(body);
});
});
};
co(function* () {
const result = yield getRepoData;
// ... 如果有多个异步流程,可以放在这里,比如
// const r1 = yield getR1;
// const r2 = yield getR2;
// const r3 = yield getR3;
// 每个yield相当于暂停,执行yield之后会等待它后面的generator返回值之后再执行后面其它的yield逻辑。
return result;
}).then(function (value) {
console.log(value);
}, function (err) {
console.error(err.stack);
});
co はコミュニティでは優れた非同期ソリューションですが、言語標準ではなく、単なる過渡的なソリューションです。 ES7 言語レベルでは、言語レベルの問題を解決するために async/await が提供されます。現在、IE Edge では async / await を直接使用できますが、Chrome と Node.js はまだサポートしていません。幸いなことに、babel はすでに非同期変換をサポートしているため、使用するときに babel を導入するだけで済みます。始める前に、p
reset-stage-3 に必要な async/await コンパイル済みファイルを含める必要があります。 ブラウザ側でもNode.js側でも、以下のパッケージを
インストールする必要があります。 $ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save
babelが公式に提供しているrequireフックメソッドを使用することを推奨します。 require を介して入力すると、次のファイルは必要に応じて Babel によって処理されます。 CommonJs は同期モジュールの依存関係であることがわかっているため、これも実行可能な方法です。このとき、起動用のjsファイルと、実際にプログラムを実行するjsファイルの2つのファイルを記述する必要があります。
実際にプログラムを実行するファイルindex.js
require('babel-core/register'); require('./async.js');
async.jsを開始します
const request = require('request'); const options = { url: 'https://api.github.com/repos/cpselvis/zhihu-crawler', headers: { 'User-Agent': 'request' } }; const getRepoData = () => { return new Promise((resolve, reject) => { request(options, (err, res, body) => { if (err) { reject(err); } resolve(body); }); }); }; async function asyncFun() { try { const value = await getRepoData(); // ... 和上面的yield类似,如果有多个异步流程,可以放在这里,比如 // const r1 = await getR1(); // const r2 = await getR2(); // const r3 = await getR3(); // 每个await相当于暂停,执行await之后会等待它后面的函数(不是generator)返回值之后再执行后面其它的await逻辑。 return value; } catch (err) { console.log(err); } } asyncFun().then(x => console.log(`x: ${x}`)).catch(err => console.error(err));
注:
【関連おすすめ】
1.
JavaScriptの無料ビデオチュートリアルJavaScriptモーションフレームワークの多値モーションの詳細な紹介(4)3.JavaScriptモーションフレームワークにおける複数オブジェクトの任意値移動のサンプルコード共有(3)
以上がJavaScript での async と await の使用法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。