脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ES6 Promise使用方法

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

 更新时间：2020年02月18日 09:55:26   作者：怀素真  
这篇文章主要介绍了ES6中Promise的使用方法,结合实例形式总结分析了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;
});

如果返回的是一个Promise对象，请看下面代码。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve(1);
  });
};
p().then(function (data) {
  console.log(`第 ${data} 次调用`);
  return new Promise(function (resolve, reject) {
    resolve(++data);
  });
}).then(function (data) {
  console.log(`第 ${data} 次调用`);
  return new Promise(function (resolve, reject) {
    resolve(++data);
  });
}).then(function (data) {
  console.log(`第 ${data} 次调用`);
  return new Promise(function (resolve, reject) {
    resolve(++data);
  });
});

其实效果与直接返回值的是一样的。

即然then()可以进行链式操作，那我们最早之前的回调地狱写法，就可以通过它进行改进了。

function login() {
  return new Promise(function (resolve, reject) {
    $.get('/login.php', function (result) {
      resolve(result);
    });
  });
}
function user(data) {
  return new Promise(function (resolve, reject) {
    $.get('/user.php', function (result) {
      resolve(result);
    });
  });
}
function info(data) {
  return new Promise(function (resolve, reject) {
    $.get('/info.php', function (result) {
      resolve(result);
    });
  });
}
login().then(function (data) {
  console.log('处理login');
  //把login异步处理获取的数据，传入到下一个处理中。
  return user(data);
}).then(function (data) {
  console.log('处理user');
  //把user异步处理获取的数据，传入到下一个处理中。
  return info(data);
}).then(function (data) {
  console.log('处理info');
});

这样修改后，回调地狱层层嵌套的结构就变的清晰多了。上述代码是伪代码。

Promise对象还有一个catch方法，用于捕获错误，该方法与 then(null, onRejected) 等同，是一个语法糖。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve('开始');
  });
};
p().then(function (data) {
  console.log('1');
  return new Promise(function (resolve, reject) {
    reject('错误1');
  });
}).then(function (data) {
  console.log('2');
  return new Promise(function (resolve, reject) {
    reject('错误2');
  });
}).then(function (data) {
  console.log('3');
  return new Promise(function (resolve, reject) {
    reject('错误3');
  });
}).catch(function (reason) {
  console.log(reason);
});

注意，一旦操作中有错误发生，则会进入到catch中，后面的操作将不再执行。

Promise对象内部自带了try catch，当代码运行时错误，会自动以错误对象为值reject，并最终被catch捕获。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve('开始');
  });
};
p().then(function (data) {
  //注意这里打印了一个未定义的变量
  console.log(a);
}).catch(function (reason) {
  //这里会捕获到错误
  console.log('rejected');
  console.log(reason);
});

Promise还提供了，all()，race()，reject()，resolve()等在构造函数上的方法，调用这些方法并不需要实例化对象。

all()方法，可以让我们并行的执行异步操作，直到所有操作完成了，才执行回调。

function fn1() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn1');
    }, 1000);
  });
}
function fn2() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn2');
    }, 2000);
  });
}
function fn3() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn3');
    }, 3000);
  });
}
//all会等待所有操作完成，会把所有操作的结果放到一个数组中，传给then。
Promise.all([fn1(), fn2(), fn3()]).then(function (data) {
  console.log(data);
});

race()方法是谁先处理完，就以谁为准，把最先处理完的结果传给then。

function fn1() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn1');
    }, 1000);
  });
}
function fn2() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn2');
    }, 2000);
  });
}
function fn3() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn3');
    }, 3000);
  });
}
//race是以谁先处理完，就以谁为准，fn1最先处理完，那fn1的结果会传给then
//注意这里fn2和fn3还是会执行，不过不会进入then了
Promise.race([fn1(), fn2(), fn3()]).then(function (data) {
  console.log(data);
});

reject()方法，返回一个带有拒绝原因reason参数的Promise对象。

// Promise.reject('错误')
// 等同于
// new Promise(function(resolve, reject) {
//   reject('错误');
// });
let p = Promise.reject('错误');
p.then(function (data) {
}).catch(function (reason) {
  console.log(reason);
});

resolve()方法，根据传入的值返回一个Promise对象。

//如果传入的参数是普通值，则返回一个新Promise对象，并以该值resolve
let p1 = Promise.resolve('OK');
p1.then(function (data) {
  console.log(data);
});
//如果传入的参数是一个Promise对象，则原封不动的返回该Promise对象
let obj = new Promise(function (resolve, reject) {
  resolve('我是Promise对象');
});
let p2 = Promise.resolve(obj);
p2.then(function (data) {
  console.log(data);
  console.log(p2 === obj);
});
//如果传入的参数是一个thenable对象(带有then方法)，
//会转换成Promise对象，并执行thenable对象的then方法
let then = {
  then(resolve, reject) {
    resolve('我是thenable对象');
  }
}
let p3 = Promise.resolve(then);
p3.then(function (data) {
  console.log(data);
});
//如果什么参数都不传入，则返回状态为resolved的Promise对象
let p4 = Promise.resolve();
p4.then(function (data) {
  console.log(data);
}).catch(function (reason) {
  console.log(reason);
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

您可能感兴趣的文章:

相关文章

  • js canvas实现擦除动画

    js canvas实现擦除动画

    在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现这篇文章就为大家详细介绍了js canvas实现擦除动画的相关资料，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 原生JS实现-星级评分系统的简单实例

    原生JS实现-星级评分系统的简单实例

    下面小编就为大家带来一篇原生JS实现-星级评分系统的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript的变量声明提升问题浅析(Hoisting)

    JavaScript的变量声明提升问题浅析(Hoisting)

    大家应该都只奥javascript的变量声明具有hoisting机制，JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前作用域的最前面。网上关于JavaScript的变量声明提升问题的文章有很多，这篇文章将再次谈谈关于这方面的问题，有需要的朋友们可以参考借鉴。
    2016-11-11
  • iframe的onreadystatechange事件在firefox下的使用

    iframe的onreadystatechange事件在firefox下的使用

    firefox不支持iframe的onreadystatechange事件，不过有个方法可以实现同等的效果,需要的朋友可以参考下
    2014-04-04
  • 微信小程序Flex布局用法深入浅出分析

    微信小程序Flex布局用法深入浅出分析

    这篇文章主要介绍了微信小程序Flex布局用法,深入浅出地罗列分析了flex弹性布局常见的属性、功能及使用方法,需要的朋友可以参考下
    2019-04-04
  • HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

    HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

    本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例，非常的实用，特别是在BS架构的企业级应用，有需要的小伙伴可以参考下。
    2015-04-04
  • JavaScript中5个重要的Observer函数小结

    JavaScript中5个重要的Observer函数小结

    浏览器为开发者提供了功能丰富的Observer,本文主要介绍了JavaScript中5个重要的Observer函数小结,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • JS实现漂亮的时间选择框效果

    JS实现漂亮的时间选择框效果

    这篇文章主要介绍了JS实现漂亮的时间选择框效果,结合实例形式分析了javascript时间选择框插件的实现与使用方法,需要的朋友可以参考下
    2016-08-08
  • js中复制行和删除行的操作实例

    js中复制行和删除行的操作实例

    这篇文章介绍了复制行与删除行在JS中操作的实例，需要的朋友可以参考一下
    2013-06-06
  • javascript下载文件5种方式实例详解

    javascript下载文件5种方式实例详解

    在Web开发中文件下载功能是一个非常常见的功能,这篇文章主要给大家介绍了关于javascript下载文件5种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11

最新评论