对Promise的学习与理解

218 阅读4分钟

##在理解promise的开始,首先我们先要理解一下什么是同步什么是异步? 简单来说,同步:代码的顺序执行,当前一段代码执行完毕之后,再去执行之后的代码,异步:可以改变代码的正常执行顺序; 以一个简单的定时器来说明:

<script>
    console.log('1');
    setTimeout(() => {
       console.log('2');
    },1000);
// 此时console.log('2')就是被一个回调函数所包裹
    console.log('3');
</script>

我们也可以这样试试:

<script>
    console.log('1');
    setTimeout(() => {
       console.log('2');
    },0);
    console.log('3');
</script>

答案如果跟你预期的不符合,是因为: HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。

参考链接:

segmentfault.com/a/119000000…

www.jianshu.com/p/561db8ff3…

developer.mozilla.org/zh-CN/docs/…

这几个链接放上去之后,我感觉我没有更多可写的,可能这更像是我对于理解promise的一个学习过程的思路;

##什么是promise?

前言

由于没有规范的细致学习,事实上我对很多JS的基础知识点实际上是一知半解,或许也更多的是我知道有这个东西,我从未用过,也不知道在实际运用中到底该如何使用,我开始知道要去使用promise多亏了我们公司的代码审查和因为一个报了很久但我没有去解决的错误;同事在看见我在一个Ajax请求成功之后,我又继续调用了一个新的请求,她给我指出这样的代码是可以优化的,于是我开始学习了promise,如果这篇文章我的理解出现错误,希望可以得到路过大佬的指点

image.png

######正文

在MDN中写到:Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。

在阮一峰老师的ES6入门里面更好理解,所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)

##为什么我们要使用promise??

异步就异步,同步就同步,那我们为什么要使用promise呢? 来看看阮老师是怎么说的:

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。 (这里如果有某些小猪崽没有看懂,可以先把上面的同步和异步再看看)

image.png

如果还是没有看懂,啪!马上给安排一个新链接,(看得懂的部分就看,看不懂的位置一会儿回头再来看) juejin.cn/post/684490…

##说了这么多,那么到底我们该如何使用promise呢? 如果大家都有像我一样善于发现的眼睛,那么你一定看到了,在上面的链接中,其实已经给我们列举了一些简单的栗子, 我们先看看我们的MDN大法

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

再来看看我们的阮老师 es6.ruanyifeng.com/#docs/promi…

继续看看在最后上面那篇为什么要使用promise的,在文章的最后

image.png
点一下会有新的发现,当当当当(新的道具登场效果音,自行脑补) juejin.cn/post/684490…

请小猪崽看看这个; 当然不是所有干货都是正确的,一定要自己敲敲看,(此处手动AT自己,我也还没有敲,我一会儿一定敲);

##以上如果大家都看过了,相信大家一定有一个初步+的认识,趁热打铁,(赶紧休息一下)再看看大佬同事在项目中是如何实践的

##希望永远保持学习热情鸭~

image.png