0.引子

1.什么是promise?

promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象

2.promise作用

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

例如：

需求: 从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3,前面任何一个资源加载失败, 后续资源都不加载

    function request(fn) {setTimeout(function () {fn("拿到的数据");}, 1000);}request(function (data) {console.log(data, 1);request(function (data) {console.log(data, 2);request(function (data) {console.log(data, 3);});});});// 回调函数层层嵌套

使用promise

    function request() {return new Promise(function (resolve, reject) {setTimeout(function () {resolve("拿到的数据");}, 1000);});}request().then(function (data) {console.log(data, 1);return request();}).then(function (data) {console.log(data, 2);return request();}).then(function (data) {console.log(data, 3);});

一、基础概念

1.什么是Promise?

Promise是ES6中新增的一个对象,
通过Promise就可以实现用同步的流程来表示异步的操作
通过Promise就可以避免回调函数层层嵌套(回调地狱)问题

2.如何创建Promise对象?

new Promise(function(resolve, reject){});

promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码

3.Promise是如何实现通过同步的流程来表示异步的操作的?

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

4.Promise对象三种状态

pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
rejected: 只要调用rejected函数, 状态就会变为rejected, 表示操作失败
注意点: 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled,既从pending变为rejected, 那么永远都是rejected

5.监听Promise状态改变

我们还可以通过函数来监听状态的变化

resolved --> then()
rejected --> catch()

二、promise-then方法

1.then方法接收两个参数

