ES6之promise

我不是女神ヾ 2022-11-27 06:47 269阅读 0赞

promise

  • promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以。
  • promise并未剥夺函数return的能力,因此无需层层传递callback回调获取数据。
  • 多个异步等待合并并便于解决

promise构造

  1. new Promise(
  2. function (resolve, reject) {
  3. resolve('hello') // 数据处理完成
  4. reject('bye') // 数据处理出错
  5. }
  6. ).then(
  7. (res) => {console.log(res)}, // res == hello
  8. (err) => {console.log(err)} // err == bye
  9. )
  • resolve的作用是将Promise对象的状态从’未完成’变成’成功’,在异步操作成功时调用,并将异步操作的结果作为参数传递出去。
  • reject的作用是将Promise对象的状态从’未完成’变为’失败’,在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去。
  • promise有三个状态:
    1.pending[待定]初始状态
    2.fulfillen[实现]操作成功
    3.rejected[被否决]操作失败
    当promise状态发生改变就会触发then()里的响应函数处理后续步骤。

简单实例

  1. new Promise(resolve => {
  2. setTimeout(() => {
  3. resolve('hello')
  4. }, 2000)
  5. }).then(res => {
  6. console.log(res)
  7. })

分两次,顺序执行

  1. new Promise(resolve => {
  2. setTimeout(() => {
  3. resolve('hello')
  4. }, 2000)
  5. }).then(val => {
  6. console.log(val) // val == 'hello'
  7. return new Promise(resolve => {
  8. setTimeout(() => {
  9. resolve('world')
  10. }, 2000)
  11. })
  12. }).then(val => {
  13. console.log(val) // val == 'world'
  14. })

promise完成后then()

  1. let pro = new Promise(resolve => {
  2. setTimeout(() => {
  3. resolve('hello world')
  4. }, 2000)
  5. })
  6. setTimeout(() => {
  7. pro.then(value => {
  8. console.log(value) // value == hello world
  9. })
  10. }, 2000)

小结:promise作为队列最为重要的特性,我们在任何一个地方生成了一个promise队列后我们可以把他作为一个变量传递到其他地方。

then()

  • 接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败)。
  • .then()返回一个Promise实例,所以他可以链式调用。
  • 当前面的Promise状态改变时,.then()根据其最终状态选择特定的状态响应函数执行。
  • 状态响应函数可以返回新的promise或者其他值,不返回值我们也可以认为他返回了一个null。
  • 如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行。
  • 如果返回其他任何值则会立即执行下一级.then()。

.then()里面有.then()

因为.then()返回的还是promise实例,所以会等里面的.then()执行完,在执行外面的。

  1. var say = (str,time) =>{
  2. return new Promise((resolve,reject) =>{
  3. setTimeout(()=>{
  4. console.log(str);
  5. resolve(str);
  6. },time)
  7. })
  8. }
  9. say('你好',2000).then(res=>{
  10. return say('我喜歡你',2000)
  11. }).then(res=>{
  12. return say('加个微信',2000)
  13. }).then(res=>{
  14. })

Promise.all()批量执行

  • Promise.all([s1,s2,s3])用于将多个promise实例包装成一个新的Promise实例,返回的实例就是普通的promise。
  • 他接受一个数组作为参数
  • 数组里可以是promise对象,也可以是别的值,只有promise会等待状态改变
  • 当所有的promise都完成该promise完成,返回值是全部值的数组
  • 有任何一个失败该promise失败,返回值是第一个失败的字promise的结果

    • //切菜
      function cutUp(){

      1. console.log('开始切菜。');
      2. var p = new Promise(function(resolve, reject){ //做一些异步操作
      3. setTimeout(function(){
      4. console.log('切菜完毕!');
      5. resolve('切好的菜');
      6. }, 1000);
      7. });
      8. return p;

      }

      //烧水
      function boil(){
      console.log(‘开始烧水。’);
      var p = new Promise(function(resolve, reject){ //做一些异步操作

      1. setTimeout(function(){
      2. console.log('烧水完毕!');
      3. resolve('烧好的水');
      4. }, 1000);

      });
      return p;
      }

      Promise.all([cutUp(), boil()])
      .then((result) => {

      1. console.log('准备工作完毕');
      2. console.log(result);

      })

Promise.rase()

有一个promise最先完成就 reslove 返回哪个
下面以三张图片加载为例

  1. //图片地址
  2. var arr = [
  3. "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
  4. "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
  5. "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
  6. ]
  7. //封装加载图片函数
  8. var loadImg = url =>{
  9. return new Promise((resolve, reject) => {
  10. var img = document.createElement('img');
  11. img.src = url;
  12. img.width = 800;
  13. img.onload = function() {
  14. resolve(img);
  15. }
  16. img.onerror = function(event) {
  17. reject(event);
  18. }
  19. })
  20. }
  21. Promise.race(arr.map(item => {
  22. return loadImg(item);
  23. })).then(res => {
  24. document.body.append(res);
  25. }).catch(err => {
  26. console.error(err);
  27. })

实例回调地狱和Promise对比:

  1. var say = (str,time,callback)=>{
  2. setTimeout(()=>{
  3. console.log(str);
  4. if(callback){
  5. callback();
  6. }
  7. },time)
  8. }
  9. say('你好',5000,()=>{
  10. say('我喜欢你',3000,()=>{
  11. say('加个微信',2000)
  12. })
  13. })

转换为Promise写法:

  1. var say = (str,time) =>{
  2. return new Promise((resolve,reject) =>{
  3. setTimeout(()=>{
  4. console.log(str);
  5. resolve(str);
  6. },time)
  7. })
  8. }
  9. say('你好',2000).then(res=>{
  10. return say('我喜歡你',2000)
  11. }).then(res=>{
  12. return say('加个微信',2000)
  13. }).then(res=>{
  14. })

发表评论

表情:
评论列表 (有 0 条评论,269人围观)

还没有评论,来说两句吧...

相关阅读

    相关 ES6 Promise

    Promise promise对象从语法上来看呢,是一个构造函数,用来生成Promise实例,用来封装异步操作,并提供成功后或失败后的结果 所谓Promise,简单说

    相关 ES6promise

    promise promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以。 promise并未剥夺函数return的能力,因此无需层层传递c

    相关 ES6-Promise

    Promise what? 在我看来Promise就相当于一个承诺容器,将所要执行的事件存贮在promise容器中。 Promise在ES6中被统一规范,由浏览

    相关 ES6Promise

    ES6中为原生JS新增加了一个对象用来解决异步编程和问题,这个对象就是Promise。 那promise究竟是什么呢?这个真的是一件很难解释清楚的事情,他一共有三种状态,就像

    相关 es6Promise 对象

    Promise 是异步编程的一种解决方案,解决——回调函数和事件 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。 下面代码创造了一个Prom