promise

头像
全凭仙气儿活着
    阅读 9 分钟
    1

    ## 前言

    今天来分享下promise的用法，es6伟大发明之一，当初我学习的时候也是蛮头大的，不知道为啥，整个脑子就是，我在哪，我要干啥的懵圈，后面认真学习之后，觉得真是十分好用，下面就来一起学习下吧。

    为什么会有promise

    首先为什么会有promise的存在，其实很多人都知道的，其中最大的问题就是在处理多个有依赖关系的异步操作时，会出现回调地狱（ callback hell ），如下：

    $.ajax({
      url: '....',
      success: function (data) {
            $.ajax({
                  url: '....',
                  success: function (data) {
              }
          });
      }
 });

    promise提供了一个优雅的方式，来解决这个问题，同时提供了很多的错误捕获机制。

    如何使用promise

    我们先不讲promise的理论语法，这样会一开始就降低学习的欲望，直接来看使用案例，然后去理解。

    首先看基本使用
    new Promise(function (resolve, reject) {
         // 假设此处是异步请求某个数据
               $.ajax({
                  url: '......',
                   success: function (res) {
                       if (res.code === 200) {
                            resolve(res.data);
                        } else {
                           reject('获取data失败');
                      }
                   }
               })
})
.then(function A(data) {
        // 成功，下一步
      console.log( data);
 }, function B(error) {
        // 失败，做相应处理
       console.log(error)
 });
console:
sucess
error

    解析：

    梳理流程：
    • 首先我们在promise函数里，执行我们的异步操作得到data
    • 如果成功的话，通过resolve函数数据传递出来，如果失败。通过reject把错误信息传递出来
    • 然后在.then里可以接受传递出来的数据，.then()里面接受两个函数，第一个函数接收resolve传递出来的值，也就是正确情况下的处理，第二个函数接收reject传递的信息，也就是错误的情况下的处理。
    Promise是一个对象，它的内部其实有三种状态。
    • 初始状态（ pending ）。
    • 已完成（ fulfilled ）： Promise 的异步操作已结束成功。
    • 已拒绝（ rejected ）： Promise 的异步操作未成功结束。

    resolve 方法可以使 Promise 对象的状态改变成成功，同时传递一个参数用于后续成功后的操作。
    reject 方法则是将 Promise 对象的状态改变为失败，同时将错误的信息传递到后续错误处理的操作。

    then(onFulfilled, onRejected)

    ---(onFulfilled, onRejected)

    链式then

    当然，我们既然解决回调地狱，一个异步，看不出来啥优势，现在看多个异步请求, 为了代码简约，我们用setTimeout来代替ajax请求 作为异步操作，如下：

    new Promise((resolve, reject) => {
     setTimeout( () => {
          if （...）{
            resolve（[1, 2, 3]）
        } else {
            reject('error');
        }
   }, 2000);
})
 .then( data => {
        console.log(value);  // 打印出[1, 2, 3]
        return new Promise( (resolve, reject)=> {   // 新的异步请求，需要promise对象
            let data2 = 1 + data;
            setTimeout( () => {
              if (...) {
                   resolve(data2);
              } else {
                  reject('error2')
              }
              
            }, 2000);
       });
  }, error => {
      cosnole.log(error)
  })
.then( data2 => {
      console.log(data2 );
 }, error => {
      cosnole.log(error)
  });
    解析：

    -这个例子中，第一个异步操作得到数据[1, 2, 3]，传递到第一个then中，我们在第一个then中运用拿到的数据，进行第二次异步操作，并把结果传递出去。在第二个then中拿到数据,并且捕获error。
    可以看到本来嵌套的两个异步操作，现在清晰多了，而且链式接无数个then

    在这里有两个地方需要注意
    • then里面的可捕获错误的函数，可以捕获到上面的所有then的错误，所以只在最后一个then里，写错误捕获函数就可以。
    • 每次异步操作时候需要返回一个新的promise，因为只有用promise对象才会等异步操作执行完，才去执行下面的then，才能拿到异步执行后的数据，所以第二个then里的异步请求，也需要声明Promise对象。如果then里面返回常量，可以直接返回。如下：
    new Promise((resolve, reject) => {
     setTimeout( () => {
          if （...）{
            resolve（[1, 2, 3]）
        } else {
            reject('error');
        }
   }, 2000);
})
 .then( value => {
        return '222';    // 如果是直接返回常量，可直接return
    })
 .then( value2 => {
     console.log(value2 ); // 打印出222
 })

    下面忽略error情况，看两个例子，大家可以自己思考下打印结果

    new Promise(resolve => {
    setTimeout( () => {
        resolve('value1');
    }, 2000);
})
 .then( value1 => {
        console.log(value1);
        (function () {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log('Mr.Laurence');
                    resolve('Merry Xmas');
                }, 2000);
            });
        }());
        return false;
    })
 .then( value => {
     console.log(value + ' world');
 });

value1
false world
Mr.Laurence
    new Promise( resolve => {
    console.log('Step 1');
    setTimeout(() => {
        resolve(100);
    }, 1000);
})
.then( value => {
     return new Promise(resolve => {
         console.log('Step 1-1');
         setTimeout(() => {
            resolve(110);
         }, 1000);
    })
    .then( value => {
           console.log('Step 1-2');
           return value;
    })
   .then( value => {
         console.log('Step 1-3');
         return value;
    });
})
.then(value => {
      console.log(value);
      console.log('Step 2');
});