第一个参数是状态切换为成功时的回调
第二个参数是状态切换为失败时的回调

        let promise = new Promise((resolve, reject)=>{// resolve() // 将状态修改为成功，执行成功时的回调reject() // 将状态修改为失败，执行失败时的回调})promise.then(function(){console.log('成功时的回调');},function(){console.log('失败时的回调');})

2.在修改promise状态时，可以传递参数给then方法中成功的回调

        let promise = new Promise((resolve, reject)=>{// resolve() // 将状态修改为成功，执行成功时的回调reject('123') // 将状态修改为失败，执行失败时的回调})promise.then(function(){console.log('成功时的回调');},function(res){console.log('失败时的回调', res);})

=========>

        function success(){console.log('success123');}function error(data){console.log('error',data);}let promise = new Promise((resolve, reject)=>{// resolve() // 将状态修改为成功，执行成功时的回调reject('123') // 将状态修改为失败，执行失败时的回调})promise.then(success, error)

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

        let promise = new Promise((resolve, reject)=>{// resolve() // 将状态修改为成功，执行成功时的回调reject('123') // 将状态修改为失败，执行失败时的回调})promise.then(function(){console.log('成功时的回调1');},function(res){console.log('失败时的回调1', res);})promise.then(function(){console.log('成功时的回调2');},function(res){console.log('失败时的回调2', res);})

4. then方法每次执行完毕后会返回一个`新的promise对象`

        let promise = new Promise((resolve, reject)=>{// resolve() // 将状态修改为成功，执行成功时的回调reject('123') // 将状态修改为失败，执行失败时的回调})let p2 = promise.then(function(){console.log('成功时的回调1');},function(res){console.log('失败时的回调1', res);})console.log(p2); // promise对象console.log(p2 === promise); // false

5.可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数

注意点:无论是在上一个promise对象成功的回调还是失败的回调传递的参数,
都会传递给下一个promise对象成功的回调

        let promise = new Promise((resolve, reject) => {// resolve() // 将状态修改为成功，执行成功时的回调reject('123') // 将状态修改为失败，执行失败时的回调})let p2 = promise.then(function (res) {console.log('成功时的回调1', res);return '123'}, function (res) {console.log('失败时的回调1', res);return 'bbb'})p2.then(function (res) {console.log('成功时的回调2', res);}, function (res) {console.log('失败时的回调2', res);})

then方法返回的promise在promise.then可以接收到then方法return的参数

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

        let promise = new Promise((resolve, reject)=>{resolve('1')})let ppp = new Promise((resolve, reject)=>{reject('ppp')})let p1 = promise.then(function(data){console.log('成功1', data);return ppp},function(data){console.log('失败1', data);})p1.then(function(data){console.log('成功2', data);},function(data){console.log('失败2', data);})

三、promise-catch方法

1.`catch` 其实是 `then(undefined, () => {})` 的语法糖，没有成功的回调，只有失败的回调

 let promise = new Promise(function (resolve, reject) {// resolve(); // 将状态修改为成功reject(); // 将状态修改为失败});promise.catch(function () {console.log("abc");});

2.分开监听使用链式编程

如果需要分开监听, 也就是通过then监听成功通过catch监听失败
那么必须使用链式编程, 否则会报错

     let promise = new Promise((resolve, reject)=>{reject()})promise.then(function(){console.log('成功1');})promise.catch(function(){console.log('err');}) // 能监听到失败，但是会报错

=修改=>

     promise.then(function(){console.log('成功1');}).catch(function(){console.log('err');})

2.1 使用链式编程的原因是

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

 let promise = new Promise(function (resolve, reject) {// resolve(); // 将状态修改为成功reject(); // 将状态修改为失败});let p2 = promise.then(function () {console.log("成功");});console.log(p2);promise.catch(function () {console.log("失败1");});// P2新的promise继承原有的promise状态，状态是失败，没有对应失败的监听会报错p2.catch(function () {console.log("失败2");});

3.和then一样, 在修改promise状态时, 可以传递参数给catch方法中的回调函数

     let promise = new Promise((resolve, reject)=>{reject('失败了哦')})promise.catch(function(data){console.log(data); // 失败了哦})

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

     let promise = new Promise((resolve, reject) => {reject()})promise.catch(function () {console.log('失败1');})promise.catch(function () {console.log('失败2');})promise.catch(function () {console.log('失败3');})/**执行结果失败1失败2失败3*/

5.和then一样, catch方法每次`执行完毕后`会返回一个 `新的promise对象`

     let promise = new Promise((resolve, reject) => {reject()})let p1 = promise.catch(function () {console.log('失败1');})console.log(p1);console.log(p1 === promise);

6.和then方法一样, `上一个promise对象` 也可以给 `下一个promise 成功的` 传递参数

注意点:无论是在上一个promise对象成功的回调还是失败的回调传递的参数,
都会传递给下一个promise对象成功的回调

 let promise = new Promise(function (resolve, reject) {reject();});let p2 = promise.catch(function () {console.log("失败1");return "it666";});p2.then(function (data) {console.log("成功2", data);}, function (data) {console.log("失败2", data);});/*执行结果：失败1成功2，it666*/

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

     let promise = new Promise(function (resolve, reject) {reject();});let ppp = new Promise(function (resolve, reject) {// resolve("1111");reject("abcd");});let p2 = promise.catch(function () {console.log("失败1");return ppp;});p2.then(function (data) {console.log("成功2", data);}, function (data) {console.log("失败2", data);});/*执行结果：失败1失败2 abcd*/

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

then方法中

     let promise = new Promise(function (resolve, reject) {resolve();});promise.then(function () {console.log("成功");xxx}, function () {console.log("失败");});

catch方法中：

     let promise = new Promise(function (resolve, reject) {resolve();});promise.then(function () {console.log("成功");xxx}).catch(function (e) {console.log("失败", e);});

学习笔记❥(^_-)

Promise基本概念和基本示例使用相关推荐

UE4 Matinee功能基本概念及简单示例（Sequence编辑器）
UE4 Matinee功能基本概念及简单示例(Sequence编辑器) https://gameinstitute.qq.com/community/detail/122091 UE4提供的Matin ...
开发常见密码技术概念RSA使用示例
一.单向散列函数 1.1 概念及术语单向散列函数(one-way hash function)有一个输入和一个输出,其中输入称为消息(message),输出称为散列值(hash value).单向散 ...
多线程（线程概念、代码示例）
进程和线程说起进程,就必须提一下程序,程序是指令和数据的有序集合,是一个静态的概念进程是执行程序的一次执行过程,第一个动态的概念,是系统资源分配的单位在一个进程中包含若干个线程,线程是独立的执行 ...
Mahout-协同过滤-CF-推荐算法基本概念及代码示例
协同过滤协同过滤是利用集体智慧的一个典型方法.要理解什么是协同过滤 (Collaborative Filtering, 简称 CF),首先想一个简单的问题,如果你现在想看个电影,但你不知道具体看哪部 ...
【集合论】卡氏积 ( 卡氏积概念 | 卡氏积示例 | 卡氏积性质 | 非交换性 | 非结合性 | 分配律 | 有序对为空 | n 维卡氏积 | n 维卡氏积个数 | n维卡氏积性质 )
文章目录一. 卡氏积二. 卡氏积示例三. 卡氏积性质四. n 维卡氏积五. n 维卡氏积个数六. n 维卡氏积性质前置博客 : [集合论]有序对 ( 有序对 | 有序三元组 | 有序 n ...
js 异步函数讲解： Promise、async和await示例
ECMAScript 2015,也称为 ES6,引入了 JavaScript Promise 对象,用于异步执行运行时间较长的任务. 有两种方式来实现异步编程: 一是使用Promise对象,二是使用a ...
scala 模式匹配概念及用法示例
概念可以理解为升级版的java switch 1 java中的switch -case是一个分支结构,用于匹配整型(byte,short,int,char),字符串,枚举. (long类型不可以) ...
【STM32】详解RTC实时时钟的概念和配置示例代码
一.什么是RTC RTC(Real-time Clock):实时时钟,本质上是一个支持BCD编码的定时器/计数器.主电源断电后能够由电池供电,使其时钟跳转依然正常. 二.STM32F4芯片内的RTC功 ...
达梦物化视图概念及简单示例
物化视图是从一个或几个基表导出的表,同视图相比,它存储了导出表的真实数据(即物化视图是占磁盘存储空间的),当基表中的数据发生变化时,物化视图所存储的数据将变得陈旧,用户可以通过手动刷新或自动刷新来对数 ...

Promise基本概念和基本示例使用

0.引子

1.什么是promise?

2.promise作用

一、基础概念

1.什么是Promise?

2.如何创建Promise对象?

3.Promise是如何实现通过同步的流程来表示异步的操作的?

4.Promise对象三种状态

5.监听Promise状态改变

二、promise-then方法

1.then方法接收两个参数

2.在修改promise状态时，可以传递参数给then方法中成功的回调

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

4. then方法每次执行完毕后会返回一个`新的promise对象`

5.可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数

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

三、promise-catch方法

1.`catch` 其实是 `then(undefined, () => {})` 的语法糖，没有成功的回调，只有失败的回调

2.分开监听使用链式编程

2.1 使用链式编程的原因是

3.和then一样, 在修改promise状态时, 可以传递参数给catch方法中的回调函数

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

5.和then一样, catch方法每次`执行完毕后`会返回一个 `新的promise对象`

6.和then方法一样, `上一个promise对象` 也可以给 `下一个promise 成功的` 传递参数

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

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

Promise基本概念和基本示例使用相关推荐

最新文章

热门文章

Promise基本概念和基本示例使用

0.引子

1.什么是promise?

2.promise作用

一、基础概念

1.什么是Promise?

2.如何创建Promise对象?

3.Promise是如何实现 通过同步的流程来表示异步的操作的?

4.Promise对象三种状态

5.监听Promise状态改变

二、promise-then方法

1.then方法接收两个参数

2.在修改promise状态时，可以传递参数给then方法中成功的回调

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

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

5.可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数

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

三、promise-catch方法

1.catch 其实是 then(undefined, () => {}) 的语法糖，没有成功的回调，只有失败的回调

2.分开监听使用链式编程

2.1 使用链式编程的原因是

3.和then一样, 在修改promise状态时, 可以传递参数给catch方法中的回调函数

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

5.和then一样, catch方法每次执行完毕后会返回一个 新的promise对象

6.和then方法一样, 上一个promise对象 也可以 给 下一个promise 成功的 传递参数

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

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

Promise基本概念和基本示例使用相关推荐

最新文章

热门文章

3.Promise是如何实现通过同步的流程来表示异步的操作的?

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

4. then方法每次执行完毕后会返回一个`新的promise对象`

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

1.`catch` 其实是 `then(undefined, () => {})` 的语法糖，没有成功的回调，只有失败的回调

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

5.和then一样, catch方法每次`执行完毕后`会返回一个 `新的promise对象`

6.和then方法一样, `上一个promise对象` 也可以给 `下一个promise 成功的` 传递参数

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

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