Promise对象 _对象

赋料扬雄敌，诗看子建亲。这篇文章主要讲述Promise对象相关的知识，希望能为你提供帮助。
Promise对象??javascript???是单线程的语言，通过维护执行栈与任务队列而实现了异步操作，??setTimeout???与??Ajax???就是典型的异步操作，??Promise???就是异步操作的一个解决方案，用于表示一个异步操作的最终完成或失败及其结果值，??Promise???有各种开源实现，在??ES6??中被统一规范，由浏览器直接支持。
语法

new Promise( function(resolve, reject)/* executor */
// 执行代码需要指明resolve与reject的回调位置
);

【Promise对象】??executor???是带有??resolve???和??reject???两个参数的函数。??Promise???构造函数执行时立即调用??executor???函数，??resolve???和??reject???两个函数作为参数传递给??executor???。??resolve???和??reject???函数被调用时，分别将??promise???的状态改为完成??fulfilled???或失败??rejected???。??executor???内部通常会执行一些异步操作，一旦异步操作执行完毕，要么调用??resolve???函数来将??promise???状态改成??fulfilled???，要么调用??reject???函数将??promise???的状态改为??rejected???。如果在??executor???函数中抛出一个错误，那么该??promise???状态为??rejected???，??executor??函数的返回值被忽略。
状态

pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

??Promise???对象只有从??pending???变为??fulfilled???和从??pending???变为??rejected???的状态改变。只要处于??fulfilled???和??rejected???，状态就不会再变了。
缺点：无法取消???Promise???，一旦新建它就会立即执行，无法中途取消；如果不主动??catch???，??Promise???内部抛出的异常，不会反应到外部，在??FireFox???中异常不会抛出，在??Chrome???中的异常抛出但不会触发??winodw.onerror???事件；当处于??pending??状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
实例??Promise???可以进行链式调用，避免过多的异步操作造成的回调地狱，??then()???函数默认会返回一个和原来不同的新的??Promise??。

var promise = new Promise(function(resolve,reject)
var rand = Math.random() * 2;
setTimeout(function()
if(rand < 1) resolve(rand);
else reject(rand);
,1000)
)
promise.then(function(rand)
console.log("resolve",rand); // resolve回调执行
).catch(function(rand)
console.log("reject",rand); // reject回调执行
).then(function()
console.log("再执行then");
return Promise.resolve(1);
).then(function(num)
console.log(num,"还可以继续执行并接收参数");
)

进行多次异步操作，假设只有??resolve??才会进行下一步异步操作

var promise = new Promise(function(resolve,reject)
var rand = Math.random() * 2;
setTimeout(function()
if(rand < 1) resolve(rand);
else reject(rand);
,1000)
)
promise.then(function(rand)
console.log("resolve",rand); // resolve回调执行
return new Promise(function(resolve,reject)
setTimeout(function()
resolve(10000);
,1000)
)
).then(function(num)
console.log(num);
).catch(function(rand)
console.log("reject",rand); // 捕捉reject回调与异常
)

使用??catch??捕捉异常

var promise = new Promise(function(resolve,reject)
throw new Error("Error"); // 抛出一个异常
)
promise.then(function()
console.log("正常执行");
).catch(function(err)
console.log("reject",err); // 捕捉异常
)

??then???本身可以接受两个参数??resolve???与??reject??

var promise = new Promise(function(resolve,reject)
var rand = Math.random() * 2;
setTimeout(function()
if(rand < 1) resolve(rand);
else reject(rand);
,1000)
)
promise.then(function(rand)
console.log("resolve",rand); // resolve回调执行
,function(rand)
console.log("reject",rand); // reject回调执行
)

方法Promise.all(iterable)
这个方法返回一个新的??promise???对象，该??promise???对象在??iterable???参数对象里所有的??promise???对象都成功的时候才会触发成功，一旦有任何一个??iterable???里面的??promise???对象失败则立即触发该??promise???对象的失败。这个新的??promise???对象在触发成功状态以后，会把一个包含??iterable???里所有??promise???返回值的数组作为成功回调的返回值，顺序跟??iterable???的顺序保持一致；如果这个新的??promise???对象触发了失败状态，它会把??iterable???里第一个触发失败的??promise???对象的错误信息作为它的失败错误信息。??Promise.all???方法常被用于处理多个??promise??对象的状态集合。

