Pemrograman asinkron yang elegan dengan janji-janji

Apa itu janji?

function handle CallButton(evt){
    setStatusMessage('Calling...')
    navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(chatStream => {
        selfViewElem.srcObject = chatStream
        chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream))
        setStatusMessage('Connected')
    }).catch(err => {
        setStatusMessage('Failed to connect')
    })
}

Masalah Fungsi Panggilan Balik

1. Pilih isian. Ini bisa memakan waktu lama jika Anda memikirkannya untuk waktu yang lama, dan gagal jika Anda berubah pikiran dan memesan kari.
2. Kami memesan. Memasak pizza membutuhkan waktu dan mungkin gagal jika restoran kekurangan bahan-bahan yang diperlukan.
3. Kami mendapatkan pizza dan makan. Menerima pizza mungkin gagal jika, misalnya, kami tidak dapat membayar pesanan.

chooseToppings(function(toppings){
    placeOrder(toppings, function(order){
        collectOrder(order, function(pizza){
            eatPizza(pizza)
        }, failureCallback)
    }, failureCallback)
}, failureCallback)

Kami menggunakan janji

chooseToppings()
.then(function(toppings){
    return placeOrder(toppings)
})
.then(function(order){
    return collectOrder(order)
})
.then(function(pizza){
    eatPizza(pizza)
})
.catch(failureCallback)

chooseToppings()
.then(toppings =>
    placeOrder(toppings)
)
.then(order =>
    collectOrder(order)
)
.then(pizza =>
    eatPizza(pizza)     
)
.catch(failureCallback)

chooseToppings()
.then(toppings => placeOrder(toppings))
.then(order => collectOrder(order))
.then(pizza => eatPizza(pizza))
.catch(failureCallback)

chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback)

• Sebuah janji hanya terpenuhi satu kali (sukses atau gagal). Itu tidak dapat dieksekusi dua kali atau beralih dari sukses ke kegagalan atau sebaliknya setelah operasi selesai.
• Jika janji itu selesai, dan kami menambahkan fungsi callback untuk memproses hasilnya, maka fungsi ini akan dipanggil, terlepas dari kenyataan bahwa peristiwa terjadi sebelum fungsi ditambahkan.

Sintaks janji dasar: contoh nyata

let promise = fetch('coffee.jpg')

response => response.blob()

function (response){
    return response.blob()
}

let promise2 = promise.then(response => response.blob())

let promise3 = promise2.then(myBlob => {

})

let objectURL = URL.createObjectURL(myBlob)
let image = document.createElement('img')
image.src = objectURL
document.body.appendChild(image)

Respon Kegagalan

let errorCase = promise3.catch(e => {
    console.log('There has been a problem with your fetch operation: ' + e.message)
})

Blok penggabungan

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
    let objectURL = URL.createObjectURL(myBlob)
    let image = document.createElement('img')
    image.src = objectURL
    document.body.appendChild(image)
})
.catch(e => {
    console.log('There has been a problem with your fetch operation: ' + e.message)
})

Kesimpulan Terminologi Janji

1. 1. Janji yang berhasil diselesaikan disebut terpenuhi. Ini mengembalikan nilai yang bisa diperoleh melalui rantai dari. Kemudian () di akhir janji. Fungsi eksekusi di blok .then () berisi nilai yang dikembalikan oleh janji.
2. 2. Janji yang gagal diselesaikan disebut ditolak. Ini mengembalikan alasan, pesan kesalahan yang mengarah pada penolakan janji. Alasan ini dapat diperoleh melalui blok .catch () di akhir janji.

Jalankan kode setelah beberapa janji

Promise.all([a,b,c]).then(values => {
        ...
})

let a = fetch(url1)
let b = fetch(url2)
let c = fetch(url3)

Promise.all([a, b, c]).then(values => {
    ...
})

