您好,欢迎来到爱go旅游网。
搜索
您的当前位置:首页Promise有哪几种状态,各个状态之间是如何进行转换的?

Promise有哪几种状态,各个状态之间是如何进行转换的?

来源:爱go旅游网
Promise有哪⼏种状态,各个状态之间是如何进⾏转换的?

⼀、什么是Promise?

1.Promise的结构:

class Promise{

constructor(exector){ function resolve(){ }

function reject(){ }

exector(resolve,reject) }

then(){ }}

2.Promise的三种状态:

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

1.初始化,状态:pending

2.当调⽤resolve(成功),状态:pengding=>fulfilled3.当调⽤reject(失败),状态:pending=>rejected

const PENDING = \"pending\";//Promise会⼀直保持挂起状态,知道被执⾏或拒绝。const FULFULLED = \"fulfilled\";const REJECTED = \"rejected\";class Promise{

constructor(exector){

let self = this;//缓存当前promise对象

self.status = PENDING;//初始状态,对promise对象调⽤state(状态)⽅法,可以查看其状态是“pending\"、\"resolved\"、还是”rejected“ self.value = undefined;// fulfilled状态时 返回的信息 self.reason = undefined;// rejected状态时 拒绝的原因

self.onResolveCallBacks = [];// 存储resolve(成功)状态对应的onFulfilled函数 self.onRejectCallBacks = [];// 存储rejected(失败)状态对应的onRejected函数 let resolve = (value) => {//成功

if(self.status === PENDING){//如果成功则,状态由pending=>fulfilled self.status = FULFULLED; self.value = value;

self.onResolveCallBacks.forEach(cb=>cb(self.value));//执⾏发布 } }

let reject = (reason) => {//失败

if(self.status === PENDING){//如果失败,则状态由pending=>rejected self.status = REJECTED; self.reason = reason;

self.onRejectCallBacks.forEach(cb=>cb(self.reason));//执⾏发布 } } try{

exector(resolve,reject) }catch(e){ reject(e) } }

then(onFulfilled,onRejected){ let self=this;

if(self.status === FULFULLED){ onFulfilled(self.value);//成功值 }

if(self.status === REJECTED){

onFulfilled(self.reason);//拒绝原因 }

if(self.status === PENDING){

self.onResolveCallBacks.push(onFulfilled);//订阅发布 self.onRejectCallBacks.push(onRejected);//订阅发布 } }

//promise的决议结果只有两种可能:完成和拒绝,附带⼀个可选的单个值。如果Promise完成,那么最终的值称为完成值;如果拒绝,那么最终的值称为原因。Promise只能被决议(完成或拒绝)⼀次。之后再次试图完成或拒绝的动作都会被忽略}

new Promise((resolve,reject)=>{ resolve(\"挖坑妹\"); //异步处理

//处理结束后、调⽤resolve或reject}).then((data)=>{

console.log(data);//\"挖坑妹\"},(reason)=>{

console.log(reason);})

3.promise的优缺点 优点:

1.Promise 分离了异步数据获取和业务逻辑,有利于代码复⽤。 2.可以采⽤链式写法

3.⼀旦 Promise 的值确定为fulfilled 或者 rejected 后,不可改变。 缺点:

代码冗余,语义不清。

⼆、为什么⽤Promise?

1.解决回调地狱

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

1.代码逻辑顺序与执⾏顺序不⼀致,不利于阅读与维护。2.异步操作顺序变更时,需要⼤规模的代码重构。

3.回调函数基本都是匿名函数,bug追踪困难。

const request = url => {

return new Promise((resolve,reject) => { $.get(url,params => { resolve(params) }); });};

request(url).then(params1 => { return request(params1.url); }).then(params2 => {

return request(params2.url);}).then(params3 => { console.log(params3);

}).catch(err => throw new Error(err));

2.解决异步

我们都知道js是单线程执⾏代码,导致js的很多操作都是异步执⾏(ajax)的,以下是解决异步的⼏种⽅式:

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})

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- igat.cn 版权所有

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务