var p1 = new Promise((resolve, reject) =>
resolve("success1");
)

var p2 = new Promise((resolve, reject) =>
resolve("success2");
)

var p3 = new Promise((resolve, reject) =>
reject("fail");
)

Promise.all([p1, p2]).then((result) =>
console.log(result); // 成功状态 //["success1", "success2"]
).catch((error) =>
console.log(error);
)

Promise.all([p1,p3,p2]).then((result) =>
console.log(result);
).catch((error) =>
console.log(error); // 失败状态 // fail
)

Promise.race(iterable)
当??iterable???参数里的任意一个子??promise???被成功或失败后，父??promise???马上也会用子??promise???的成功返回值或失败详情作为参数调用父??promise???绑定的相应句柄，并返回该??promise??对象。

var p1 = new Promise((resolve, reject) =>
setTimeout(() =>
resolve("success");
,1000);
)

var p2 = new Promise((resolve, reject) =>
setTimeout(() =>
reject("failed");
, 2000);
)

Promise.race([p1, p2]).then((result) =>
console.log(result); // p1先获得结果，那么就执行p1的回调
).catch((error) =>
console.log(error);
)

Promise.resolve(value)
返回一个状态由给定??value???决定的??Promise???对象。如果该值是??thenable???(即，带有??then???方法的对象)，返回的??Promise???对象的最终状态由??then???方法执行决定；否则的话(该??value???为空，基本类型或者不带??then???方法的对象),返回的??Promise???对象状态为??fulfilled???，并且将该??value???传递给对应的??then???方法。通常而言，如果你不知道一个值是否是??Promise???对象，使用??Promise.resolve(value)???来返回一个??Promise???对象,这样就能将该??value???以??Promise???对象形式使用。不要在解析为自身的??thenable???上调用??Promise.resolve???，这将导致无限递归，因为它试图展平无限嵌套的??promise??。

// 该值为空或基本类型，直接返回一个fulfilled状态的Promise对象
var promise = Promise.resolve(1);
promise.then((num) =>
console.log(num); // 1
).catch((err) =>
console.log(err);
);

// 如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例
var p1 = Promise.resolve(1);
var p2 = Promise.resolve(p1);
console.log(p1 === p2); // true
p2.then((value) =>
console.log(value); // 1
);

// 如果该值带有`then`方法的对象)，返回的`Promise`对象的最终状态由`then`方法执行决定
var thenable = then: (resolve, reject) => resolve(1);
var p1 = Promise.resolve(thenable);
p1.then((value) =>
console.log(value); // 1
).catch((err) =>
console.log(err);
);

Promise.reject(reason)
返回一个状态为失败的??Promise??对象，并将给定的失败信息传递给对应的处理方法

var promise = Promise.reject("err");
promise.then(() =>
console.log(1);
).catch((err) =>
console.log(err); // err
);

原型方法Promise.prototype.then(onFulfilled, onRejected)
添加解决??fulfillment???和拒绝??rejection???回调到当前??promise???,返回一个新的??promise???,将以回调的返回值来??resolve??。
Promise.prototype.catch(onRejected)
添加一个拒绝??rejection???回调到当前??promise???,返回一个新的??promise???。当这个回调函数被调用，新??promise???将以它的返回值来??resolve???，否则如果当前??promise???进入??fulfilled???状态，则以当前??promise???的完成结果作为新??promise??的完成结果。
Promise.prototype.finally(onFinally)
添加一个事件处理回调于当前??promise???对象，并且在原??promise???对象解析完毕后，返回一个新的??promise???对象。回调会在当前??promise???运行完毕后被调用，无论当前??promise???的状态是完成??fulfilled???还是失败??rejected??。
实现Ajax

function ajax(method, url, data)
var request = new XMLHttpRequest();
return new Promise(function (resolve, reject)
request.onreadystatechange = function ()
if (request.readyState === 4)
if (request.status === 200)
resolve(request.responseText);
else
reject(request.status);

;
request.open(method, url);
request.send(data);
);

ajax("GET","https://www.baidu.com",[]).then((res) =>
console.log(res);
).catch((err) =>
console.log(err);
)

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
https://developer.mozilla.org/zh-CN/docs/Web/javaScript/Reference/Global_Objects/Promise