JAvascript-非同期プログラミング(1)

JavaScriptは同期されています.ブート後に処理コードを同期します.
関数宣言とはvarと関数宣言の最上位レベルである.
callbackには2種類あります.直ちに同期して実行されるSynchronous Callbackと、予測不可能なAsynchoronousがいつ実行されるか.

Synchoronous call back

console.log("1")
setTimeout(() => console.log(2), 1000)
console.log(3)

function printImmi(print){
  print()
}

printImmi(()=>console.log("hi")) // hi

Timeoutのコンソールと順番に実行するコンソールを設定します.ログがあります.子供たちは下図のように、まず1、3、1秒後に2を出力します.

次にprintImmi()関数を作成し、パラメータを使用してprintというコールバック関数を受信し、すぐに実行します.次にprintImmi()を呼び出します.パラメータレスコンソール.出力logの関数を渡します.

出力1と3 hi、出力2.呼び出しプロセスを整理すると、実行時に関数宣言子が反発子になるため、最上位に移動します.
そして、1=>settimeout=>3=>printImmi(()=>consoleとなる.ログ("hi")=>print()=>2.

Asynchoronous

function printWithDelay(print, delay){
  setTimeout(print, delay)
}

printWithDelay(()=>console.log("async callback"), 2000)

上のコードにprintWithDelay関数を追加しました.パラメータとしてprintとdelayを受け入れるsettimeout関数があります.printWithDelay関数を呼び出すときのconsole.出力log()の関数と2秒の遅延を与えると、

反発の観点から、関数宣言子は最上位に位置し、1出力=>settimeout()ブラウザ要求=>3出力=>printImmi(((()=>console.log(「hi」=>print(hi出力)=>printWithDelay()ブラウザリクエスト=>1秒後settimeout()=>2秒後printWithDelay()を実行

地獄

class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if (
                (id === "dongha" && password === 1234) ||
                (id = "dongeun" && password === 1234)
            ) {
                onSuccess(id)
            } else {
                onError(new Error("not found"))
            }
        }, 2000)

    }
    getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if (user === "dongha") {
                onSuccess({
                    name: "dongha",
                    role: "admin"
                })
            } else {
                onError(new Error("no access"))
            }
        }, 1000)
    }
}

まずユーザのid,pass入力を受信する.その後サーバに転送し、ログイン後にonSuccessがログインIDを再取得します.受け取ったidリクエストをロールに渡します.またroleが正常に受信されると,ユーザのobjが受信される.

const userStorage = new UserStorage()
const id = prompt("id")
const password = prompt("password")
userStorage.loginUser(
    id,
    password,
    (user) => {
        userStorage.getRoles(
            user,
            (userWithRole) => {},
            (error) => {}
        )
    },
    (error) => {
        console.log(error)
    }
)

メッセージを受信すると、ユーザーStorageが表示されます.loginユーザにid,passwordを渡し,成功時にユーザデータを受信するコードブロックと失敗時にコードブロックを作成する.

userStorage.loginUser(
  id,
  password,
  user => {},
  error => {console.log(error)}

ユーザーがログインしている場合は、getRolesでユーザーの役割を果たす必要があります.その際にも、キャラクターを受け入れたことや失敗したことが伝わります.

userStorage.loginUser(
  id,
  password,
  user => {
    userStorage.getRoles(
    user, 
    (userWithRole) =>{
      alert(`id = ${userWithRole.name}, role = ${userWithRole.role}`)
    },
    error => {console.log(error)} 
    )
  },
  error => {console.log(error)}

ログイン成功



失敗した場合

に質問
コールバック内でコールし、読み取り可能性を失うと.エラーが発生した場合、デバッグも困難になります.
だからpromiseとawaitを使います.
ソース:https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11