js异步处理方案

刘嘿哈

发布于 2022-10-25 14:13:49

2.8K0

发布于 2022-10-25 14:13:49

文章被收录于专栏：js笔记

callback

回调函数是最早的解决异步编程方法原生ajax和setTimoue都是利用回调函数，在未来某一时刻执行指定方法

var Ajax = {
    get: function(url,callback){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

优缺点：优点是单个回调函数简单，利于理解。缺点是多个回调互相依赖，会出现回调地狱，可读性、维护性差

事件监听

事件监听是事件驱动的模式，事件的执行不取决代码的顺序，而是某个事件的发生，假设有俩个函数，为f1绑定一个事件（JQuery写法)，当f1函数发生success事件时，执行函数f2

f1.on('success',f2)

ajax(url,()=>{
  f1.trigger('success',[参数])
})

优缺点：优点是事件监听比较容易理解，可以绑定多个事件，可以"去耦合"，有利于模块化；缺点：整个过程变成事件驱动，运动过程会变的不清晰，阅读代码时，很难看出主流程

发布订阅

假设存在一个信号中心，某个任务完成时，就向信号中心发布(publish)一个信号，其他任务可以向用户中新订阅（subscribe）一个信号，从而知道自己什么时候开始执行，这就是发布订阅模式，又叫观察者模式。vuex和redux都有用到发布订阅

jQuery.subscribe('success',f2);
//对f1进行改写：
function f1(){
    ajax(url,() => {
        //todo
        jQuery.publish('success');//当f1执行完毕后，向消息中心jQuery发布success事件，从而执行f2函数
    })
}
//f2执行完毕后，可以取消订阅
jQuery.unsubscribe('success',f2)

优缺点：优缺点和事件监听差不吧

Promise

Promise是CommonJS工作组提出的一种规范,可以获取异步操作的消息，也是异步处理中常用的一种解决方案。Promise的出现主要是用来解决回调地狱、支持多个并发的请求，获取并发请求的数据并且解决异步的问题。

Promise有三种状态：等待pending、成功fulfied、失败rejected；状态一旦改变，就不会再变化，在Promise对象创建后，会马上执行。等待状态可以变为fulfied状态并传递一个值给相应的状态处理方法，也可能变为失败状态rejected并传递失败信息。任一一种情况出现时，Promise对象的 then 方法就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，均为 Function。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法）。优缺点：promise完美的解决了回调地狱，但是大量的.then同样失去了可读性和可维护性。

Generators/yield

Generators是ES6提供的异步解决方案，它是一个状态器，调用Generator函数返回一个遍历器对象，优缺点：jei决异步编程方法原生ajax和setTimoue都是利用回调函数，在未来某一时刻执行指定方法

var Ajax = {
    get: function(url,callback){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

优缺点：优点是单个回调函数简单，利于理解。缺点是多个回调互相依赖，会出现回调地狱，可读性、维护性差

事件监听

f1.on('success',f2)

ajax(url,()=>{
  f1.trigger('success',[参数])
})

发布订阅

jQuery.subscribe('success',f2);
//对f1进行改写：
function f1(){
    ajax(url,() => {
        //todo
        jQuery.publish('success');//当f1执行完毕后，向消息中心jQuery发布success事件，从而执行f2函数
    })
}
//f2执行完毕后，可以取消订阅
jQuery.unsubscribe('success',f2)

优缺点：优缺点和事件监听差不吧