彻底掌握 Promise

文章目录

  • 一、Promise 出现的原因
  • 二、什么是 Promise?
  • 三、Promise 的优缺点
  • 四、Promise 的用法
    • 1. Promise是一个构造函数
    • 2. then 与 reject 的用法
    • 3. then的链式调用
    • 4. catch的用法
    • 5. all的用法
    • 6. race的用法
    • 7. Promise.resolve()


其他相关传送门

  1. Promise异步操作详解
  2. Promise详细用法
  3. 手写一个Promise
  4. 细说 async/await

一、Promise 出现的原因

在 Promise 出现以前,我们处理一个异步网络请求,大概是这样:

// 请求 代表 一个异步网络调用。
// 请求结果 代表网络请求的响应。
请求1(function(请求结果1){
    处理请求结果1
})

看起来还不错。
但是,需求变化了,我们需要根据第一个网络请求的结果,再去执行第二个网络请求,代码大概如下:

请求1(function(请求结果1){
    请求2(function(请求结果2){
        处理请求结果2
    })
})

看起来也不复杂。
但是。。需求是永无止境的,于是乎出现了如下的代码:

请求1(function(请求结果1){
    请求2(function(请求结果2){
        请求3(function(请求结果3){
            请求4(function(请求结果4){
                请求5(function(请求结果5){
                    请求6(function(请求结果6){
                        ...
                    })
                })
            })
        })
    })
})

这回傻眼了。。。 臭名昭著的 回调地狱 现身了。

更糟糕的是,我们基本上还要对每次请求的结果进行一些处理,代码会更加臃肿,在一个团队中,代码 review 以及后续的维护将会是一个很痛苦的过程。

回调地狱带来的负面作用有以下几点:

  • 代码臃肿
  • 可读性差
  • 耦合度过高,可维护性差
  • 代码复用性差
  • 容易滋生 bug
  • 只能在回调里处理异常

出现了问题,自然就会有人去想办法。这时,就有人思考了,能不能用一种更加友好的代码组织方式,解决异步嵌套的问题。

let 请求结果1 = 请求1();
let 请求结果2 = 请求2(请求结果1); 
let 请求结果3 = 请求3(请求结果2); 
let 请求结果4 = 请求2(请求结果3); 
let 请求结果5 = 请求3(请求结果4); 

类似上面这种同步的写法。 于是 Promise 规范诞生了,并且在业界有了很多实现来解决回调地狱的痛点。比如业界著名的 Q 和 bluebird,bluebird 甚至号称运行最快的类库。


二、什么是 Promise?

Promise 是异步编程的一种解决方案:

  • 从语法上讲,Promise 是一个 ES6 的原生对象,从它可以获取异步操作的消息;
  • 从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。
  • Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。

Promise 有三种状态:

  • pending (等待态)
  • fulfiled (成功态)
  • rejected (失败态)

一旦 Promiseresolvereject,不能再迁移至其他任何状态(即状态 immutable)。
创造 promise 实例后,它会立即执行。

彻底掌握 Promise_第1张图片

基本过程:

  1. 初始化 Promise 状态(pending);
  2. 立即执行 Promise 中传入的 fn 函数,将Promise 内部 resolve、reject 函数作为参数传递给 fn ,按事件机制时机处理;
  3. 执行 then(…) 注册回调处理数组(then 方法可被同一个 promise 调用多次);
  4. Promise里的关键是要保证,then方法传入的参数 onFulfilled 和 onRejected,必须在then方法被调用的那一轮事件循环之后的新执行栈中执行;

promise是用来解决两个问题的:

  • 回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
  • promise可以支持多个并发的请求,获取并发请求中的数据
  • 这个promise可以解决异步的问题,本身不能说promise是异步的

三、Promise 的优缺点

优点:

  1. 有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数(回调地狱)。
  2. 此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

缺点:

  1. 无法取消 Promise,一旦新建它就会立即执行,无法中途取消。
  2. 如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。
  3. 当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

