js多回调函数

多回调问题

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

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

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] 之后的方法通过此属性可访问之前方法返回的结果.

巴特西

js多回调函数

最新文章

热门文章