js中Promise的基本概念和方法
一:概念:1、创建promise: new Promise (executor); executor是同步执行的函数new Promise(function (resolve, reject) {console.log('I promise')})console.log('after')//log: I promiseafter二:特点:1、Promise的状态:1)->pedding(进行
一:概念:
1、创建promise: new Promise (executor); executor是同步执行的函数
new Promise(function (resolve, reject) {
console.log('I promise')
})
console.log('after')
// log: I promise after
二:特点:
1、Promise的状态:1)->pedding(进行中), fufilled ( resolve(已成功),reject(已失效));对象的状态不受外界的影响;
2、状态是不可逆的;promise固化以后,在对promise对象添加回调,是可以直接拿到这个结果的;如果说是事件的化,一旦错过了,就真的错过了
3、promise本身是异步操作
4、resolve(),reject()异步函数;p.then(cb) - cb异步回调函数
let p = new Promise (function (resolve, reject) {
resolve(1)
console.log(0);
})
// console.log('after')
p.then(val => {
console.log(val);
});
console.log(2) // 0 2 1
5、链式调用:返回的成功和失败的promise可有.then再一次调用
let p = new Promise(function (resolve, reject) {
resolve(1)
})
// console.log('after')
p.then(val => {
return new Promise((resolve, reject) => { // 返回成功的结果
resolve('y-promise')
})
}, err => {
return 3
}).then(
(val) => {
console.log(val); // y-promise
},
(reason) => {
console.log(reason);
})
6、固化之后捕获不到错误
let promise = new Promise(
function (resolve, reject) {
resolve('a')
}
)
promise.then().then().then(val => { // 未传参数被忽略
console.log(val) // a
}, err => {})
8、状态依赖
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(new Error('fail'))
}, 2000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(p1) // p2 中的p1状态结果出现错误会被捕获
}, 1000)
})
p2.then((val) => {
console.log(val);
}).catch((err) => {
console.log(err); // Error: fail
})
三:promise解决的问题
1、回调地狱:另一个函数的执行的需要依赖上一次回调的结果,会产生回调地狱(文件读取)
2、try {}catch(e){} 能捕获同步的异常,异步产生的异常不能捕获;
3、以前写法,不好维护,不便扩展
4、同步并发异步代码的问题
四:方法:
1、Promise.all([p1, p2, p3, p4]) ->iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的输入只返回一个Promise实例 ;
成功的结果:结果是resolve数据组成的一个数组;
等待所有参数中的resolve结束才返回一个promise;
出现错误返回第一个出现reject的错误的类型;
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'one');
});
var p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, 'two');
});
var p3 = new Promise((resolve, reject) => {
setTimeout(reject, 300, 'three');
});
var p4 = new Promise((resolve, reject) => {
setTimeout(resolve, 400, 'four');
});
var p5 = new Promise((resolve, reject) => {
// reject('reject');
// resolve('2')
resolve('fail')
});
Promise.all([p1, p2, p3, p4, p5]).then(values => {
console.log(values);
}, reason => {
console.log(reason) // 'three'
});
2、Promise.race([ iterator ]) // 参数中的哪一个promise执行的快就返回哪一个执行的promise结果和状态
var p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('one')
}, 200)
})
var p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('two')
}, 300)
})
var p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('three')
}, 4000)
})
var p4 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('four')
}, 500)
})
var p5 = new Promise((resolve, reject) => {
reject('p5')
})
const res = Promise.race([p1, p2, p5, p3, p4])
console.log(res); // promise reject[[Prototype]]: Promise
// [[PromiseState]]: "rejected"
// [[PromiseResult]]: "p5
3、Promise.resolve(); 返回resolve(解决)的promise对象
Promise.reject(); 返回reject(拒绝)的promise对象;
4、Promise.prototype.then( (val) => { }, (err) => { } ) 第一个参数表示解决的值;第二个参数表示拒绝值
Promise.prototype.catch(err => { }) 捕获拒绝的值;
Promise.prototype.finally( cb ) 方法返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数
五:异步任务优先级(宏和微)
1、微任务优先级更高
// 先执行微任务
Promise.resolve().then(() => {
console.log('promise1');
setTimeout(() => { // 遇到异步丢到异步队列中
console.log('setTimeout2');
})
})
// 在执行宏任务
setTimeout( () => {
console.log('setTimeout1');
Promise.resolve().then(() => { // 丢到异步队列中微任务先执行
console.log('promise2');
})
})
// promise1 setTimeout1 promise2 setTimeout2
更多推荐
所有评论(0)