Promise
promise对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
语法
new Promise( function(resolve, reject) {...} );
参数
promis的参数就是一个带有resolve和reject的函数
属性
1.peomise.all()
方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败的原因是第一个失败 promise 的结果。
2.promise.reject()
返回一个状态为失败的Promise对象,并将给定的失败信息传递给对应的处理方法
3.promoise.resolve()
返回一个状态由给定value决定的Promise对象。如果该值是thenable(即,带有then方法的对象),返回的Promise对象的最终状态由then方法执行决定;否则的话(该value为空,基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled,并且将该value传递给对应的then方法。通常而言,如果你不知道一个值是否是Promise对象,使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
原型
promise.prototype
创建
想要某个函数?拥有promise功能,只需让其返回一个promise即可。
// 以AJAX为例
ajax(method,url,option)=>{
return new Promise(resolve,reject){ // 返回一个promise
const {success,fail} = option
const request = new XMLHttpRequest()
request.open(method,url)
request.onreadystatechange = () => {
if(request.readyState === 4){
if(request.status =200){
resolve.call(null,request.response)} // 成功执行
if(request.status >= 400){
reject.call(null,request)} // 失败执行
}
}
request.send()
}
}
链式调用
then()函数
方法返回一个 Promise。它最多需要有两个参数:Promisede的成功和失败情况的回调函数。
上一个例子,我们调用这个函数就用.then,如果是成功就使用then函数中的resolve函数,失败就执行reject函数
ajax (get,url)
.then((response =>{},request=>{})
then函数会创建一个新的promise对象
const promise = example()
const promise2 = promise.then(successCallback,failCallack)
//也可以简化
const promise2 = example().then(successCallback,failCallback)
promise2 不仅表示 example() 函数的完成,也代表了你传入的 successCallback 或者 failureCallback 的完成,这两个函数也可以返回一个 Promise 对象,从而形成另一个异步操作,这样的话,在 promise2 上新增的回调函数会排在这个 Promise 对象的后面。
// then方法的是用避免了回调地狱,让代码看起来更加的简介规整。
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback); //回调地狱
doSomething().then(function(result) {
return doSomethingElse(result);
})
.then(function(newResult) {
return doThirdThing(newResult);
})
.then(function(finalResult) {
console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);
then里的参数是可选的,
catch(failureCallback) 是 then(null, failureCallback) 的缩略形式
P1
.then(step1)
.then(step2)
.then(step3)
.then(
console.log
console.error)
// 如果console.log函数执行了,只能显示最后一个step3的promise的成功返回值,但是console.error却可以显示step1到step3的失败。
// 是因为当第一个promise失败时,后面的resolve的函数不再执行,而是一致找到reject函数并且执行
.all()
all()返回一个promise实例,参数中不是promise对象完成或这promise对象回调函数(resolve)执行成功,如果参数中promise有一个失败,就回调reject,并且返回第一个失败的promise的结果。 例如:
const p1 = Promise.all([1,2,3]) //参数可以是数组和字符串,只要是可迭代对象
const p2 = Promise.all([1,2,3,Promise.resolve(4)])
const p3 = Promise.all([1,2,3,Promise.reject(5)])
setTimeout(function(){
console.log(p1); //
console.log(p2);
console.log(p3);
});

promise.all()是一个异步过程,如果参数里传入一个空,就会使同步任务
let resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
let p = Promise.all(resolvedPromisesArray);
console.log(p);
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
});

let p = Promise.all([]);
let p2 = Promise.all([1337, "hi"]);
console.log(p);
console.log(p2)
setTimeout(function(){
console.log('the stack is now empty');
console.log(p2);
});

.race
方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。
返回值: 一个待定的 Promise 只要给定的迭代中的一个promise解决或拒绝,就采用第一个promise的值作为它的值,从而异步地解析或拒绝(一旦堆栈为空)。
let p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
let p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// 两个都完成,但 p2 更快
});
let p3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "three");
});
let p4 = new Promise(function(resolve, reject) {
setTimeout(reject, 500, "four");
});
Promise.race([p3, p4]).then(function(value) {
console.log(value); // "three"
// p3 更快,所以它完成了
}, function(reason) {
// 未被调用
});
let p5 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "five");
});
let p6 = new Promise(function(resolve, reject) {
setTimeout(reject, 100, "six");
});
Promise.race([p5, p6]).then(function(value) {
// 未被调用
}, function(reason) {
console.log(reason); // "six"
// p6 更快,所以它失败了
});
总结
promise的优点是让回调函数有个规范写法,链式写法让代码看起来更加美观简介,只是回调函数需要从里面仔细辨别 promise是异步任务,也是微任务,在同步任务完成后紧接着执行,在setTimeout异步任务之前。它们的区别在于,正常任务追加到下一轮事件循环,微任务追加到本轮事件循环。这意味着,微任务的执行时间一定早于正常任务。