ajax中的promise ES6中promise

最新推荐文章于 2023-08-08 14:38:12 发布
最新推荐文章于 2023-08-08 14:38:12 发布
阅读量352 收藏
点赞数
分类专栏： javascript基础 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014353343/article/details/107752975
版权
  1. 例子

1）promise all方法是并行执行的  同时返回全部的执行结果

/* promise all方法是并行执行的  同时返回全部的执行结果*/
 //切菜
function cutUp(){
    console.log('开始切菜。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('切菜完毕！');
            resolve('切好的菜');
        }, 9000);
    });
    return p;
}
//烧水
function boil(){
    console.log('开始烧水。');
    var p = new Promise(function(resolve, reject){        
    	//做一些异步操作
        setTimeout(function(){
            console.log('烧水完毕！');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}
//煮汤
function boil2(){
    console.log('开始煮汤。');
    var p = new Promise(function(resolve, reject){        
    	//做一些异步操作
        setTimeout(function(){
            console.log('煮汤完毕！');
            resolve('煮好的汤');
        }, 3000);
    });
    return p;
}
Promise.all([cutUp(), boil(),boil2()])
    .then((result) => {
        console.log('准备工作完毕');
        console.log(result);
 })

2）与promise all方法相同的jquery用法 

//  $.when的用法 与ES6的all的参数稍有区别，它接受的并不是数组，而是多个Deferred对象
// 尝试修改setTimeout的时间看看执行结果
//  $.when是并行执行的
   console.log('返回一个受限的Deferred对象')
 function runAsync(){
	 console.log('runAsync');
     var def = $.Deferred();
     //做一些异步操作
     setTimeout(function(){
         console.log('执行完成');
         def.resolve('随便什么数据');
     }, 2000);
     return def.promise(); //就在这里调用
 }
 function runAsync2(){
	 console.log('runAsync2');
     var def = $.Deferred();
     //做一些异步操作
     setTimeout(function(){
         console.log('执行完成2');
         def.resolve('随便什么数据2');
     }, 4000);
     return def.promise(); //就在这里调用
 }
 
 function runAsync3(){
	 console.log('runAsync3');
     var def = $.Deferred();
     //做一些异步操作
     setTimeout(function(){
         console.log('执行完成3');
         def.resolve('随便什么数据3');
     }, 1000);
     return def.promise(); //就在这里调用
 }
 
 $.when(runAsync2(),runAsync() , runAsync3())
 .then(function(data1, data2, data3){
     console.log('全部执行完成');
     console.log(data1, data2, data3);
 });

3)链式调用 队列执行 将多个函数顺序执行 

3.1）ES6

//原文地址：https://www.cnblogs.com/zhaoyongblog/p/12869497.html
var p1 = function (){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('p1')
            }, 1000);
        })
    }
    var p2 = function (){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('p2')
            }, 500);
        })
    }
    var p3 = function (){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('p3')
            }, 100);
        })
    }
var fnArr = [p2, p1, p3];
var run = function (arr, start = 0){
     if(start > arr.length || start < 0) return; // 参数start不能超过    arr.length，不能为负数
     var next = function (i){
         if(i < arr.length){
              var fn = arr[i];
              fn().then(res => {
                  console.log(res);
                  i++;
                  next(i)
              })
          }
      }
      next(start)
 }
run(fnArr); // 执行方法

3.2）jquery用法

 var jsonData='[{"age":32,"name":"zhangsan0","nickName":"zhangsan0"},{"age":32,"name":"zhangsan1","nickName":"zhangsan1"},{"age":32,"name":"zhangsan2","nickName":"zhangsan2"},{"age":32,"name":"zhangsan3","nickName":"zhangsan3"},{"age":32,"name":"zhangsan4","nickName":"zhangsan4"}]';
  function runAsync(p){
      var def = $.Deferred();
      //做一些异步操作
      setTimeout(function(){
    	  console.log(p.name,p.nickName);//验证参数能否正常传递进来
         //console.log('执行完成');
          def.resolve(p);
      }, 2000);
      return def.promise(); //返回一个受限的Deferred对象
  }
 var jsonArr=JSON.parse(jsonData);
  var fnArr = [];
 for(var json in jsonArr){
 	var p1=  runAsync(jsonArr[json]);
//p1是runAsync的返回结果了，这个地方是错误的
 	fnArr.push(p1);
 }
 var run = function (arr, start = 0){
     if(start > arr.length || start < 0) return; // 参数start不能超过    arr.length，不能为负数
     var next = function (i){
         if(i < arr.length){
              var fn = arr[i];
              fn.then(res => {
                  console.log(res);
                  i++;
                  next(i)
              })
          }
      }
      next(start)
 }
 
 run(fnArr); // 执行方法

 

