闇练运用运用jQuery Promise (Deferred)

2024年5月20日 203次阅读 来源: Carl

1 情形再现

之前用nodejs写后端程序时，碰到Promise这个观点，这个东西好呀！不用谢一层一层回调，直接用类似于jQuery的联缀体式格局。厥后碰到bluebird这个库，它就是Promise库中很著名的。我愿望能够把Promise用在前端的ajax要求上，然则我不想又引入bluebird。厥后发明，jquery自身就具有类似于Promise的东西。因而我就jquery的Promise写一些异步要求。

2 不堪回首

看看一看我之前写异步要求的体式格局

// 函数定义
function sendRequest(req,successCallback,errorCallback){
    $.ajax({
        ...
        ...
        success:function(res){
            successCallback(res);
        },
        error:function(res){
            errorCallback(res);
        }
    });
}

// 函数挪用,这个函数的匿名函数写的时刻很轻易失足，而且有时刻难以明白
sendRequest(req,function(res){
    //要求胜利
    ...
},function(res){
    //要求失利
    ...
});

3 面朝大海

下面是我愿望的异步挪用体式格局

sendRequest(req)
.done(function(res){
    //要求胜利
    ...
})
.fail(function(req){
    //要求失利
    ...
});

4 废话少说，放‘码’过来

talk is cheap, show me the code

// 最底层的发送异步要求，做成Promise的情势

App.addMethod('_sendRequest',function(path,method,payload){
    var dfd = $.Deferred();
    $.ajax({
        url:path,
        type:method || "get",
        headers:{
            sessionId:session.id || ''
        },
        data:JSON.stringify(payload),
        dataType:"json",
        contentType : 'application/json; charset=UTF-8',
        success:function(data){
            dfd.resolve(data);
        },
        error:function(data){
            dfd.reject(data);
        }
    });
    return dfd.promise();
});

//依据callId查询灌音文件，不仅仅是异步要求能够做成Promise情势，任何函数都能够做成Promise情势
App.addMethod('_getRecordingsByCallId',function(callId){
    var dfd = $.Deferred(),
        path = '/api/tenantcalls/'+callId+'/recordings';

    App._sendRequest(path)
    .done(function(res){dfd.resolve(res);})
    .fail(function(res){dfd.reject(res);});

    return dfd.promise();
});

// 猎取灌音
App.addMethod('getCallDetailRecordings',function(callId){
    App._getRecordingsByCallId(callId)
    .done(function(res){
        // 猎取效果后衬着数据
        App.renderRecording(res);
    })
    .fail(function(res){
        App.error(res);
    });
});

5 注意事项

  • jQuery的Promise主如果用了jQquery的$.Derferred()要领，一些老版本的jquery并不支撑此要领。
  • jQuery版本必需大于即是1.5，引荐运用1.11.3

6 参考文献

7 末了

以上文章仅供参考，不包完全正确。迎接批评，3q。

    原文作者：Carl
    原文地址: https://segmentfault.com/a/1190000007277681
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