ES6中Promise的使用方法实例总结

本文实例讲述了ES6中Promise的使用方法。分享给大家供大家参考，具体如下：

在javascript中，代码是单线程执行的，对于一些比较耗时的IO操作，都是通过异步回调函数来实现的。

但是这样会存在一个问题，当下一个的操作需要上一个操作的结果时，我们只能把代码嵌到上一个操作的回调函数里，这样一层嵌一层，最终形成回调地狱。

$.get('/login.php', function (login) {  $.get('/user.php', function (user) {    $.get('/info.php', function (info) {      //代码就这样一层嵌一层，不够直观，维护也麻烦    });  });});

为了解决这种问题，ES6中就提供了Promise方法来解决这种问题。

Promise是一个构造函数，通过它，我们可以创建一个Promise实例对象。

let p = new Promise(function (resolve, reject) {  setTimeout(() => {    console.log('OK');    resolve('OK');  }, 1000);});

Promise构造函数接受一个函数作为参数，这个函数有两个参数，resolve和reject。

resolve函数是将Promise的状态设置为fulfilled(完成)，reject函数是将Promise的状态设置为rejected(失败)。

上述代码，我们并没有进行任何调用，当运行时，间隔1秒后输出了'OK'。所以这里需要注意，我们通常使用Promise时，需要在外层再包裹一层函数。

let p = function () {  return new Promise(function (resolve, reject) {    setTimeout(() => {      console.log('OK');      resolve('OK');    }, 1000);  });};p();

上面的代码p();返回的是一个Promise实例对象，Promise对象上有 then() , catch() , finally() 方法。

then方法有两个参数，onFulfilled和onRejected，都是函数。

onFulfilled用于接收resolve方法传递过来的数据，onRejected用于接收reject方法传递过来的数据。

let p = function () {  return new Promise(function (resolve, reject) {    setTimeout(() => {      if (Math.random() > 0.5) {        resolve('OK');      } else {        reject('ERR');      }    }, 1000);  });};p().then(function (data) {  console.log('fulfilled', data);}, function (err) {  console.log('rejected', err);});

then()方法总是会返回一个Promise实例，这样我们就可以一直调用then()。

在then方法中，你既可以return 一个具体的值 ，还可以return 一个Promise对象。

如果直接return的是一个数据，那then方法会返回一个新Promise对象，并以该数据进行resolve。

let p = function () {  return new Promise(function (resolve, reject) {    resolve(1);  });};p().then(function (data) {  console.log(`第 ${data} 次调用`);  //注意这里直接返回的值  //then会创建一个新的Promise对象，并且以返回的值进行resolve  //那么该值会被下面的then方法的onFulfilled回调拿到  return ++data;}).then(function (data) {  console.log(`第 ${data} 次调用`);  return ++data;}).then(function (data) {  console.log(`第 ${data} 次调用`);  return ++data;});