欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

几个Promise使用的例子分享

程序员文章站 2022-12-01 20:09:04
1、一个简单的Promise的例子:生成一个0~2之间的数字,如果值小于1,则等待一段时间后返回成功,否则返回失败 function test(resolve,reject...

1、一个简单的Promise的例子:生成一个0~2之间的数字,如果值小于1,则等待一段时间后返回成功,否则返回失败

function test(resolve,reject){
    var timeOut = Math.random() * 2;
    console.log('set time out to '+timeOut+' seconds.');
    setTimeout(function(){
      if(timeOut < 1){
        console.log('success');
        resolve('200 ok'); //不需要return
      }else {
        console.log('call reject');
        reject('timeout in '+timeOut+' seconds');
      }
    },timeOut*1000)
  }

//调用
var p1 = new Promise(test);
  var p2 = p1.then(function(result){
    console.log('成功:'+result);
  });
  var p3 = p2.catch(function(reason){
    console.log('失败:'+reason);
  });

以上调用也可以综合起来写:

new Promise(test).then(function(result){
    console.log('成功:'+result);
  }).catch(function(reason){
    console.log('失败:'+reason);
  });
也可以写成如下形式:
new Promise(function(resolve,reject){
    var timeOut = Math.random() * 2;
    console.log('set time out to '+timeOut+' seconds.');
    setTimeout(function(){
      if(timeOut < 1){
        console.log('success');
        resolve('200 ok');
      }else {
        console.log('call reject');
        reject('timeout in '+timeOut+' seconds');
      }
    },timeOut*1000)
  }).then(function(result){
    console.log('成功:'+result);
  }).catch(function(reason){
    console.log('失败:'+reason);
  });
2、多个Promise的串行操作示例
function multiply(input) {
    return new Promise(function(resolve,reject) {
      console.log('calculate '+input+'*'+input+': ');
      setTimeout(resolve,0.5*1000,input*input);
    });
  }

  function add(input) {
    return new Promise(function(resolve,reject) {
      console.log('calculate '+input+'+'+input+': ');
      setTimeout(resolve, 0.5*1000, input+input);
    })
  }

  var p = new Promise(function(resolve, reject) {
    console.log('start new Promise');
    resolve(2);
  });

  p.then(multiply).then(add).then(function(result) {  //then中可以直接使用promise对象?
    console.log('get result='+result);
  }).catch(function(reason) {
    console.log('error')
  });
3、使用Promise实现一个ajax

一般创建ajax的过程:

(1)创建‘XMLHttpRequest’对象,也就是创建一个异步调用对象;

(2)创建一个新的‘HTTP’请求,并指定该‘HTTP’请求的方法、‘URL、以及验证信息;

(3)设置响应‘HTTP’请求状态变化的函数;

(4)发送‘HTTP’请求;

(5)获取异步调用返回的数据;

(6)使用JavaScript和DOM实现局部刷新。

function ajax(method, url, data) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url,true);
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        if(xhr.status === 200) {
          console.log('success')  
        }
      }
    }
    xhr.send(data);
  }

//调用
  ajax('GET','index.json',{});

用Promise实现ajax的创建过程

function ajaxP(method, url, data) {
    var xhr = new XMLHttpRequest();
    return new Promise(function(resolve, rejset){
      xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
          if(xhr.status === 200) {
            resolve(xhr.responseText);
          }else {
            reject(xhr.status);
          }
        }
      };
      xhr.open(method, url,true);
      xhr.send(data);
    });
  }

//调用
  var p = ajaxP('GET','index.json',{});
  p.then(function(result) {
    console.log(result);
  }).catch(function(reason) {
    console.log(reason);
  });

4、除了串行执行若干异步任务外,Promise还可以并行执行异步任务。
试想一个页面聊天系统,我们需要从两个不同的URL分别获得用户的个人信息和好友列表,这两个任务是可以并行执行的,用Promise.all()实现如下:

var pa1 = new Promise(function(resolve, reject) {
    console.log('pa1');
    setTimeout(resolve, 500, 'pa1');
  });
  var pa2 = new Promise(function(resolve, reject) {
    console.log('pa2');
    setTimeout(resolve, 3000, 'pa2');
  });
  // 同时执行p1和p2,并在它们都完成后执行then:
  Promise.all([pa1,pa2]).then(function(result) {
    console.log(result); // 获得一个Array: ['P1', 'P2']
  });

5、有些时候,多个异步任务是为了容错。比如,同时向两个URL读取用户的个人信息,只需要获得先返回的结果即可。这种情况下,用Promise.race()实现:

var pr1 = new Promise(function(resolve, reject) {
    console.log('pr1');
    setTimeout(resolve, 500, 'pr1');
  });
  var pr2 = new Promise(function(resolve, reject) {
    console.log('pr2');
    setTimeout(resolve, 600, 'pr2');
  });
  Promise.race([pr1,pr2]).then(function(result) {
    console.log(result); // 'P1'
  });