美文网首页
用过 Promise 吗?举例说明。 如果要你创建一个返回 Pr

用过 Promise 吗?举例说明。 如果要你创建一个返回 Pr

作者: _William_Zhang | 来源:发表于2018-08-10 10:01 被阅读34次

    用过 Promise 吗?举例说明。
    如果要你创建一个返回 Promise 对象的函数,你会怎么写?举例说明。


    用过 Promise,比如 jQuery 的 AJAX 功能,返回的就是 Promise 对象。

    $.ajax({url:'/xxx', method:'get'}).then(success1, error1).then(success2, error2)
    如果我自己创建 Promise 对象,我会这么写

    function asyncMethod(){
        return new Promise(function (resolve, reject){
            setTimeout(function(){
                成功则调用 resolve
                失败则调用 reject
            },2000)
        })
    }
    
    //封装一个jQuery.ajax 满足Promise 规则
    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)
        })
    }
    //给按钮绑定点击事件
    myButton.addEventListener('click',(e)=>{
        let promise = window.jQuery.ajax({
            url:'/xxx',
            method:'get',
            headers:{
                'content-type':'application/x-www-form-urlencoded',
                'frank':'18'
            }
        })
    
        promise.then(
            (text)=>{console.log(text)},
            (request)=>{console.log(request)}
        )
    })
    

    相关文章

      网友评论

          本文标题:用过 Promise 吗?举例说明。 如果要你创建一个返回 Pr

          本文链接:https://www.haomeiwen.com/subject/cpfkbftx.html