4）超简单的串行加载工具, 不想引入框架时, 可以试用下

 /* (function (all) {
        var callee = arguments.callee;
        var caller = arguments.callee.caller;
        console.log('callee');
        console.log(callee);
        console.log('caller');
        console.log(caller);
        all.shift()(function(data) {
            callee.call(null, all, data);
        });
    })([
        function(next) {
            setTimeout(function() {
                document.body.innerHTML += '<li>first';

                next();
            }, 1000)
        }, function(next) {
            setTimeout(function() {
                document.body.innerHTML += '<li>second';

                next();
            }, 2000)
        }, function(next) {
            setTimeout(function() {
                document.body.innerHTML += '<li>third';

            }, 3000)
        }
    ]);*/


    function random(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }
    var jsonData='[{"age":32,"name":"zhangsan0","nickName":"zhangsan0"},{"age":32,"name":"zhangsan1","nickName":"zhangsan1"},{"age":32,"name":"zhangsan2","nickName":"zhangsan2"},{"age":32,"name":"zhangsan3","nickName":"zhangsan3"},{"age":32,"name":"zhangsan4","nickName":"zhangsan4"}]';


    //要执行的方法 放入数组
    var jsonArr=JSON.parse(jsonData);
    //要执行的函数 放入数组
    var fnArr = [];
    for(var json in jsonArr){
        var next=function(next,p){
            //做一些异步操作
            setTimeout(function(){
                console.log(p.name,p.nickName);//验证参数能否正常传递进来
                next();
            }, 1000*random(1,5));//随机数字
        }
        fnArr.push(next);
    }

    var  mMethod= function (all,params) {
        //在函数内部，有两个特殊的对象：arguments 和 this
        //callee该属性是一个指针，指向拥有这个 arguments 对象的函数
        //caller这个属性中保存着调用当前函数的函数的引用，
       // 如果是在全局作用域中调用当前函数，它的值为 null
        var callee = arguments.callee;
        //
        // var caller = arguments.callee.caller;

        if(all.length<1) return;
        all.shift()(function(data) {
           /* call()方法与 apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。对于 call()
            方法而言，第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用
            call()方法时，传递给函数的参数必须逐个列举出来 */

            callee.call(null, all,params,data);
        },params.shift());
    };
    mMethod(fnArr,jsonArr);
    //注意观察输出结果，严格按照了数组中元素的先后顺序

 

参考：

bluebird.js - 让所有浏览器都支持 ES6 Promise 对象

https://www.baidu.com/link?url=JzFKFWql03oLbutoFDy-5xe1nclVoJ2UDJHEJdBfpF7LRR_okf_IeUE6UDAxFiiM&wd=&eqid=aed489160027b68d000000025f258710

认识jQuery的Promise的具体使用方法

https://www.jb51.net/article/125354.htm

https://www.jianshu.com/p/1b63a13c2701

https://blog.csdn.net/tjcjava/article/details/93487993

