zoukankan      html  css  js  c++  java
  • promise初体验

    window.jQuery = function(nodeOrSelector) {
        let nodes = {}
        nodes.addClass = function() {}
        nodes.html = function() {}
        return nodes
    }
    
    window.jQuery.ajax = function({url,method,body,headers}) {
        return new Promise(function(resolve,reject) {
                let request = new XMLHttpRequest()
    
                request.open(method, url) //配置request
                for(let key in headers) {
                    let value = headers[key]
                    request.setRequestHeader(key, value)
                }
                request.onreadystatechange = () => {
                    if(request.readyState === 4) {
                        if(request.status >= 200 && request.status < 300) {
                            resolve.call(undefined, request.responseText)
                        } else if(request.status >= 400) {
                            reject.call(undefined, request)
                        }
                    }
                }
                request.send(body)
            })
        }
    
    window.$ = window.jQuery
    
    mybutton.addEventListener('click', (e) => {
        window.jQuery.ajax({
            url: '/xxx',
            method: 'get',
            headers: {
                name: 'Rony'
            }
        }).then(()=>{console.log('suc')},
            ()=>{console.log('fail')})
    })

    第一次接触promise,一点浅显的认知

    这种写法的好处在于,先统一执行AJAX逻辑,不关心如何处理结果,然后,根据结果是成功还是失败,在将来的某个时候调用success函数或fail函数。

    以上代码中,如果成功将执行resolve.call(undefined, request.responseText)

    失败将执行reject.call(undefined, request)

    这样执行代码和处理结果的代码就清晰的分开了

    除此之外,promise还可以串行执行异步任务,比如需要先做任务1,如果成功后再做任务2,任何任务失败则不再继续并执行错误处理函数。

    也可以并行执行异步任务,试想一个页面聊天系统,我们需要从两个不同的URL分别获得用户的个人信息和好友列表,这两个任务是可以并行执行的,用Promise.all()

    这些将在后面继续学习

  • 相关阅读:
    [LeetCode] 23. Merge k Sorted Lists ☆☆
    [LeetCode] 22. Generate Parentheses ☆☆
    [LeetCode] 21. Merge Two Sorted Lists ☆
    [LeetCode] 20. Valid Parentheses ☆
    [LeetCode] 19. Remove Nth Node From End of List ☆
    [LeetCode] 18. 4Sum ☆☆
    [LeetCode] 17. Letter Combinations of a Phone Number ☆☆
    [LeetCode] 16. 3Sum Closest ☆☆☆
    [LeetCode] 15. 3Sum ☆☆
    [LeetCode] 14. Longest Common Prefix ☆
  • 原文地址:https://www.cnblogs.com/ronyjay/p/9193466.html
Copyright © 2011-2022 走看看