promise处理多个相互依赖的异步请求(实例讲解)

在项目中，经常会遇到多个相互依赖的异步请求。如有a,b,c三个ajax请求，b需要依赖a返回的数据，c又需要a和b请求返回的数据。如果采用请求嵌套请求的方式自然是不可取的。导致代码难以维护，如何请求很多。会出现很多问题。

Promise就是解决多个异步请求的问题。 Promise是ES6提供的一个对象，用来传递异步操作的消息。

Promise有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。

直接上代码。有a,b请求，b依赖a的请求数据。如下：

function a(){
      return new Promise(function(res,rej){
        $.ajax({
          url:"a",
          type: "GET",
          async:true,
          dataType:"json",
          success:function(data){
            console.log(data,"a");
            res(data);
          }
        })
      });
    }
    function b(data){
      console.log(data,"data");
      return new Promise(function(res,rej){
        $.ajax({
            url:"b",
            type: "POST",
            async:true,
            data:JSON.stringify(data),
            dataType:"json",
            success:function(data){
              console.log(data,"b");
              res();
            }
          })
      });
    }
    $("#btn").click(function(){
      a().then(function (data){
        b(data);
      }).then(function(){
      })
    })

接口url在网上找了一个，可以看运行结果：

以上这篇promise处理多个相互依赖的异步请求(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response

  • 使用Promise链式调用解决多个异步回调的问题

    介绍 所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 缺少场景支撑,对于新手而言,很难理解Promise的意义. 在<你不知道的JavaScript中>有个场景介绍得很形象: 我走到快餐店的柜台,点了一个芝士汉堡.我交给收银员1.47美元.通过下订单并付款,我已经发出了一个对某个值(就是那个汉堡)的请求.我已经启 动了一次交易. 但是,通常我不能马上就得到这个汉堡.收银员会交给我某个东西来代替汉堡:一张带有 订单号的收据.订单号就是一个

  • promise处理多个相互依赖的异步请求(实例讲解)

    promise处理多个相互依赖的异步请求(实例讲解)

    在项目中,经常会遇到多个相互依赖的异步请求.如有a,b,c三个ajax请求,b需要依赖a返回的数据,c又需要a和b请求返回的数据.如果采用请求嵌套请求的方式自然是不可取的.导致代码难以维护,如何请求很多.会出现很多问题. Promise就是解决多个异步请求的问题. Promise是ES6提供的一个对象,用来传递异步操作的消息. Promise有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和 Rejected(已失败). 直接上代码.有a,b请求,b依赖

  • AJAX实现简单的注册页面异步请求实例代码

    AJAX实现简单的注册页面异步请求实例代码

    AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. (4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面.  简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var boolu

  • log4j2日志异步打印(实例讲解)

    log4j2支持日志的异步打印,日志异步输出的好处在于,使用单独的进程来执行日志打印的功能,可以提高日志执行效率,减少日志功能对正常业务的影响. 异步日志在程序的classpath需要加载disruptor-3.0.0.jar或者更高的版本. Asynchronous Loggers是一个新增特性在Log4j 2 ,可以实现完全异步也可以和同步混合使用,还可以只异步化Appender,以提升系统性能,官方数据显示混合没有完全异步化效果好. 1,完全异步模式: 这种异步日志方式,不需要修改原来的配

  • jquery异步请求实例代码

    1.用ajax jsp代码如下: 复制代码 代码如下: $.ajax({ type:"get", dataType:"json", url:"<%=basePath%>actionSmUser.do?method=getUserMsgByUserId", data:"userId="+userId, success:function(msg){ var data = eval("("+msg.r

  • 原生JavaScrpit中异步请求Ajax实现方法

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需要ajax功能而引入Jquery比较不划算. 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题. JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpReq

  • Spring-MVC异步请求之Servlet异步处理

    Spring-MVC异步请求之Servlet异步处理

    在Servlet3.0的规范中新增了对异步请求的支持,SpringMVC又在此基础上对异步请求提供了方便. 异步请求是在处理比较耗时的业务时先将request返回,然后另起线程处理耗时的业务,处理完后在返回给用户. 异步请求可以给我们带来很多方便,最直接的用法就是处理耗时的业务,比如,需要查询数据库,需要调用别的服务器来处理等情况下可以先将请求返回给客户端,然后启用新线程处理耗时业务. 如果我们合适的扩展可以实现订阅者模式的消息订阅功能,比如,当有异常情况发生时可以主动将相关信息发送给运维人员,

  • 关于Promise 异步编程的实例讲解

    实例如下所示: //1.解决异步回调问题 //1.1 如何同步异步请求 //如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务,无法实现并行节约时间 const fs = require('fs'); let school = {}; fs.readFile('./name.txt','utf8',function (err,data) { school.name = data; }); fs.readFile('./age.txt','utf8',funct

  • vue中promise的使用及异步请求数据的方法

    下面给大家介绍vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回调地狱&&promise>中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解. 背景 进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品

  • java调用相互依赖的dll的处理方法

    目录 一.问题描述 二.处理办法 2.1 类定义 2.2 调用 三.结语 一.问题描述 最近在做一个功能时遇到java需要调用dll,并且dll有依赖关系,之前都是单独调用一个,其实调用dll的都是模板代码,本身没有太高的难度,主要是相互依赖的还是第一次碰见,特此记录一下并分享给需要的朋友参考. 二.处理办法 其中A是dll方法的入口,A依赖B,C,D,E,F,G五个dll,先定义接口继承StdCallLibrary ,编写加载各个dll的模板代码,需要依赖的都全部加载进来,我这儿是A依赖了B,

随机推荐