JS非同期ソリューションの発展過程解析

2862 ワード
js。 JavaScript
1.コールバック関数
setTimeout(() => {
    // callback    
}, 1000)
短所:地獄を逆転して、try catchで誤りを捕まえてはいけなくて、リセットできません.
 try {
        setTimeout(() => {
            console.log(aa)
        }, 1000)
    } catch (error) {
        
}
//  ：Uncaught ReferenceError: aa is not defined
地獄を逆転させる根本的な問題は:
  • は順序性に欠けています.地獄に戻るとデバッグが難しくなり、脳の考え方と一致しないです.
  • ネスト関数には結合性があり、変更されると全身を動かします.即ち、(制御反転)
  • ネスト関数が多すぎると、エラーを処理しにくいです.
    function a(functionb(){
    c(function d(){
    
    })
})
    地獄のリベートはどうやって解決しますか?(次の方法を見て)
    2.Promise(ES 6)
  • Promiseには3つの状態があります.pendingは未決です.reolveは成功と理解できます.rejectは拒否と理解できます.
  • 同時Promiseでよく使われる3つの方法thenは、非同期成功実行後のデータ状態がrelove catchに変化したことを示し、非同期失敗後に実行されるデータ状態がreject allに変化したことを示し、複数の無関係のPromiseを一つのPromiseオブジェクトにパッケージ化してthenを用いて一つの配列データを返す.
    • function f(){
    let promise = new Promise((resolve, reject) => {
        //    
        setTimeout(()=>{
            resolve('prom')
        },1000)
        
    })
    return promise
}
function f1() {
 //    Promise       then
     return f().then(data=>{
     //           then  
         return data+'ise'
     })
 }
f1().then(data=>{
     console.log(data)
})
 console.log("hello word")	
   ： hello word
promise
    チェーンにした構造は以下の通りです.
    new Promise((resolve, reject) => {
        //    
        setTimeout(()=>{
            resolve('prom')
        },1000)
        
    }).then(data=>{
        return data+'ise'
    }).then(data=>{
        console.log(data)
    })
    短所:Promiseをキャンセルできません.エラーはコールバック関数で捕獲されます.
    3.Generator(ジェネレータ、es 6)
  • Generatorはメモリを有効に利用する仕組みであり、循環しながら数値を生成する仕組みである.Promiseを組み合わせることにより、非同期コードの特徴をより優雅に書くことができます.関数の実行を制御することができます.
    function *fetch() {
    yield ajax('XXX1', () => {})
    yield ajax('XXX2', () => {})
    yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()
    短所:生成器が一番完璧ではないので、文法が分かりにくいです.
    4.Async/await(非同期待ち、s 7)
    async、awaitは非同期の最終解決策の利点です.コードがはっきりしていて、Promiseのようにthenチェーンをたくさん書く必要がなく、地獄の問題点を修正しました.awaitは非同期コードを同期コードに改造しました.関数の前にasyncを加えると、この関数は非同期関数awaitであり、非同期値の到来を待つeg 1となります.
    async function test() {
  //            ，       Promise.all    
  //         ，              
  await fetch('XXX1')
  await fetch('XXX2')
  await fetch('XXX3')
}
    非同期関数は、より便利なPromiseと結合して、同期コードのスタイルを書く非同期のeg 2:
    function f() {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve("hello word")
        },1000)
    })
}
async function a(){
   var data = await f();
   return data;
}
a().then(data=>{
    console.log(data)
})
    • 時間フォーマットの方法、出力フォーマット:2019-06-20 11:30:50