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()
这些将在后面继续学习