四、Promise 的用法

1. Promise是一个构造函数

Promise的构造函数接收一个参数:函数,并且这个函数需要传入两个参数:

  • resolve :异步操作执行成功后的回调函数
  • reject:异步操作执行失败后的回调函数
let p = new Promise((resolve, reject) => {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
        resolve(num);
    } else {
        reject('数字太大了');
    }
})

2. then 与 reject 的用法

then 中传了两个参数,then 方法可以接受两个参数,第一个对应 resolve 的回调,第二个对应 reject 的回调。
所以我们能够分别拿到他们传过来的数据。

let p = new Promise((resolve, reject) => {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
        resolve(num);
    } else {
        reject('数字太大了');
    }
})

p.then((data) => {
    console.log('resolve:' + data); // 处理resolve回调
}, (err) => {
    console.log('reject:' + err); // 处理reject回调
})

多次运行这段代码,你会随机得到下面两种结果:
resolve:5reject:数字太大了

3. then的链式调用

所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:

request('test1.html', data)
	.then(function (data1) {
	    console.log('第一次请求成功, 这是返回的数据:', data1);
	    return request('test2.html', data1);
	})
	.then(function (data2) {
	    console.log('第二次请求成功, 这是返回的数据:', data2);
	    return request('test3.html', data2);
	})
	.then(function (data3) {
	    console.log('第三次请求成功, 这是返回的数据:', data3);
	})
	.catch(function (error) {
	    console.log('sorry, 请求失败了, 这是失败信息:', error);
	});

Promise对象的then方法返回一个新的Promise对象,因此可以通过链式调用then方法。

then方法接收两个函数作为参数,第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败时的回调。
两个函数只会有一个被调用,函数的返回值将被用作创建then返回的Promise对象。

这两个参数的返回值可以是以下三种情况中的一种:

  1. return 一个同步的值 ,或者 undefined(当没有返回一个有效值时,默认返回undefined),then方法将返回一个resolved状态的Promise对象,Promise对象的值就是这个返回值。
  2. return 另一个 Promise,then方法将根据这个Promise的状态和值创建一个新的Promise对象返回。
  3. throw 一个同步异常,then方法将返回一个rejected状态的Promise, 值是该异常。
var p = new Promise(function (resolve, reject) {
    resolve(1);
});

p.then(function (value) {
    console.log(value); // 1
    return value * 2; // return一个同步的值(resolved状态)
}).then(function (value) {
    console.log(value); // 2
}).then(function (value) {
    console.log(value); // 上面的then没有return,因此默认是return undefined
    return Promise.resolve(3);
}).then(function (value) {
    console.log(value); // 接收到resolve(3)
    return Promise.reject(4);
}).then(function (value) {
    console.log('resolve: ' + value);
}, function (err) {
    console.log('reject: ' + err); // 接收到reject(4)
})

控制台输出:

1
2
undefined
3
"reject: 4"

4. catch的用法

我们知道 Promise 对象除了 then 方法,还有一个 catch 方法,它是做什么用的呢?

其实它和 then 的第二个参数一样,用来指定 reject 的回调。 用法是这样:

let p = new Promise((resolve, reject) => {
    var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
    if (num <= 5) {
        resolve(num);
    } else {
        reject('数字太大了');
    }
})

p.then((data) => { console.log('resolve:' + data); })
 .catch((err) => { console.log('reject:' + err); })

效果和写在then的第二个参数里面一样。

