小程序 js 异步方法 callback 使用

最新推荐文章于 2023-07-18 14:53:14 发布

RenQiang_Cheng

最新推荐文章于 2023-07-18 14:53:14 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 小程序文章标签：小程序 js callback

本文链接：https://blog.youkuaiyun.com/u013276512/article/details/92772365

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

小程序

4 篇文章

订阅专栏

本文通过分析一个小程序项目中的两千行JS文件，探讨了callback在处理异步操作时的优势，包括确保异步调用流程的正确性和简化代码。以伪代码展示了如何在A任务完成后依次执行B和C任务，并提倡即使只有一个后续操作，也应该使用callback以提高代码的可读性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   最近接手了一个小程序项目，其中最大的Js文件在两千行左右，我根据业务逻辑浏览了一遍该js文件，发现很多代码写的都有问题，可优化的内容很多。
下面通过该js文件，总结出了几点，今天先更新一下关于 callback 的使用吧。
   callback 都是基于异步方法使用的，优势：
       1，它保证了异步调用流程的正确性，不会出现下一步没有获取到上一步的参数内容，导致下一步执行失败；
       2，简化代码，让每一步异步操作都不用考虑后续操作内容，只需要调用对应的callback就可以

涉及到的都是伪代码，如下：
如B任务要在A任务执行成功之后执行，简单流程会是：

		main:function(){
			A();
			B();
		}

如果 A 和 B 都是同步方法，没有问题。如果 A 是异步方法（比如wx.request），可能会这样写：

        main: function(){
            A();
        }
        A:function(){
            wx.request({
                url:URL,
                success:function(){
                    B();
                }
            });
        }

如果此时 C 任务同样也要在 A 任务执行成功后执行，此时就要使用 callback了：

        main: function(){
            A(B);
            A(C);
        }
        A:function(successCallback){
            wx.request({
                url:URL,
                success:function(){
                    if(successCallback){
                        successCallback();
                    }
                }
            });
        }

这样写的好处，A方法不需要考虑回调方法的具体内容，只需要专注自己的任务，约定好入参和返回值内容就可以。
上面举例是一个方法可能有两种后续操作，其实一个方法只有一个后续操作，也建议使用callback。

   比如稍微复杂一点儿的情况：
       A 方法需要有参数 name，成功和失败两个回调函数，把结果 res 给到回调函数。代码如下：


        A:function(name, successCallback, failCallback){
            wx.request({
                url: URL,
                success:function(res){
                    if(successCallback){
                        successCallback(res);
                    }
                },
                fail:function(res){
                    if(failCallback){
                        failCallback(res);
                    }
                }
            });
        }
        B:function(res){
            console.log('成功' + res);
        }
        C:function(res){
            console.log('失败' + res);
        }

此时main方法如下写：

      main:function(){
            var name = '';
            A(name, B, C);
        }

这样写 B 和C 方法是否会收到 res 参数，不确定，所以我一般会如下写：

        main: function(){
            var name = '';
            var successCallback = function(res){
                B(res);
            }
            var failCallback = function(res){
                C(res);
            }
            A(name, successCallback, failCallback);
        }

如果觉得把 B 和 C 的逻辑直接写到 A 方法内部，也无所谓反正，代码也不多，那么如果 B和 C 也是异步方法，且也需要有各自的 successCallback和 failCallback呢？是不就复杂了，所以乖乖使用callback吧，会对以后业务逻辑扩展、bug定位、代码阅读都有好处。