[TIL][Asynchronous]async&aiat JavaScript非同期

5852 ワード
await async JavaScript js 非同期 asynchronous テキストリンク

Asyncは...

asyncは最新に導入されたjavascript非同期方式です!ES 8に追加されましたが、
ES 6も完璧に応用できない私にとって、これはまだよく知られていません.しかし文法の簡潔さは非常に良く、複雑なcallbank&promiseを見てasyncを見ると視力が0.5程度向上したような気がします.
もちろん、最新の文法なのでiEはサポートされていません.
だから、私が勝手に使いたい技術を乱発してはいけないと思います.
function getNewsAndWeather() {
  let obj = {};
  
  return fetch(newsURL)
  .then(data1 => data1.json())
  .then(json => {
    obj.data = json;
    return fetch(weatherURL);
  })
  .then(data2 =>  data2.json())
  .then(json => {
    obj.weather = json;
    return obj;
  })
}
まずfetchを用いてニュースAPIと天気情報APIを受信し,promise chainを用いてオブジェクトとしての関数の統合を実現する.
十分に清潔で一列に並んでいるthenには安心しましたが….
async function getNewsAndWeatherAsync() {
  let obj = {};
  let news = await fetch(newsURL).then(data => data.json());
  let weather = await fetch(weatherURL).then(data => data.json());
  obj.news = news;
  obj.weather = weather;
  return obj;
}
asyncとawaitを使って、このように同期形式で書くことができます!
コードは同期形式で記述されていますが、実際の操作は非同期です!
asyncを使用するには、関数の前にasyncキーを付ける必要があります.

待って...


簡単に言えば、同期して書くことはできますが、実際には非同期処理を行う友人です.
HTTP通信を介してサーバやリクエストや応答を受信するコードについてはawaitを非同期で使用することができる.しかし、waitを適用するコードはpromiseオブジェクトを返さなければなりません!
[TIL]Vue+TypeScirt+Vuex-2を使用
linuxに関する紹介とシステム操作の説明