博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从无到有的学习javascript——第七篇(Promise)
阅读量:4132 次
发布时间:2019-05-25

本文共 2993 字,大约阅读时间需要 9 分钟。

1.Promise

ES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎么处理。

// 语法new Promise(     /*下面定义的函数是executor*/     function(resolve, reject) {...})

1.1 executor

  • executor是一个带有resolve和reject参数的函数
  • executor函数在 Promise构造函数执行时立即执行,被传递resolve和reject函数(executor函数在Promise构造函数返回新建的对象前被调用)
  • executor内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise对象的状态改为fulfilled即完成,或者发生错误时将promise对象的状态改为rejected即失败。
  • 如果在executor函数中抛出一个错误,那么该promise状态为rejected,executor函数的返回值被忽略。
  • executor中,resolve或reject函数只能执行其中的一个

promise的状态:

  • pending:初始状态,不是成功或失败
  • fulfilled:意味着操作成功完成
  • rejected:意味着操作失败

Promise.then(onFulfilled, onRejected)

参数是2个函数,根据Promise的装态来调用不同的函数,fulfilled走OnFulfilled函数,rejected走onRejected函数。then的返回值是一个新的promise对象,执行任意一个函数,对这个promise对象来说就是其返回值。调用任意一个函数后,其返回值可以被后续的then方法继续捕捉。

catch(onRejected)

为当前Promise对象添加一个拒绝回调,返回一个新的Promise对象。

我们来看一个简单的例子:

var myPromise = new Promise(    function (resolve, reject){        //resolve('hello')        console.log('~~~~~~~~~~')        reject('hello world!')    })console.log(myPromise)var pro1 = myPromise.then(    (value) => console.log(1, myPromise, value),    (reason) => console.log(2, myPromise, reason)  // 不管哪个回调函数被执行,新的promise对象的状态都会变为fulfilled)// 可以继续被捕捉var pro2 = pro1.then(    (value) => console.log(3, myPromise, value),    (reason) => console.log(4, myPromise, reason))pro2.then(    value => {        console.log(5, pro2, value)        return Promise.reject('pro2 rejected')  // 将新的promise对象的状态改为rejected    },    reason => console.log(6, pro2, reason)).catch(    reason => {        console.log(7, reason)        return Promise.resolve(reason + '*')  // 将新的promise对象的状态改为resolved    }).then(    value => console.log(8, value),    reason => console.log(9, reason))/*Promise { 
'hello world!' }2 Promise {
'hello world!' } 'hello world!'3 Promise {
'hello world!' } undefined5 Promise { undefined } undefined7 'pro2 rejected'8 'pro2 rejected*'*/

对Promise的几点总结:

Promise:resolve, reject两个函数无返回值
then方法返回一个新的Promise对象,新对象的打印结果为then方法执行的函数的返回值;catch方法也是返回一个新的Promise对象。
 then的回调函数:
fulfilled成功的状态 ==> 会调用onfulfilled回调函数,其参数为value
rejected失败的状态  ==> 会调用onrejected回调函数,其参数为reason
不管哪一个回调函数执行后,新的promise对象的状态就变为fulfilled

catch只有一个回调函数==> reason

如果不能catch到,以当前对象(pro1)的结果作为新对象(pro2)的结果;如果catch到,新的promise对象的状态就变为fulfilled

再来看一个例子:

function runAsync(){    return new Promise(function(resolve, reject){        setTimeout(function(){            console.log('do something')            resolve('ok')        }, 3000)  // 3000毫秒也就是3秒    })}runAsync().then(    value => {        console.log(value)        return Promise.reject(value + '*****')  // 将新的promise对象的状态改为rejected    }).catch(    reason => {        console.log(reason)        return Promise.resolve(reason + '~~~~~~~~~~~')  // 将新的promise对象的状态改为resolved    }).then(    value => {        console.log(value)        console.log('Promise END')    })console.log('========FIN========')/*========FIN========do somethingokok*****ok*****~~~~~~~~~~~Promise END*/

 

转载地址:http://vvfvi.baihongyu.com/

你可能感兴趣的文章
hdu 4280
查看>>
禁止使用类的copy构造函数和赋值操作符
查看>>
C++学习路线
查看>>
私有构造函数
查看>>
组队总结
查看>>
TitledBorder 设置JPanel边框
查看>>
DBCP——开源组件 的使用
查看>>
抓包工具
查看>>
海量数据相似度计算之simhash和海明距离
查看>>
DeepLearning tutorial(5)CNN卷积神经网络应用于人脸识别(详细流程+代码实现)
查看>>
DeepLearning tutorial(6)易用的深度学习框架Keras简介
查看>>
DeepLearning tutorial(7)深度学习框架Keras的使用-进阶
查看>>
流形学习-高维数据的降维与可视化
查看>>
Python-OpenCV人脸检测(代码)
查看>>
python+opencv之视频人脸识别
查看>>
人脸识别(OpenCV+Python)
查看>>
6个强大的AngularJS扩展应用
查看>>
网站用户登录系统设计——jsGen实现版
查看>>
第三方SDK:讯飞语音听写
查看>>
第三方SDK:JPush SDK Eclipse
查看>>