不过它还有另外一个作用:在执行 resolve 的回调(也就是上面 then 中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死 js,而是会进到这个 catch 方法中。

catch 既能处理 reject 回调,也能捕捉错误

请看下面的代码:

p.then((data) => {
    console.log('resolved',data);
    console.log(somedata); //此处的somedata未定义
})
.catch((err) => {
    console.log('rejected',err);
});

在resolve的回调中,我们console.log(somedata);而somedata这个变量是没有被定义的。
如果我们不用Promise,代码运行到这里就直接在控制台报错了,不往下运行了。
但是在这里,会得到这样的结果:
在这里插入图片描述
也就是说进到catch方法里面去了,而且把错误原因传到了reason参数中。
即便是有错误的代码也不会报错了,这与我们的try/catch语句有相同的功能

5. all的用法

Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

多个 Promise 任务同时执行。 如果全部成功执行,则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个Promise 任务 rejected,则只返回 rejected 任务的结果。

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(){
  // 三个都成功,则成功    
}, function(){
  // 只要有失败,则失败
})

三个都成功,则成功
只要有失败,则失败

let p1 = new Promise((resolve, reject) => {
  resolve('成功了');
})

let p2 = new Promise((resolve, reject) => {
  resolve('success');
})

let p3 = Promse.reject('失败');

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了,打出 '失败'
})

Promse.all 在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个 ajax 的数据回来以后才正常显示,在此之前只显示 loading 图标。

showLoading(); // 显示loading

let p1 = new Promise((resolve, reject) => {
    resolve('请求1成功');
})

let p2 = new Promise((resolve, reject) => {
    resolve('请求2成功');
})

Promise.all([p1, p2]).then(() => {
    hideLoading(); // 消失loading
})

需要特别注意的是,Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚。这带来了一个绝大的好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all毫无疑问可以解决这个问题。

6. race的用法

顾名思义,Promse.race 就是赛跑的意思,意思就是说,
Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

race的使用场景:比如我们可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作,代码如下:

//请求某个图片资源
function requestImg(){
    var p = new Promise((resolve, reject) => {
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = '图片的路径';
    });
    return p;
}

//延时函数,用于给请求计时
function timeout(){
    var p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise.race([requestImg(), timeout()]).then((data) =>{
    console.log(data);
}).catch((err) => {
    console.log(err);
});

requestImg函数会异步请求一张图片,我把地址写为"图片的路径",所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race,于是他俩就会赛跑,如果5秒之内图片请求成功了,那么遍进入then方法,执行正常的流程。如果5秒钟图片还未成功返回,那么timeout就跑赢了,则进入catch,报出“图片请求超时”的信息。

7. Promise.resolve()

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

console.log(p1 === p2); 
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(function(value){
  console.log('p4=' + value);
});

p2.then(function(value){
  console.log('p2=' + value);
})

p1.then(function(value){
  console.log('p1=' + value);
})

控制台输出:

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...) 可以接收一个 值 或者是一个 Promise对象 作为参数。

当参数是普通值时,它返回一个resolved状态的Promise对象,对象的值就是这个参数;
当参数是一个Promise对象时,它直接返回这个Promise参数。因此,p1 === p2。

但通过new的方式创建的Promise对象都是一个新的对象,因此后面的三个比较结果都是false。

另外,为什么p4的then最先调用,但在控制台上是最后输出结果的呢?
因为p4的resolve中接收的参数是一个Promise对象p1,resolve会对p1”拆箱“,获取p1的状态和值,但这个过程是异步的

.

无论是 then 还是 catch ,只要不报错,都返回的是 resolved 状态的 promise
报错则返回的是 rejected 状态的 promise

Promise.resolve().then(() => {
    console.log(1); // 不报错,返回的是resolved状态的promise,触发then回调
}).catch(() => {
    console.log(2); // 不触发
}).then(() => {
    console.log(3); // 触发
})

// 1
// 3
Promise.resolve().then(() => {
    console.log(1);
    throw new Error('error'); // 报错,返回的是rejected状态的promise,触发catch回调
}).catch(() => {
    console.log(2); // 不报错,返回的是resolved状态的promise,触发then回调
}).then(() => {
    console.log(3); // 触发
})

// 1
// 2
// 3

你可能感兴趣的:(JavaScript,面试必看,ES6,Promise,es6,Promise)