zoukankan      html  css  js  c++  java
  • jquery Promise和ES6 Promise的区别

    1. Deferred对象有resolve和reject方法,可以直接修改状态

    jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是:

    Deferred对象有resolve()和reject()方法,可以直接随时修改该对象的状态。

    比如:
    var def = $.Deferred();
    
    setTimeout(function(){
        //...
        def.resolve(data);
    });
    
    //可用直接用:
    def.resolve('...') //修改其状态,干扰了真正的异步流程的触发。
    2. jquery的Promise对象是一个受限的Deferred对象,即没有resolve和reject方法的对象

    通过deferred.promsie()可以返回一个jquery版本的promise对象,其实就是一个去除了resolve和reject方法的deferred对象,
    目的是防止意外的修改了promise对象的状态,影响真正的异步操作
     
    3. Deferred对象的then方法的进化
    // version added: 1.5, removed: 1.8
    deferred.then( doneCallbacks, failCallbacks )
    // version added: 1.7, removed: 1.8
    deferred.then( doneCallbacks, failCallbacks [, progressCallbacks ] )
    // version added: 1.8
    deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
    //catch是then( null, fn )的别名
    deferred.catch(failFilter)
    deferred对象的then方法中的回调,在jquery1.8之前是不会修改传递数据的,在1.8之后开始变为filter,与ES6 Promise的then一致,
    会修改传递的数据。

    deferred的done和fail方法也是callback方法,不会修改传递的数据
    deferred.done( doneCallbacks [, doneCallbacks ] )
    deferred.fail( failCallbacks [, failCallbacks ] )
    4. 用jquery Deferred实现公共的ajax
    //done,fail实现,不能直接返回$.ajax,只能返回外部的deferred对象
    app.ajax = function(button, url, data) {
        if (button) {
            button.prop("disabled", true);
        }
        var deferred = $.Deferred();
        $.ajax(url, {
            type: "post",
            dataType: "json",
            data: data
        }).done(function(json) [
            if (json.code !== 0) {
                showError(json.message || "操作发生错误");
                deferred.reject();
            } else {
                deferred.resolve(json);
            }
        }).fail(function() {
            showError("服务器错误,请稍后再试");
            deferred.reject();
        }).always(function() {
            if (button) {
                button.prop("disabled", false);
            }
        });
        return deferred.promise();
    };
    
    //then实现,可以返回$.ajax,因为then会返回内部的新的Promise,将值传递
    app.ajax = function(button, url, data) {
        if (button) {
            button.prop("disabled", true);
        }
        return $.ajax(url, {
            type: "post",
            dataType: "json",
            data: data
        }).then(function(json) {
            if (json.code !== 0) {
                showError(json.message || "操作发生错误");
                //不必关心promise对象是哪个,只需要能将数据传递下去就行
                return $.Deferred().reject().promise();
            } else {
                return $.Deferred().resolve(json).promise();
            }
        }, function() {
            showError("服务器错误,请稍后再试");
            return $.Deferred().reject().promise();
        }).always(function() {
            if (button) {
                button.prop("disabled", false);
            }
        });
    };
    
    // 调用
    app.ajax("do/example", getFormData()).done(function(json) {
        // json.code === 0 总是成立
        // 正常处理 json.data 就好
    });
    参考:https://www.w3cschool.cn/ivmkf/ivmkf-tkpq2518.html
             https://www.cnblogs.com/lvdabao/p/jquery-deferred.html
  • 相关阅读:
    JaveScript简单数据类型(JS知识点归纳二)
    JaveScript变量的简介及其变量的简单使用(JS知识点归纳一)
    JaveScript用二分法与普通遍历(冒泡)
    include、include_once、require、require_once其区别
    POST和GET有什么区别?
    前端向后台发送请求有几种方式?
    jQuery的$.ajax方法响应数据类型有哪几种?本质上原生ajax响应数据格式有哪几种,分别对应哪个属性?
    java根据汉字生成首字母大写
    springboot+使用切面AOP动态获取自定义注解
    JavaScript基础05——严格模式
  • 原文地址:https://www.cnblogs.com/mengff/p/9646953.html
Copyright © 2011-2022 走看看