await与非同期

1-1.await

awaitどのことを意味待っています。これは、式が続くことができます。値（例えば、文字列、数値、オブジェクト、など通常は）、戻り値は、値そのものである場合。
しかし、最も一般的なのは続いているpromiseオブジェクト。await我々は待つだろうpromiseによって状態pendingターンfulfilledかrejected。それがブロックされます。この期間中は、後者のawait文文の実装を延期しました。
場合promise結果がその目的であるresolve、それがあろうresolveように値のawait式の計算結果。

シンタックスシュガーの性質

実際には、awaitそしてasyncそれは自分自身であるpromise糖衣構文プログラミングの。2つの用法を比較。

// 异步promise化的函数--模拟请求后端接口
function asyncFn () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if (true) {
        console.log('resolve console')
        resolve('resolve return')
      } else {
        reject('reject return')
      }
    }, 2000)
  })
}

// promise
asyncFn().then((res) => {
  console.log(res)
}, (err) => {
  console.log(err)
})

// await
try {
  var res = await asyncFn()
  console.log(res)
} catch(err) {
  console.log(err)
}

// 如果有第二次请求的话，promise需要在then方法继续调用，再用then接受，过多的嵌套依然会增加阅读难度。而await async只需要像写同步代码一样继续书写就可以，它是解决异步编程回调地狱的终极手段。

例の一つ

// ps:由于js本身现在已经限制了await必须用在async函数中，否则会报错。所以请将下面的复制粘贴到浏览器控制台查看结果

function asyncFn () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if (true) {
        console.log('resolve console')
        resolve('resolve return')
      } else {
        reject('reject return')
      }
    }, 2000)
  })
}

var value1 = await asyncFn()
var value2 = await 'plain text'
console.log(value1)
console.log(value2)

//浏览器会依次打印 ‘resolve console’ ‘resolve return’ ‘plain text’

例二

あなたは結果について質問がある場合は、取り外しフロント待つasyncFn、その後、一度ブラウザで慰めることができます。

これら二つは、あなたが第二見つける、比較resolve console最終的な印刷を行うと、最初は、最初の印刷です。

根本的な理由は、最初のコードがあることをawait待って、後ろの文の実行をブロックpromise結果を決定するために、ステートメントの終了後に継続します。

例三

両方の場合、前者2つのケースは、想像することができawait、後者は続いているpromiseオブジェクト。そして、第二には、待っている時間は、それ自体が初めてのを待っプラスで待つawait時間を待っています

function asyncFn1 () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if (true) {
        console.log('resolve console1')
        resolve('resolve return1')
      } else {
        reject('reject return1')
      }
    }, 2000)
  })
}

function asyncFn2 () {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      if (true) {
        console.log('resolve console2')
        resolve('resolve return2')
      } else {
        reject('reject return2')
      }
    }, 2000)
  })
}

var value1 = await asyncFn1()
var value2 = await asyncFn2()

// 复制并执行，会发现2s后打印了‘resolve console1’，4s后打印了‘resolve console2’

考えます

// 已经知道了await会阻塞代码的执行，如果我们在实际开发中有这样的代码。

function fn () {
  // 假设request是请求后端接口
  var value = await request()
  console.log(value)
  // ...
}
fn()

var arr = []
arr.push('1')
// ...其他不依赖后端接口逻辑

FN呼び出し、後await閉塞、以下のロジックに影響を与えるにバインドされています。実際の開発では、唯一の応答5Sバックエンドインターフェイス場合は、次のコードは、5秒待つ必要があります。これは、この現象を解決するために、私たちに必要な、明らかに不合理であるasync文を。

1-2.async

私たちが知っている前にawait、コードの実装がブロックされます。欠点を解決するための手段は、あるasync声明。

async function asyncFn () {
  return 'async'
}
console.log(asyncFn())

あなたが見つけるコンソールの印刷は、印刷されるpromiseオブジェクト。そして、あるPromise.resolveオブジェクト。resolve値はasyncFn、戻り値の関数async。

関数が値を返さない場合、次のようになります返すことが自然ですPromise.resolve(undefined)。

実際には、理由async文が解決することができますawaitので、ブロッキング問題をasync文は機能層行われるpromise内部の非同期操作が実際にあるように、パッケージをpending変換したresolveかrejectのプロセス。自身が自由に関数内で呼び出すことができます。この機能はawait、もはや外部のコード実行の機能には影響を与えません。

1-1.await

シンタックスシュガーの性質

例の一つ

例二

例三

考えます

1-2.async

おすすめ