非同期プログラミングをまとめる6つの方法

非同期プログラミング
JavaScriptは として知られています.つまり、一つのスクリプトが実行されてから次のスクリプトが実行されます.二つのスクリプトが同時に実行できません.もしあるスクリプトが長いなら、後のスクリプトは全部並ばなければなりません.全体のプログラムの実行が遅延されます.以下はいくつかの非同期プログラムのまとめです.あなたと一緒に勉強したいです.

コールバック関数

事件の傍受

購読モードを発表します.

Promise

Generator(ES 6)

async(ES 7)

非同期プログラミングの伝統的な解決策:コールバック関数とイベントモニター
初期例:2つの関数があると仮定して、f 1とf 2、f 1は一定の時間が必要な関数です.

function f1() {
    setTimeout(function(){
        console.log('    f1')
    },1000)
}
function f2() {
    console.log('    f2')
}

コールバック関数
f 1は一定の時間が必要な関数であるので、f 2をf 1の と書いてもいいです.同期動作を非同期動作に変えてもいいです.f 1はプログラムの実行をブロックしません.f 2も待つ必要がないです.例えば、JQueryのajax.
コールバック関数のデモ:

function f1(f2){
    setTimeout(function(){
        console.log('    f1')
    },1000)
    f2()
}
function f2() {
    console.log('    f2')
}

効果は以下の通りです
まとめ:コールバック関数は実現しやすく、理解しやすいですが、何回も繰り返すとコードの結合が高くなります.
事件の傍受
スクリプトの実行はコードの順序に依存せず、あるイベントが発生するかどうかに依存します.
事件傍受のデモ

$(document).ready(function(){
     console.log('DOM    ready')
});

購読モードを公開
リリース/購読モードは、メッセージセンターを利用して、投稿者がメッセージセンターにメッセージを投稿し、購読者がメッセージセンターからメッセージを購読します.vueの親子コンポーネントの間の値のようです.
購読モードをリリースするデモ

//  done  
$('#app').on('done',function(data){
    console.log(data)
})
//    
$('#app').trigger('done,'haha')

Promise
Promiseは実際にオブジェクトで、非同期操作のメッセージを得ることができます.Promiseオブジェクトは3つの状態があります.Promiseの状態が変化すると、何の変化もなく、コールバック関数がチェーン式に変化します.
Promiseパッケージ非同期要求デモ

export default function getMethods (url){
    return new Promise(function(resolve, reject){
        axios.get(url).then(res => {
            resolve(res)
        }).catch(err =>{
            reject(err)
        })
    })
}

getMethods('/api/xxx').then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

Generator
Generator関数は、複数の内部状態をカプセル化した状態マシーンです.Generator関数を実行するとエルゴードオブジェクトに戻ります.このオブジェクトのnext()を使用すると、Generator関数の内部の状態をすべて巡回できます.
形式的には,Generator関数は一般関数であるが,二つの特徴がある.一つは、functionキーワードと関数名の間に星番号があります.第二に、関数の内部はyield表現を使っています.yieldは実行を一時停止するマークです.
next()メソッドがyield表現に出会うと、後の動作を一時停止し、yieldの後に続くその表現の値を返した対象のvalue属性値とします.
Generatorのデモ

function *generatorDemo() {
  yield 'hello';
  yield  1 + 2;
  return 'ok';
}

var demo = generatorDemo()

demo.next()   // { value: 'hello', done: false } 
demo.next()   // { value: 3, done: false } 
demo.next()   // { value: 'ok', done: ture } 
demo.next()   // { value: undefined, done: ture } 

async
async関数はPromiseオブジェクトを返します.thenメソッドを使ってコールバック関数を追加できます.async関数内部のreturn文の値は、thenメソッドのコールバック関数のパラメータになります.関数が実行されると、awaitに出会うと先に戻り、非同期操作が完了するまで関数の後の文を実行します.
1.awaitコマンドの後ろにはPromiseオブジェクトが戻ってきます.運転結果はrejectかもしれませんので、awaitコマンドをtry...catchコードブロックに置いたほうがいいです.
asyncのdemo 1

async function demo() {
  try {
    await new Promise(function (resolve, reject) {
      // something
    });
  } catch (err) {
    console.log(err);
  }
}

demo().then(data => {
    console.log(data)  // 
})

参考文献https://developers.google.com...http://es6.ruanyifeng.com/