function fetchAndDecode(url, type){
    return fetch(url).then(response => {
        if(type === 'blob'){
            return response.blob()
        } else if(type === 'text'){
            return response.text()
        }
    }).catch(e => {
        console.log('There has been a problem with your fetch operation ' + e.message)
    })
}

• Pertama, janji pengembalian kedua tergantung pada jenis nilai. Di dalam fungsi eksekusi, kita menggunakan pernyataan if ... else jika untuk mengembalikan janji tergantung pada jenis file yang perlu kita dekode (dalam hal ini, kita memilih antara gumpalan dan teks, tetapi contohnya dapat dengan mudah diperluas untuk bekerja dengan jenis lain).
• -, «return» fetch(). , (.. , blob() text(), , , ). , return .

let coffee = fetchAndDecode('coffee.jpg', 'blob')
let tea = fetchAndDecode('tea.jpg', 'blob')
let description = fetchAndDecode('description.txt', 'text')

Promise.all([coffee, tea, description]).then(values => {

})

console.log(values)
//       
let objectURL1 = URL.createObjectURL(values[0])
let objectURL2 = URL.createObjectURL(values[1])
let descText = values[2]

//  
let image1 = document.createElement('img')
let image2 = document.createElement('img')
image1.src = objectURL1
image2.src = objectURL2
document.body.appendChild(image1)
document.body.appendChild(image2)

//  
let para = document.createElement('p')
para.textContent = descText
document.body.appendChild(para)

Jalankan kode setelah memenuhi / menolak janji

myPromise
.then(response => {
    doSomething(response)
    runFinalCode()
})
.catch(e => {
    returnError(e)
    runFinalCode()
})

myPromise
.then(response => {
    doSomething(response)
})
.catch(e => {
    returnError(e)
})
.finally(() => {
    runFinalCode()
})

function fetchAndDecode(url, type){
    return fetch(url).then(response => {
        if(type === 'blob'){
            return response.blob()
        } else if(type === 'text'){
            return response.text()
        }
    }).catch(e => {
        console.log(`There has been a problem with your fetch operation for resource "${url}": ${e.message}`)
    }).finally(() => {
        console.log(`fetch attempt for "${url}" finished.`)
    })
}

Menulis Janji Anda Sendiri

Janji Pembuat ()

let timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(function(){
        resolve('Success!')
    }, 2000)
})

timeoutPromise
.then((message) => {
    alert(message)
})

timeoutPromise.then(alert)

Kami bekerja dengan penolakan terhadap sebuah janji

function timeoutPromise(message, interval){
    return new Promise((resolve, reject) => {
        if(message === '' || typeof message !== 'string'){
            reject('Message is empty or not a string')
        } else if(interval < 0 || typeof interval !== number){
            reject('Interval is negative or not a number')
        } else{
            setTimeout(function(){
                resolve(message)
            }, interval)
        }
    })
}

1. Pertama, kami memeriksa pesannya. Jika kosong atau bukan string, maka kami menolak janji itu dan melaporkan kesalahan.
2. Kedua, kami memeriksa penundaan waktu. Jika itu negatif atau bukan angka, maka kami juga menolak janji itu dan melaporkan kesalahan.
3. Akhirnya, jika kedua argumen OK, tampilkan pesan setelah waktu tertentu (interval) menggunakan setTimeout ().

timeoutPromise('Hello there!', 1000)
.then(message => {
    alert(message)
}).catch(e => {
    console.log('Error: ' + e)
})

Contoh yang lebih realistis.

function promisifyRequest(request){
    return new Promise(function(resolve, reject){
        request.onsuccess = function(){
            resolve(request.result)
        }

        request.onerror = function(){
            reject(request.error)
        }
    })
}

• Ketika permintaan berhasil , pawang onsuc memenuhi janji dengan hasil dari permintaan.
• Ketika permintaan gagal , penangan onerror menolak janji dengan kesalahan permintaan.

Kesimpulan