就是现在
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
$.ajax的Promise实现1
ave-mike的专栏
06-10 1261
我们知道在ajax中想要获取返回值，需要在success中添加回调方法，大大增加了前端代码的耦合度，同时调用起来显得不够优雅，下面咱们看看Promise类如何优雅的解决这个问题的 $.ajax调用的模式如下： $.ajax({ type: 'GET', url: 'your-request-url', headers: { "Accept": "ap...
Ajax的Promise应用
@宝藏男孩
07-13 1888
异步回调的问题 之前处理异步是通过纯粹的回调函数的形式进行处理 很容易进入到回调地狱中，剥夺了函数return的能力 问题可以解决，但是难以读懂，维护困难 稍有不慎就会踏入 回调地狱—嵌套层次深，不好维护 在实际的使用中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最常见的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。 // 简单的ajax原生实现 var context; var xhr =
Ajax使用以及Promise
weixin_70989429的博客
06-02 1290
这里只是学习Promise的一些基本使用，还有一些方法没有列出来，更多的教程建议查看菜鸟教程
Promise的基本用法，基于Promise处理ajax请求
背心的博客
10-22 3822
Promise的基本用法
Ajax与Promise
最新发布
z750467878的博客
08-08 399
在 http 协议中，如果 URL 地址中的端口号是 80，则 :80 端口可以省略不写。请求报文规定了客户端以什么格式把数据发送给服务器响应报文规定了服务器以什么格式把数据响应给客户端。
JavaScript之promise对象及ajax的使用
weixin_44827643的博客
07-19 1251
本文主要介绍JavaScript中的promise对象、ajax请求数据、json数据格式以及如何利用promise封装ajax.
ES6中异步对象Promise用法详解
12-10
本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考，具体如下： 回忆一下ES5中的怎么使用异步方法 // es5中的异步回调 let ajax = function(callback){ console.log('执行') // 执行 setTimeout(()...
前端Promise的理解的面试题
04-25
● 在ES6中，它是新增的构造器（Array, Object, Promise），用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）ajax（3）nodejs中的...
深入理解ES6 Promise 扩展always方法
12-10
ES6添加了Promise对象，成功时在then中处理，失败则在catch中处理，但有时候，我们需要在无论成功或失败时都要做一些事，比如隐藏loading, 记录日志等等，下面我们以浏览器端ajax请求为例，我们使用axios（它是基于...
ES6之Promise解决回调地狱
01-20
目录回调函数：回调地狱：Promise介绍：Promise解决回调地狱： 回调函数：  在一个函数里面以形参的方式调用一个传递进来的函数。 例如： function a(callback){ callback(); } a(function(){ }) 回调地狱：  回...
jQuery中的Deferred和promise 的区别
11-23
var promise = $.ajax({ url: "/myServerScript" }); promise.done(mySuccessFunction); promise.fail(myErrorFunction); var promise = $.ajax({ url: "/myServerScript" }); promise.then(mySuccessFunction,...
使用promise解决回调地狱_使用Promise 和 $.Deferred 解决js回调地狱
weixin_39764494的博客
12-19 118
为了提高页面加载效率，越来越多的项目都在使用js异步加载。那么如果多个异步加载结果互相依赖，并且嵌套会发生什么事情？没错就是让人闻风丧胆的回调地狱。下面我们就用setTimeout方法来模拟异步加载，分别了解下ES6中Promise和jquery中Deferred都是怎么解决回调地狱的。首先我们来看一下正常情况下异步加载嵌套是什么样的，也就是js回调地狱是什么样的var myfunc = f...
ajax和Promise
Bb77_的博客
03-21 378
回调地狱、Promise、async/await、跨域、事件循环
Promise基础介绍及封装AJAX请求
qq_52788258的博客
11-05 1716
Promise基础介绍及封装AJAX请求
用es6实现一个符合Promise/A+规范的myPromise库
weixin_33859844的博客
01-16 227
1. 简介 Promise是异步编程async的一种解决方案; 使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观，避免回调地狱； 兼容低版本：$.Deferred 或 polyfill类库; 1.1 promise 三种状态 Fulfilled 成功态 Rejected 失败态 Pending 初状态 1.2 promise 组成...
new Promise 结合ajax 单个请求与多个请求写法
ProgramarQin的博客
10-10 3101
前言：忽如一夜春风来，千树万树梨花开，今天的天气突然变得很冷，又是保暖之际。由于自己隔段时间会把promise的写法忘记，又参考了廖雪峰大大的学习文章，小记写法汇总。 单个ajax请求执行写法 new Promise(function (resolve, reject) {    log('start new Promise...');     var timeOut = Math.rand...
关于ES6中的promise用法以及在ajax中的应用
toumingyumaohuiyi的博客
03-18 1607
最近看到了一道题，大概是让你说说promise的用法以及在ajax的使用 其实乍一看，还是蛮蒙的，说实话最近也是在慢慢的学习es6，所以很多东西还是在学习阶段，好了言归正传，这个Pormise是个什么东西呢，其实就是一个构造函数，这个构造函数本身有reject,resolve等方法，prototype原型上有then,catch等方法，用法就是var p=new Promise(function
Ajax 发送请求结合 Promise 使用实例
我的米饭
09-24 634
将一个promise对象放在某个常量中，在promise对象里调用 XMLHttpRequest const ajaxPromise = function(params) { return new Promise((resovle, reject) => { let xhr = new XMLHttpRequest(); xhr.open(params.type || "...
es6 promise
04-28
ES6 Promise是JavaScript的一种异步编程方法，被广泛应用于现代的Web开发中。它是一种简化异步编程的一种技术，旨在解决传统异步编程中回调函数复杂、嵌套过深的问题。 ES6 Promise实现了一系列Promise的方法，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值