什么是promise?

promise是ES6中新增的异步编程解决方案,在代码中的表现是一个对象.
需求:从网络上加载3个资源,要求加载完资源1才能加载资源2,加载完资源2才能加载资源3,前面任何一个资源加载失败,后续资源都不加载

<script>
function request(fn) {// 模拟发送异步请求setTimeout(() => {fn("拿到的数据");}, 1000);
}
request((data) => {console.log(data, 1);// 执行完毕后再执行第二个request((data) => {console.log(data, 2);// 执行完毕后执行第三个request((data) => {console.log(data, 3);});});
});
</script>

promise作用

企业开发中为了保证异步代码的执行顺序,俺么就会出现回调地域层层嵌套,如果回到函数嵌套的层数太多就会导致代码的阅读星,可维护性大大降低,promise对象可以将异步操作以同步流程来表示,避免了回调函数层层嵌套(调回地狱)

<script>
function request() {// 模拟发送异步请求return new Promise((resolve, reject) => {setTimeout(() => {resolve("拿到的数据");}, 1000);});
}
request().then((data) => {console.log(data, 1);return request();}).then((data) => {console.log(data, 2);return request();}).then((data) => {console.log(data, 3);return request();});
</script>

promise的基本使用

1.如何创建promise对象?

new Promise(function(resolve,reject){});
promise对象不是异步的,只要创建promise对象就会立即执行存放的代码

<script>
console.log("1");
let promise = new Promise((resolve, reject) => {console.log("2");
});
console.log("3");
</script>

2.promise是如何实现通过同步的流程表示异步的操作的?

promise对象时通过状态的改变来实现的,只要状态发生改变就会自动触发对应的函数.

3.promise对象三种状态

pending:默认状态,只要没有告诉promise任务是成功还是失败就是pending状态
fulfill(resolved):只要调用resolved函数,状态就会变为fulfilled,表示操作成功
rejected:只要调用rejected函数,状态就会变为rejected,表示操作失败
注意:状态一旦改变即不可逆

等待状态

调用成功回调

失败回调

一旦改变不可逆

只有在状态改变的时候才会调用

只有状态改变才有输出

.then方法

then方法接收两个参数
第一个参数是状态切换为成功时的回调.
第二个参数是状态为失败时的回调

在修改promise状态时,可以传递参数给then方法中的回调函数

同一个promise对象可以多次调用then方法,当该promise对象的状态改变时,所有then方法都会被执行

then方法每次执行完毕后会返回一个新的promise

可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数
注意:
无论是在上一个promise对象成功的回调还是失败的回调传递的参数,都会传递给下一个promise对象成功的回调

如果then方法返回的是一个Promise对象,那么会将返回的promise对象的执行结果中的值传递给下一个then方法

catch方法

catch其实是then(undefined,()=>{})的语法糖

如果要使用链式编程,不可以分开监听,否则会报错

原因:
1.如果配偶米色的状态是失败,但是没有对应失败的监听就会报错.
2.then方法会返回一个新的promise,新的promise会继承原有promise的状态
3.如果新的promise状态是失败,但是没有对应失败的监听也会报错

这样才行

catch方法的特点

和then一样,在修改promise状态是,可以船费参数给catch方法中的回调函数
和then一样,同一个promise对象可以多次调用catch方法,当改变该promise对象状态时,若有catch方法都会被执行
和then一样,catch方法每次执行完毕后会返回一个新的promise对象

不一样的地方
catch方法和then方法第二个参数的区别在于,catch方法可以捕获上一个promise对象then方法中的异常

promise的基本概念与使用相关推荐

promise 的基本概念和如何解决js中的异步编程问题对 promis 的 then all ctch 的分析和 await async 的理解
* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步指的是被请求者解析:被请求者(该事情的处理者)在处理完事情的时候的 ...
Java Script 之 Promise
别说什么promise 是承诺之类的,我根本听不懂. 作为一个第一次接触的,这么抽象的东西不可能那么简单的第一时间理解透彻. 1,先搞懂啥是异步操作 function callback() { co ...
ES6基础5（Promise）-学习笔记
文章目录 ES6基础5(Promise)-学习笔记 Promise 三个状态状态转换手写Promise源码同步异步概念 jquery中串行并行 async-await 微任务宏任务 ES6基 ...
all方法手写promise_实现Promise.allSettled
离上次写了 Promise.all 实现之后,已经隔了,呃,快一年了... 为什么又想起来写 Promise 的其他静态方法的实现呢?原因是最近已经连续两次收到了某跳动公司的面试邀请了.想着虽然不一定 ...
ES6---new Promise()使用方法
2015年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise ...
Promise 基本使用详解
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本 ...
【前端知识点】promise简书-30分钟带你搞懂promise面试必备
前言写作初衷本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScript中对Promise相关技术的支持情况. 通过阅读本书,我们希望 ...
ES6 之 Promise用法详解
promise用了这么多年了,一直也没有系统整理过.今天整理整理promise的相关东西,感兴趣的可以一起看一看.我尽量用更容易理解的语言来剖析一下promise 我准备分两篇文章来说明一下promi ...
两天时间，实现自己的 Promise
为了更好的理解和实践 promise,我尝试自己写一个实现 promise 所有功能的类,并基于此去做一些扩展,达到可以在生产环境使用的程度:并且为了便于维护和理解,代码全部使用 typescript ...

promise的基本概念与使用