promise初体验

Posted 2020-11-18 ronyjay

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

这些将在后面继续学习