JavaScript での async と await の使用法の詳細な紹介

この記事では主に Javascript での async/await の使い方を紹介します。async/await がどのように機能するかについて説明します。興味のある方は学習してください。優れた非同期ソリューション。現時点では、async/await の機能はすでにステージ 3 の推奨事項になっています。この記事では、async/await の仕組みについて説明します。この記事を読む前に、Promise などの ES6 関連の知識を持っていることを望みます。ジェネレーターと知識。

async/await を詳しく紹介する前に、ES6 の現在の優れた非同期処理メソッドを確認してみましょう。次の例では、データ リクエストは Node.js のリクエスト モジュールを使用し、データ インターフェイスはサンプル デモンストレーションとして Github v3 API ドキュメントによって提供されるリポジトリ コード リポジトリ詳細 API を使用します。

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の略称で、

や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

-stage-3 に必要な async/await コンパイル済みファイルを含める必要があります。 ブラウザ側でもNode.js側でも、以下のパッケージを

する必要があります。

$ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save

実際にプログラムを実行するファイル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));

注:

asyncはパッケージの内容が同期的に実行できることを宣言するために使用され、awaitは実行シーケンスを制御しますawait が実行されるたびに、プログラムは一時停止して await の戻り値を待ってから、後続の await を実行します。
また、await の後に呼び出される関数は、Promise を返す必要があります。この関数はジェネレーターではなく、通常の関数でもかまいません。
await は非同期関数でのみ使用できます。通常の関数で使用するとエラーが報告されます。
await コマンドの背後にある Promise
4. オブジェクト

   は拒否される可能性があるため、await コマンドを try...catch コード ブロックに置くことが最善です。

実際、async/await の使用法は co の使用法と似ています。 await と yield はどちらも一時停止を示し、内部のコードが同期的に処理できることを示すために async または co のレイヤーでラップされます。 。ただし、async/await の後に続く関数は、追加の処理をジェネレーターとして記述する必要はありません。

【関連おすすめ】

1.

2.

3.JavaScriptモーションフレームワークにおける複数オブジェクトの任意値移動のサンプルコード共有(3)

4.JavaScriptモーションフレームワークにおける手ぶれ問題と中断対句の解決方法(2)

5. JavaScript モーション フレームワークは正と負の速度の丸めの問題をどのように解決しますか (1)

以上がJavaScript での async と await の使用法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。