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


Posted in Javascript onAugust 03, 2017

在项目中,经常会遇到多个相互依赖的异步请求。如有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处理多个相互依赖的异步请求(实例讲解)

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

Javascript 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
JS倒计时代码汇总
Nov 25 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
老生常谈js数据类型
Aug 03 #Javascript
详解JavaScript按概率随机生成事件
Aug 02 #Javascript
angular中的cookie读写方法
Aug 02 #Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 #Javascript
使用vue构建移动应用实战代码
Aug 02 #Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 #Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php写的简易聊天室代码
2011/06/04 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
简介Django中内置的一些中间件
2015/07/24 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
python ansible服务及剧本编写
2017/12/29 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python3.7.0的安装步骤
2018/08/27 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
小学防溺水制度
2014/01/29 职场文书
满月酒主持词
2014/03/27 职场文书
经验交流材料格式
2014/12/30 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
信用卡工资证明范本
2015/06/19 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL