js多回调函数

Posted 2020-12-24 MirrorSpace

多回调问题

前端编程时,大多通过接口交换数据,接口调用都是异步的,处理数据都是在回调函数里.

假如需要为一个用户建立档案,需要准备以下数据,然后调用建档接口

name     // 用户名字 使用接口 get_name(userid)

files       // 用户附件  使用接口 get_atta(userid,name,location)

create_record(userid,name,location) // 调用建档接口

create_files(recordId,userid,files) 　 // 上传用户文件

要解决这个问题,可以先调用name接口,在其回调里调用addr接口,然后在addr的回调里调用create_record.....

这难以想象,代码会写得很长,回调嵌套多层.虽然能解决问题,但是,程序代码顺序执行的思维,很难理清这种问题,如果回调再多一些,代码就难以维护.一看就头晕.

也许同步是入门异步是进阶,前者看,后者思

同步方法

依然使用程序顺序执行的思路,将代码顺序写出,(假如接口是同步得到结果的)

function createRecord(userid){
　　var name = get_name(userid);

　　var files = get_atta(userid,name,location);

　　var recordId = create_record(userid,name,location);

　　create_files(recordId,userid,files);
}

异步方法时,不会得到正确结果,但如果设法让上述代码顺序执行,执行完第1个方法再执行第2个...,也就是同步的思路.那么就能得到正确结果.

顺序等待

等待前面的方法回调后,再执行后面的方法.

  let user = { userid: 1 } // 保存参数
  let isOk = false;// 全部成功时,设为true
　 // 
  function createRecord()
  {
　　 // 获取名字
    if (!user.hasOwnProperty(‘name‘))
    {
　　　　// 异步方法 参数1:数据 2:成功时执行 3:失败时执行
      get_name(user,
        (res) =>
        {
          user.name = res.Name;
　　　　　　console.log(‘获取名字成功‘);
　　　　　　// 成功得到结果后,递归调用.由于if条件,递归时不会重复执行
          createRecord();
        },
        (err) =>
        {
          // 不成功时,方法结束
        });
　　　 // 保证异步成功返回时,才执行后续方法
      return;
    }
    // 获取文件数据
    if (!user.hasOwnProperty(‘files‘))
    {
      get_atta(user,
        (res) =>
        {
          user.files = res.Attas;
　　　　　　console.log(‘获取文件成功‘)
          createRecord();
        },
        (err) =>
        {
          //
        });
      return;
    }
    // 建档接口,返回ID
    if (!user.hasOwnProperty(‘recordId‘))
    {
      .....return;
    }
    // 调用文档接口,有文件时才上传
    if (user.files.length > 0)
    {
      create_files(user,
        (res) =>
        {
　　　　　　// 最后一个接口,当成功返回时,表示全部请求成功了
　　　　　　console.log(‘上传文件成功‘)
          isOk = true;
        },
        (err) =>
        {
          //
        });
    } else
    {
      isOk = true;
    }
  }

每次递归时,只会执行其中一个IF块,IF块就是接口调用,当成功返回时,刷新IF条件,继续递归,失败时不递归.

如此,模拟了"顺序执行".在思路上比较清晰,和同步方法顺序执行的思路一至.

此法缺点多,首先此法是同步接口方法的在形式上的生搬硬套.将所有请求接口的方法按顺序写在一个方法内,使用IF条件判断是否执行,使用递归反复执行.

IF块代码较长时,较多时,整个方法就很长,难以维护.方法作用旨在"控制每个接口方法的顺序执行",只是个代码的容器.

条件逻辑复杂,如果判定条件写错了,或者忘了刷新判定条件,很容易造成无限递归,程序崩溃.

顺序调用

将IF块写成独立方法,在其中调用下一个步骤的方法,直到调用最后一个方法.

  let user = { userid: 1 } // 保存参数
  let isOk = false;// 全部成功时,设为true
  // 获取名字
  function getName(user)
  {
    get_name(user, (res) =>
    {
      user.name = res.Name;
      // 成功后,调用获取文档方法
      getAtta(user);
    });
  }
  // 获取文档
  function getAtta(user)
  {
    get_atta(user, (res) =>
    {
      user.files = res.Attas;
      // 成功后,调用建档方法
      createRecord(user);
    })
  }
  // 建立档案
  function createRecord(user)
  {
    create_record(user, (res) =>
    {
      user.recordId = res.RecordId;
      // 成功后,调用上传文件方法
      createFiles(user);
    })
  }
  // 上传文档方法
  function createFiles(user)
  {
    if (user.files.length == 0)
    {
      isOk = true;
      return;
    }
    create_files(user, (res) =>
    {
      isOk = true;
    })
  }
  // 调用
  getName(user);

这个办法与递归法相比,不将所有方法写到一个方法内,反而拆分为独立方法,每个方法再调用下个方法.最后完成所有请求.

没有条件语句逻辑更清晰明了,各接口方法完成各自取数据任务,有一个起始方法,和最后一个结束方法,链环式的.按顺序一个接一个调用的.如果其中一个出错,那么终止.

各方法独立,依然按照递归法的顺序调用后续方法,相比所有方法写在一起的递归法,只是在形式上分开了,也许好维护些,但缺少"封装"性.

容器方法

结合前两种办法的特点,造一个类管理方法的执行,返回值以及出错信息.

    function moreAjax()
    {
      let self = this;
      // 全部成功时为true
      self.AllOk = false;

      //  方法容器
      let ajaxList = [];

      // 每个方法成功时返回值容器
      self.ResList = [];

      // 每个方法错误时返回值容器
      self.ErrList = [];

      // 方法执行序列
      let index = 0;

      // 添加方法
      self.add = function (method)
      {
        ajaxList.push(method);
      }

      // 开按执行 按add时顺序执行
      self.start = function ()
      {
        if (index == ajaxList.length)
        {
          // 全部成功标识
          self.AllOk = true;
          return;
        }
        //
        ajaxList[index](
          (res) =>
          {
            console.log(‘(success)执行序号‘ + index);
            // 保存回调结果
            self.ResList.push(res);
            // 递归调用,执行下个方法
            index = index + 1;
            self.start();
          },
          (err) =>
          {
            console.log(‘(error)执行序号‘ + index);
            // 保存出错结果
            self.ErrList.push(err);
          });
      }
    }

    // 调用
    let test = new moreAjax();
    // 添加方法
    test.add((success, error) =>{
         get_name(
             (res)=>{success(res)},
             (err)=>{success(err)}
         )
    })
    // 再添加方法
    test.add((success, error) =>{
         get_location(
             (res)=>{success(res)},
             (err)=>{success(err)}
         )
    })
    // 添加最后一个方法
    test.add((success, error) =>{
         success("lastMethod");
         if (send.AllOk)
         {
             console.log(send.ResList);
         } else
         {
             console.log(send.ErrList);
         }
    })
    // 启动
    test.start();

容器法是前两种办法的优化,兼顾"封装"性和灵活性.

add方法添加接口方法,方法要求前两个参数第1个用于成功时执行,第2个用于失败时执行. 每调用一次add,则向ajaxList加入一个方法.

start方法执行后,方法会按add的顺序开始执行,每个方法执行完成时,若成功会记录返回值,若失败记录失败信息.通过ResList和ErrList数组属性,访问这些值.

如果每个方法都正确返回,那么会执行到ajaxList里的最后一个方法,如果其中一个失败,则会停止.

每个方法成功时,ResList增加一个结果.第一个方法成功时,结果值为 ResList[0] 之后的方法通过此属性可访问之前方法返回的结果.