Fork me on GitHub

ES6 Promise用法的学习

一、什么是Promise?

Promise是一种异步编程的解决方案,比传统的回调函数更加强大合理。

从语法上来说,Promise是一个对象,可以通过Promise获取异步操作的消息。

Promise 可以支持多并发的请求,获取并发请求中的数据。

注意:Promise 可以解决异步的问题,本身不能说 Promise 是异步的

二、Promise的特点

1. 有all、reject、resolve等方法;

2. 原型上有then、catch等方法;

3. 一旦建立,就无法取消,这是它的缺点;

4. 如果不设置回调函数,Promise 内部抛出的错误,不会反映到外部。

三、Promise的状态

promise 有三种状态:

  • pending 初始状态也叫等待状态, 比如定时器没有到时间或者是正在进行网络请求;
  • fulfilled 成功状态,主动调用resolve(),且回调.then();
  • rejected 失败状态主动调用reject(),且回调.catch();

状态一旦改变,就不会再变。创造 promise实例后,它会立即执行。

四、Promise的用法

1. 基本用法

复制代码
 1 new Promise((resolve, reject) => {
 2   setTimeout(() => {
 3     // 成功时候调用resolve
 4     resolve('Hello Promise!')
 5       // 失败时候调用reject
 6     reject('Error!!')
 7   }, 1000);
 8 }).then(data => { // data是resolve里的参数
 9   console.log(data);
10 }).catch(error => { // error是reject里的参数
11   console.log(error);
12 })
复制代码

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

2.链式操作的用法

.then()和.catch()操作都能返回一个Promise对象。所以,promise可以链式调用:

复制代码
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('链式调用');
  }, 1000);
}).then(data => {
  console.log(data);
  return data + '1';
}).then(data => {
  console.log(data);
  return data + '2';
}).then(data => {
  console.log(data);
  return Promise.reject(data + 'error')
}).catch(data => {
  console.log(data);
})

// 输出:
链式调用
链式调用1
链式调用12
链式调用12error
复制代码

3. Promise.all 方法

Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。

复制代码
Promise.all([
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('事件1');
    }, 1000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('事件2');
    }, 5000);
  })
]).then(results => {
  console.log(results);
})
// 5s之后打印数组 ["事件1", "事件2"]
复制代码

有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。

 PS:  Promise.all 手撕代码移步:https://www.cnblogs.com/coder-zero/p/14719680.html

参考博文:https://www.cnblogs.com/whybxy/p/7645578.html

posted @   zerozhupan  阅读(78)  评论(0)    收藏  举报
点击右上角即可分享
微信分享提示
目 录 X
一、什么是Promise?
二、Promise的特点
三、Promise的状态
四、Promise的用法
1. 基本用法
2.链式操作的用法
3. Promise.all 方法