JS基础篇-Promise

一、什么是Promise

1、Promise的结构:

class Promise {

    constructor(exector) {

        function resolve() {}

        function reject() {}

        exector(ressolve, reject)

    }

    then() {}

}

2、Premise的三个状态:

pending、fulfilled、rejected(未决定、履行、拒绝),同一时间只能存在一个状态,且状态一旦改变就不能再变。Promise是一个构造函数,Promise对象代表一项有两种可能结果(成功或失败)的任务,它还持有多个回调,出现不同结果时分别发出不同回调。

-初始化,状态:pending
-当调用resolve(成功),状态:pending->fulfilled
-当调用reject(失败),状态:pending->rejected

code
code

3、Promise的优缺点

优点:

1、Promise分离了异步数据获取和业务逻辑,有利于代码复用;
2、可以采用链式写法;
3、一旦Promise的值确定为fulfilled或rejected后,不可改变;

缺点:

代码冗余,语义不清。

二、为什么用Promise

1、解决回调地狱

回调地狱:发送多个异步请求时,每个请求之间相互都有关联,会出现第一个请求成功之后再做下一个请求的情况。我们这时候往往会用嵌套的方式解决这种情况,但是这会形成“回调地狱”。如果处理的请求越多,那么回调就越深。出现的问题:

1、代码逻辑顺序与执行顺序不一致,不利于阅读和维护;
2、异步操作顺序变更时,需要大规模的代码重构;
3、回调函数基本都是匿名函数,bug追踪困难;

2、解决异步

我们都知道js是单线程执行代码,导致js的很多操作都是异步操作的,以下是解决异步的几种方式:

1、回调函数(定时器);
2、事件监听;
3、发布/订阅;
4、Promise对象;(将执行代码和处理结果分开)
5、Generator;
6、ES7的async/await。


三、怎么用Promise?

promise有几种对象方法

1.then方法(异步执行)

当resolve(成功)/reject(失败)的回调函数

//onFulfilled 是用来接收promise成功的值

//onRejected 是用来接收promise失败的原因

promise.then(onFulfilled,onRejected)

2.resolve(成功)

​ 调用onFulfilled

const promise = new Promise((resolve,reject)=>{

   resolve('fulfilled');//状态:pending=>fulfilled

});

promise.then(result =>{//onFulfilled调用

    console.log(result);//'fulfilled'  

},result =>{//onRejected不调用


})

//注:resolve使用

Promise.resolve('hellow world')相当于

//相当于

const promise = new Promise(resolve=>{

   resolve('hellow world');

})


3.reject(失败)

​ 调用onRejected

const promise = new Promise((resolve,reject)=>{

    reject('rejected');//状态:pending=>rejected    

});

promise.then(result =>{//onFulfilled不调用


},result =>{//onRejected调用

   console.log(result);//'rejected'  

})

//注:reject使用

Promise.reject('err')相当于

//相当于

const promise = new Promise((resolve,reject)=>{

   reject('err');

});

4.catch

​ 链式写法中可以捕获前面then中发送的异常,这种写法的好处在于先执行promise操作,然后根据返回的结果(成功或失败)来调用onFulfilled(或者onRrejected)函数。

promise.then(onFulfilled).catch(onRrejected);

5.all

​ Promise.all接收一个promise对象数组为参数,处理并行异步操作会用到,但是需要全部为resolve才能调用。这种情况是几个任务可以并行执行

const promise1= new Promise((resolve,reject)=>{

   resolve('promise1');

});

const promise2= new Promise((resolve,reject)=>{

   resolve('promise2');

});

const promise3= new Promise((resolve,reject)=>{

   resolve('promise3');

});

Promise.all([promise1, promise2, promise3]).then(data => {

   console.log(data);

   // ['promise1', 'promise2', 'promise3'] 结果顺序和promise实例数组顺序是一致的

}, err => {

   console.log(err);

});

可以从一个promise对象派生出新的promise对象,我们可以要求代表着并行任务的两个promise对象合并成一个promise对象,由后者负责通知前面的那些任务都已完成。也可以要求代表着任务系列中首要任务的Promise对象派生出一个能代表任务系列中末任务的Promise对象,这样后者就能知道这一系列的任务是否均已完成。

6.race

​ Promise.race接收一个promise对象数组为参数,只要有一个promise对象进入Fulfilled或者Rejected状态的话,就会进行后面的处理。这可以解决多个异步任务的容错

function racePromise(time){

   return new Promise((resolve,reject)=>{

       setTimeout(()=>{

           resolve(time);

       },time)

   })

}

var startDate = Date.now();

Promise.race([

   racePromise(5),

   racePromise(50),

   racePromise(500),

]).then(function(values){

   console.log(values);5

})

参考文章:https://blog.csdn.net/endeavor_no1/article/details/83416949

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,706评论 1 56
  • 前言 本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 2,200评论 0 3
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 824评论 0 2
  • 本文适用的读者 本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,...
    HZ充电大喵阅读 7,307评论 6 19
  • 1.promise简介 1.1 Promise本意是承诺,在程序中的意思就是承诺我过一段时间后会给你一个结果...
    常青_1f93阅读 836评论 0 1