برمجة غير متزامنة أنيقة مع وعود

ما هي الوعود؟

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')
    })
}

مشكلة وظائف رد الاتصال

1. اختر الحشوة. قد يستغرق ذلك بعض الوقت إذا فكرت في الأمر لفترة طويلة ، وفشل إذا غيرت رأيك وطلبت الكاري.
2. نضع طلبية. يستغرق طهي البيتزا بعض الوقت وقد يفشل إذا كان المطعم يفتقر إلى المكونات الضرورية.
3. نحصل على البيتزا ونأكل. قد يفشل استلام البيتزا إذا لم نتمكن ، على سبيل المثال ، من دفع ثمن الطلب.

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

نستخدم الوعود

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)

• الوعد يتحقق مرة واحدة فقط (النجاح أو الفشل). لا يمكن تنفيذه مرتين أو التبديل من النجاح إلى الفشل أو العكس بعد اكتمال العملية.
• إذا اكتمل الوعد ، وأضفنا وظيفة رد اتصال لمعالجة نتائجه ، فسيتم استدعاء هذه الوظيفة ، على الرغم من وقوع الحدث قبل إضافة الوظيفة.

بناء الوعد الأساسي: مثال حقيقي

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)

استجابة الفشل

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

دمج الكتلة

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)
})

استنتاجات الوعد المصطلحات

1. 1. يسمى الوعد المكتمل بنجاح. تقوم بإرجاع القيمة التي يمكن الحصول عليها من خلال السلسلة من .then () في نهاية الوعد. تحتوي وظيفة التنفيذ في كتلة .then () على القيمة التي أرجعها الوعد.
2. 2. يسمى الوعد الذي لم ينجح بنجاح برفض. تعيد السبب ، رسالة الخطأ التي أدت إلى رفض الوعد. يمكن الحصول على هذا السبب من خلال كتلة .atch () في نهاية الوعد.

قم بتشغيل التعليمات البرمجية بعد عدة وعود

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)
    })
}

• أولاً ، يعتمد وعد العودة الثاني على نوع القيمة. داخل وظيفة التنفيذ ، نستخدم عامل التشغيل if ... آخر إذا كان لإرجاع الوعد بناءً على نوع الملف الذي نحتاج إلى فك تشفيره (في هذه الحالة ، نختار بين blob والنص ، ولكن يمكن توسيع المثال بسهولة للعمل مع أنواع أخرى).
• -, «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)

قم بتشغيل الكود بعد تنفيذ / رفض الوعد

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.`)
    })
}

كتابة وعدك الخاص

وعد المنشئ ()

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

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

timeoutPromise.then(alert)

نحن نعمل برفض الوعد

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. أولاً ، نتحقق من الرسالة. إذا كانت فارغة أو ليست سلسلة ، فإننا نرفض الوعد ونبلغ عن خطأ.
2. ثانيًا ، نتحقق من التأخير الزمني. إذا كان سلبيًا أو ليس رقمًا ، فإننا نرفض أيضًا الوعد ونبلغ عن خطأ.
3. أخيرًا ، إذا كانت كلتا الوسيطتين على ما يرام ، فقم بعرض الرسالة بعد وقت معين (فاصل زمني) باستخدام setTimeout ().

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

مثال أكثر واقعية.

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

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

• عند نجاح الطلب ، يقوم معالج onsuccess بالوفاء بالوعد الناتج عن الطلب.
• عندما يفشل الطلب ، يرفض معالج onerror الوعد بخطأ الطلب.

استنتاج