console:
Step 1
Step 1-1
Step 1-2
Step 1-3
110
Step 2

    catch

    catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法，也就是说可以写成 then(fn).catch(fn)，相当于 then(fn).then(null, fn)。使用 catch 的写法比一般的写法更加清晰明确。我们在捕获错误的时候，直接在最后写catch函数即可。

     let promise = new Promise(function(resolve, reject) {
    throw new Error("Explosion!");
});
promise.catch(function(error) {
      console.log(error.message); // "Explosion!"
});

    上面代码等于与下面的代码

     let promise = new Promise(function(resolve, reject) {
    throw new Error("Explosion!");
});
promise.catch(function(error) {
      console.log(error.message); // "Explosion!"
});
    异步代码错误抛出要用reject
    new Promise( resolve => {
    setTimeout( () => {
        throw new Error('bye');
    }, 2000);
})
.then( value => {
 })
.catch( error => {
      console.log( 'catch', error);
 });
控制台会直接报错 Uncaught Error: bye

    解析：因为异步情况下，catch已经执行完了，错误才抛出，所以无法捕获，所以要用reject，如下：

    new Promise( (resolve, reject) => {
    setTimeout( () => {
        reject('bye');
    }, 2000);
})
.then( value => {
        console.log( value + ' world');
 })
.catch( error => {
      console.log( 'catch', error);
 });

catch bye
利用reject可以抓捕到promise里throw的错
    catch 可以捕获then里丢出来的错，且按顺序只抓捕第一个没有被捕获的错误
    new Promise( resolve => {
    setTimeout( () => {
        resolve();
    }, 2000);
})
.then( value => {
    throw new Error('bye');
 })
.then( value => {
   throw new Error('bye2');
 })
.catch( error => {
  console.log( 'catch', error);
 });

console: Error： bye

    new Promise( resolve => {
    setTimeout( () => {
        resolve();
    }, 2000);
})
.then( value => {
    throw new Error('bye');
 })
.catch( error => {
  console.log( 'catch', error);
 })
.then( value => {
   throw new Error('bye2');
 })
.catch( error => {
  console.log( 'catch', error);
 });

console: Error： bye
console: Error： bye2
catch 抓捕到的是第一个没有被捕获的错误
    错误被捕获后，下面代码可以继续执行
    new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        throw new Error('test1 error');
    })
    .catch( err => {
        console.log('I catch：', err);   // 此处捕获了 'test1 error'，当错误被捕获后，下面代码可以继续执行
    })
    .then( () => {
        console.log(' here');
    })
    .then( () => {
        console.log('and here');
         throw new Error('test2 error');
    })
    .catch( err => {
        console.log('No, I catch：', err);  // 此处捕获了 'test2 error'
    });

I catch： Error: test2 error
here
and here
 I catch： Error: test2 error
    错误在捕获之前的代码不会执行
    new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        throw new Error('test1 error');
    })
    .catch( err => {
       console.log('I catch：', err);   // 此处捕获了 'test1 error'，不影响下面的代码执行
       throw new Error('another error'); // 在catch里面丢出错误，会直接跳到下一个能被捕获的地方。
    })
    .then( () => {
        console.log('and here');
         throw new Error('test2 error');
    })
    .catch( err => {
        console.log('No, I catch：', err);  // 此处捕获了 'test2 error'
    });

I catch： Error: test2 error
I catch： Error: another error
    new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        console.log('start');
        throw new Error('test1 error');
    })
    .then( () => {
        console.log('arrive here');
    })
    .then( () => {
        console.log('... and here');
         throw new Error('test2 error');  
    })
    .catch( err => {
        console.log('No, I catch：', err);   // 捕获到了第一个
    });

No, I catch： Error: test1 error
    at Promise.then (<anonymous>:8:1

    Promise.all

    Promise.all([1, 2, 3])
      .then( all => {
          console.log('1：', all);
      })
[1, 2, 3]
    Promise.all([function () {console.log('ooxx');}, 'xxoo', false])
      .then( all => {
         console.log( all);
      });
 [ƒ, "xxoo", false]
    let p1 = new Promise( resolve => {
            setTimeout(() => {
                resolve('I\'m P1');
            }, 1500);
});
let p2 = new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve('I\'m P2');
            }, 1000);
 });
let p3 = new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve('I\'m P3');
            }, 3000);
 });

 Promise.all([p1, p2, p3]).then( all => {
       console.log('all', all);
}).catch( err => {
        console.log('Catch：', err);
});

all (3) ["I'm P1", "I'm P2", "I'm P3"]
    案例：删除所有数据后，做一些事情、、、、
db.allDocs({include_docs: true}).then(function (result) {
  return Promise.all(result.rows.map(function (row) {
    return db.remove(row.doc);
  }));
}).then(function (arrayOfResults) {
  // All docs have really been removed() now!
});

    Promise.resolve

    Promise.resolve()
    .then( () => {
        console.log('Step 1');
    })

    其他

    Promise.resolve('foo').then(Promise.resolve('bar')).then(function (result) {
  console.log(result);
});
VM95:2 foo
如果你向 then() 传递的并非是一个函数（比如 promise）
它实际上会将其解释为 then(null)，这就会导致前一个 promise 的结果会穿透下面

    How do I gain access to resultA here?

    function getExample() {
    return promiseA(…).then(function(resultA) {
        // Some processing
        return promiseB(…);
    }).then(function(resultB) {
        // More processing
        return // How do I gain access to resultA here?
    });
}

    解决 Break the chain

    function getExample() {
    var a = promiseA(…);
    var b = a.then(function(resultA) {
        // some processing
        return promiseB(…);
    });
    return Promise.all([a, b]).then(function([resultA, resultB]) {
        // more processing
        return // something using both resultA and resultB
    });
}
    promisejavascriptecmascriptes5
    全凭仙气儿活着
    3 声望0 粉丝

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 22阅读 9.9k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新