JavaScriptの学習[11.Async、Await処理Promisを使用する]

2504 ワード
async JavaScript js await テキストリンク
asyncとawaitは約束を簡単に同期させるように見えます.
async function 함수명() {
  await 비동기_처리_메서드_명();
}

Async

function fetchUser() {
    // do network 10 sec.....
    return 'minbro'
}

const user = fetchUser()
console.log(user)
/* 화면 보이는 코드 */
ここでasyncを行わない場合は、fetchUserの終了を待ち続け、画面を出力します.この間、プレイヤーはずっと空白の画面を見ていました.
したがって,以前に学習したPromiseを使用すると,これと同様である.
function fetchUser() {
    return new Promise((resolve, reject) => {
        // do network 10 sec.....
        resolve('minbro')
    })
}

const user = fetchUser()
user.then(console.log)
console.log(user)
// Promise {<fulfilled>: "minbro"}
// minbro
このような煩雑な解析,拒否,Promiseを用いずにasyncを用いて表現することもできる.
async function fetchUser() {
    // do network 10 sec.....
    return 'minbro'
}

const user = fetchUser()
user.then(console.log)
console.log(user)
// Promise {<fulfilled>: "minbro"}
// minbro
asyncを使ってもpromiseはそのまま使えます!
Syntactic Sugar!

Await

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

async function getApple() {
    await delay(3000)
    return '🍎'
}

async function getBanana() {
    await delay(3000)
    return '🍌'
}

async function pickFruits() {
    const apple = await getApple()
    const banana = await getBanana()
    return `${apple} + ${banana}`
}

pickFruits().then(console.log)
// 6초 후
// 🍎 + 🍌
ここの問題は、りんごとバナナを別々に出力するのに3秒、全部で6秒かかります!今は並列処理が必要な時だ!

Promise APIs

function pickAllFruits() {
    return Promise.all([getApple(), getBanana()])
        .then(fruits => fruits.join(' + '))
}
pickAllFruits().then(console.log)
Promiseのall APIを使えばいい!
=>Promise配列は、タスクを並列に完了するまですべてのPromiseを集合する役割です.
結果値は[🍎,🍌] いいですよ.したがってjoinを使用してstringとして作成します!
function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()])
}
pickOnlyOne().then(console.log)
raceという名前のapiを使用すると、最初に値を返したPromiseだけがその値を渡します!
React, code refactoring
【Vue.js】リストのデータを Local Storage で永続化する方法