वादों के साथ सुरुचिपूर्ण अतुल्यकालिक प्रोग्रामिंग

वादे क्या हैं?

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. असफल रूप से पूरा किया गया वादा अस्वीकार कहलाता है। यह कारण, त्रुटि संदेश देता है जो वादे की अस्वीकृति का कारण बना। यह कारण वादे के अंत में .catch () ब्लॉक के माध्यम से प्राप्त किया जा सकता है।

कई वादों के बाद कोड चलाएं

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 ... का उपयोग करते हैं, तो यदि हमें उस फ़ाइल के प्रकार के आधार पर वादा वापस करने के लिए बयान करना है (इस मामले में, हम बूँद और पाठ के बीच चयन करते हैं, लेकिन उदाहरण को अन्य प्रकारों के साथ काम करने के लिए आसानी से बढ़ाया जा सकता है)।
• -, «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. अंत में, यदि दोनों तर्क ठीक हैं, तो सेटटाइमआउट () का उपयोग करके एक निश्चित समय (अंतराल) के बाद संदेश प्रदर्शित करें।

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

• जब अनुरोध सफल हो जाता है , तो असफल हैंडलर अनुरोध के परिणाम के साथ वादा पूरा करता है।
• जब अनुरोध विफल हो जाता है , तो ऑनरोर हैंडलर अनुरोध की त्रुटि के साथ वादे को अस्वीकार कर देता है।

निष्कर्ष