将前后端交互同步化(本篇封装了一下微信小程序的请求)

2019-07-14 admin

今天自己写小程序的时候,近乎被异步搞到崩溃,不停地嵌套回调(我知道 await 和 promise,但是我嫌promise写起来跟裹脚布似的,而await我怕有兼容性问题也从来没有试过) 言归正传,将小程序的异步调用变为同步(以下教程适用于所有异步,只是给小程序做了一下封装)。 原理:增加事件队列,采用事件回调来完成同步化

以下代码复制粘贴到控制台即可测试效果; 这里直接写es6代码了,先写个定时器版本的方便测试与理解 先写个无注释版本的,方便直接看代码

class Async{

        constructor() {
            this.list = [];
            this.sock = false;
        }

        request(obj) {
            setTimeout(() => {
                console.log(obj);
                this.sock = false;
                if(this.list[0])
                    this.do(this.list.shift());
            }, 1000)
        }

        do(requestObj, async) {
            if(!async) {
                return this.request(requestObj);
            }
            if(this.sock) {
                this.list.push(requestObj);
            }else {
                this.sock = true;
                this.request(requestObj);
            }
        }

    }

-----------以下为注释版本-----------

     class Async{

        constructor() {
            this.list = []; // 定义 执行队列
            this.sock = false; // 判断是否有任务正在执行
        }

        request(obj) {
            setTimeout(() => {
                console.log(obj); 
                this.sock = false; // 重置为没有任务正在执行
                if(this.list[0]) // 如果队列中还有任务,执行下一个任务
                    this.do(this.list.shift());
            }, 1000) // 模拟一个异步,一秒后执行任务,执行完成后执行下一个异步任务
        }

        do(requestObj) {
            if(this.sock)  // 如果有任务在执行
                this.list.push(requestObj); // 将当前任务其增加到任务队列
            else {
                this.sock = true; // 否则开始执行当前任务并设定'有任务在执行'
                this.request(requestObj);
            }
        }
    }

    var x = new Async();
    x.do({url: 1}); // 一秒后打印 url: 1
    x.do({url: 2}); // 两秒后打印 url: 2

但是同步只是异步无可奈何的选择,所以不能全部否决掉异步

 class Async{

        constructor() {
            this.list = []; // 定义 执行队列
            this.sock = false; // 判断是否有任务正在执行
        }

        request(obj) {
            setTimeout(() => {
                console.log(obj); 
                this.sock = false; // 重置为没有任务正在执行
                if(this.list[0]) // 如果队列中还有任务,执行下一个任务
                    this.do(this.list.shift());
            }, 1000) // 模拟一个异步,一秒后执行任务,执行完成后执行下一个异步任务
        }

        do(requestObj, sync) {
            if(!sync) // 判断是否需要同步,如果需要再加入到队列,不然直接执行
                return this.request(requestObj); 
            if(this.sock)  // 如果有任务在执行
                this.list.push(requestObj); // 将当前任务其增加到任务队列
            else {
                this.sock = true; // 否则开始执行当前任务并设定'有任务在执行'
                this.request(requestObj);
            }
        }
    }

    var x = new Async();
    x.do({url: 1}, true); // 一秒后打印 url: 1
    x.do({url: 2}, true); // 两秒后打印 url: 2
    x.do({url: 3}); // 一秒后打印 url: 3

然后加入小程序的接口调用方法

class AsyncRequest{

        constructor() {
            this.list = []; // 定义 执行队列
            this.sock = false; // 判断是否有任务正在执行
        }

         request(obj) {
            wx.request({
                      url: obj.url,
                    data: obj.data,
                    header: {
                       'content-type': 'application/json' 
                    },
                      success: res => {
                        obj.cb(res);
                        if(this.list[0])
                            this.do(this.list.shift());
                      }
            })
        }

        do(requestObj, async) {
            if(!async) // 判断是否需要同步,如果需要再加入到队列,不然直接执行
                return this.request(requestObj); 
            if(this.sock)  // 如果有任务在执行
                this.list.push(requestObj); // 将当前任务其增加到任务队列
            else {
                this.sock = true; // 否则开始执行当前任务并设定'有任务在执行'
                this.request(requestObj);
            }
        }
    }
    var x = new AsyncRequest();
    x.do({url: 1, data: {test: 1}, cb: ()=> {}}, true); // 先请求接口1
    x.do({url: 2}, true); // 1 请求完成后请求接口2
    x.do({url: 3}); // 和 1 同时 发起请求

[转载]原文链接:https://segmentfault.com/a/1190000019755483

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69719.html

文章标题:将前后端交互同步化(本篇封装了一下微信小程序的请求)

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
回到顶部