ES6 Promise对象的应用实例分析

网络编程 2024/12/28 佚名

3 1 2

本文实例讲述了ES6 Promise对象的应用。分享给大家供大家参考，具体如下：

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

在promise之前处理异步回调的方式

function asyncFun(a,b,callback) {
   setTimeout(function () {
    callback(a+b);
   },200);
  }
  asyncFun(1,2, function (res) {
   if(res > 2) {
    asyncFun(res, 2, function (res) {
     if(res > 4) {
      asyncFun(res, 2, function (res) {
       console.log('ok');
       console.log(res);
      })
     }
    })
   }
  });

从上面可以看出所谓的”回调地狱”的可怕

使用promise来优雅的处理异步

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 console.log('ok');
 console.log(res);
})
.catch(function (error) {
 console.log(error);
});

使用promise处理内部异常的举例

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  // 模拟异常判断
  if(typeof a !== 'number' || typeof b !== 'number') {
   reject(new Error('no number'));
  }
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
},function (err) {
 console.log('first err: ', err);
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 'a');
 }
},function (err) {
 console.log('second err: ', err);
})
.then(function (res) {
 console.log('ok');
 console.log(res);
},function (err) {
 console.log('third err: ', err);
});

从上面可以看出通过then的第二个回调函数处理promise对象中的异常，通过reject返回异常的promise对象

通过catch统一处理错误，通过finally执行最终必须执行的逻辑

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  // 模拟异常判断
  if(typeof a !== 'number' || typeof b !== 'number') {
   reject(new Error('no number'));
  }
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 'a');
 }
})
.then(function (res) {
 console.log('ok');
 console.log(res);
})
.catch(function (error) {
 console.log('catch: ', error);
})
.finally(function () {
 console.log('finally: ', 1+2);
});

通过Promise.all()静态方法来处理多个异步

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
var promise = Promise.all([asyncFun(1,2), asyncFun(2,3), asyncFun(3,4)])
promise.then(function (res) {
 console.log(res); // [3, 5, 7]
});

通过Promise.race()静态方法来获取多个异步中最快的一个

function asyncFun(a,b,time) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },time);
 })
}
var promise = Promise.race([asyncFun(1,2,10), asyncFun(2,3,6), asyncFun(3,4,200)])
promise.then(function (res) {
 console.log(res); // 5
});

通过Promise.resolve() 静态方法来直接返回成功的异步对象

var p = Promise.resolve('hello');
p.then(function (res) {
 console.log(res); // hello
});

等同于，如下：

var p = new Promise(function (resolve, reject) {
 resolve('hello2');
})
p.then(function (res) {
 console.log(res); // hello2
});

通过Promise.reject() 静态方法来直接返回失败的异步对象

var p = Promise.reject('err')
p.then(null, function (res) {
 console.log(res); // err
});

等同于，如下：

var p = new Promise(function (resolve, reject) {
 reject('err2');
})
p.then(null, function (res) {
 console.log(res); // err
});

通过一个小例子来测试Promise在面向对象中应用

'use strict';
class User{
 constructor(name, password) {
  this.name = name;
  this.password = password;
 }
 send() {
  let name = this.name;
  return new Promise(function (resolve, reject) {
   setTimeout(function () {
    if(name === 'leo') {
     resolve('send success');
    }else{
     reject('send error');
    }
   });
  });
 }
 validatePwd() {
  let pwd = this.password;
  return new Promise(function (resolve, reject) {
   setTimeout(function () {
    if(pwd === '123') {
     resolve('validatePwd success');
    }else{
     reject('validatePwd error');
    }
   });
  })
 }
}
let user1 = new User('Joh');
user1.send()
 .then(function (res) {
  console.log(res);
 })
 .catch(function (err) {
  console.log(err);
 });
let user2 = new User('leo');
user2.send()
 .then(function (res) {
  console.log(res);
 })
 .catch(function (err) {
  console.log(err);
 });
let user3 = new User('leo', '123');
user3.validatePwd()
 .then(function (res) {
  return user3.validatePwd();
 })
 .then(function (res) {
  console.log(res);
 })
 .catch(function(error) {
  console.log(error);
 });
let user4 = new User('leo', '1234');
user4.validatePwd()
 .then(function (res) {
  return user4.validatePwd();
 })
 .then(function (res) {
  console.log(res);
 })
 .catch(function(error) {
  console.log(error);
 });

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

ES6,Promise对象

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“ES6 Promise对象的应用实例分析”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

ES6 Promise对象的应用实例分析

ES6 class的应用实例分析

使用Vue 实现滑动验证码功能

评论“ES6 Promise对象的应用实例分析”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

ES6 Promise对象的应用实例分析

ES6 class的应用实例分析

使用Vue 实现滑动验证码功能

评论“ES6 Promise对象的应用实例分析”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存