zoukankan      html  css  js  c++  java
  • Promise对象的使用方法

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      7     <title>Document</title>
      8 </head>
      9 <body>
     10     
     11 </body>
     12 </html>
     13 <script>
     14     //异步执行的代码
     15     setTimeout(function(){
     16         console.log(1);
     17     },1000);
     18     setTimeout(function(){
     19         console.log(2);
     20     },1000);
     21     setTimeout(function(){
     22         console.log(3);
     23     },1000);                //经过一秒1,2,3,同时打印出来了
     24 //以下方法可以实现异步代码的同步执行:
     25 /*
     26     1、promise有1个参数,是一个回调函数fn
     27     2、回调函数有2个参数:resolve,reject;
     28     4: new Promise 的返回值是一个promise
     29     5: promise 有  then  catch  all  race   方法{链式方法:promise.then().catch()};
     30 */
     31 //生成一个Promise对象,将俩个异步代码同步执行(主要使用then方法)
     32     new Promise(function(resolve,reject){  
     33         setTimeout(function(){
     34             console.log(1);
     35             resolve();    //执行resolve方法,配合then执行
     36         },1000);
     37     }).then(function(){
     38         setTimeout(function(){
     39             console.log(2);   
     40         },1000);
     41     })                    //至此 , 1和2 是每过一秒分别打印出来的;
     42 //生成一个Promise对象,将多个异步代码同步执行
     43     new Promise(function(resolve,reject){  
     44             setTimeout(function(){
     45                 console.log(1);
     46                 resolve();    //执行resolve方法,配合then执行
     47             },1000);
     48         }).then(function(){
     49             return new Promise(function(resolve,reject){
     50                 setTimeout(function(){
     51                     console.log(2);  
     52                     resolve();
     53                 },1000);
     54             }) 
     55         }).then(function(){
     56                 setTimeout(function(){
     57                     console.log(3);   
     58                 },1000);
     59         })            //如此多次使用Promise方法,即可实现多个异步代码同步执行
     60 // 注:resolve方法是可以传参的     then内的回调函数可以接收resolve传来的参数 
     61     new Promise(function(resolve,reject){  
     62             setTimeout(function(){
     63                 var a = 1;
     64                 resolve(a);    
     65             },1000);
     66         }).then(function(b){
     67             setTimeout(function(){
     68                 console.log(b);             //2秒后打印出来 1;
     69             },1000);
     70         });
     71 catch方法的使用方法
     72     new Promise(function(resolve,reject){  
     73                 setTimeout(function(){
     74                     reject();    
     75                 },1000);
     76             }).catch(function(){
     77                 setTimeout(function(){
     78                     console.log(1);          //2秒后打印出来 1;
     79                 },1000);
     80             });    
     81     //说明:若resolve()执行,则执行then();若reject()执行,则执行catch();     
     82 //all方法的使用:所有的方法都进行完毕才执行;
     83     var p1 = new Promise(function(resolve,reject){
     84         setTimeout(function(){
     85             resolve(1);
     86         },1000)
     87     });  
     88     var p2 = new Promise(function(resolve,reject){
     89         setTimeout(function(){  
     90             resolve(2);
     91         },2000)
     92     });  
     93     Promise.all([p1,p2]).then(function(data){
     94         console.log(data);               //2 秒过后才打印出所有的数据:[1,2];
     95     })      
     96     //注:all方法接收的参数必须是数组,结合then和catch使用; 
     97 //race方法的使用,返回最先执行完毕的方法的返回值;
     98     var p1 = new Promise(function(resolve,reject){
     99             setTimeout(function(){
    100                 resolve(1);
    101             },1000)
    102         });  
    103         var p2 = new Promise(function(resolve,reject){
    104             setTimeout(function(){  
    105                 resolve(2);
    106             },2000)
    107         });  
    108         Promise.race([p1,p2]).then(function(data){
    109             console.log(data);               //1秒过后才打印出先执行完毕的数据:1;
    110         })  
    111 </script>
    注:JavaScript异步执行的有计时器(setInterval,setTimeout),各种事件,ajax;可以使用Promise使异步代码同步执行;
    知识在于点滴积累
  • 相关阅读:
    Potato工作流管理系统 组织模型用例描述
    6/27 项目编码开始:一个简单的员工管理程序
    6/16 6/17加班2天
    重新过一遍ASP.NET 2.0(C#)(8) DataSourceControl(数据源控件)
    可行性分析报告结构
    6/27 一个简单的员工管理程序:添加微软成员资格数据表
    在asp.net 2.0中使用母版页和工厂方法模式
    工作流功能特性
    6/21 系统分析阶段汇报
    什么是工作流
  • 原文地址:https://www.cnblogs.com/XieYFwin/p/10850037.html
Copyright © 2011-2022 走看看