文章目录
Promise的理解
什么是Promise
Promise是JS解决异步编程的新的解决方案。
Promise是一个构造函数,promise对象对异步操作以及获取的结果进行封装。
Promise的状态
- pending 变为 fulfilled,表示成功
- pending 变为 rejected,表示失败
Promise的状态改变只有这两种,不能从fulfilled 变为 pending,也不能从fulfilled变为rejected,因此一个Promise对象的状态只能改变一次。
无论是成功还是失败,最后都会返回一个数据,成功时返回data数据,失败时返回error数据。
Promise的使用
// 1.创建promise对象
const p = new Promie((resolve, reject) => {
// 2.异步操作
// 3.1成功执行异步操作执行resolve(),接受data参数
resolve(data);
// 3.2失败执行异步操作执行reject(),接受error参数
reject(eror);
})
// 第一个参数为成功执行resolve()后调用的回调函数
// 第二个参数为成功执行reject()后调用的回调函数
p.then(data => {}, error => {})
如果时间戳为偶数则成功,奇数则失败:
// 1.创建promise对象
const p = new Promise((resolve, reject) => {
// 2.执行异步任务
setTimeout(() => {
const timer = Date.now()
// 3.1成功时调用resolve函数
if (timer % 2 === 0) {
resolve('芜湖成功!' + timer);
}
// 3.2失败时调用reject函数
else {
reject('多捞哦' + timer)
}
}, 1500);
})
// 4.调用成功 / 失败的回调函数
p.then(
// 接受得到成功的value
data => {
console.log('成功的回调', data);
},
// 接收得到失败的error
error => {
console.log('失败的回调', error);
})
resolve方法
Promise.resolve(value)
参数value可以是Promise对象,也可以是其他类型数据
当value是Promise对象时,Promise对象的结果决定了resolve()的结果
let p1 = Promise.resolve(new Promise((resolve, reject) => {
resolve('芜湖!!')
}))
console.log(p1)
let p2 = Promise.resolve(new Promise((resolve, reject) => {
reject('多捞哦')
}))
console.log(p2);
p2.catch(error => {
console.log(error);
})
对于p1来说,promise对象作为参数时,结果是成功的,所以resolve的结果也是成功的fulfilled
而p2,promise对象的结果是失败的,所以resolve的结果也是失败的rejected
而当参数为非promise对象时,返回的都是成功的promise对象
let p3 = Promise.resolve({
name: 'pyy'
});
let p4 = Promise.resolve(() => {});
let p5 = Promise.resolve('彭于晏')
console.log(p3);
console.log(p4);
console.log(p5);
reject方法
Promise.reject(error)
reject的error无论是什么类型的参数,reject返回的结果永远都是失败的,而且传入的参数是什么,失败返回的结果就是什么。
let p1 = Promise.reject('pyy')
let p2 = Promise.reject({})
let p3 = Promise.reject(() => {})
console.log(p1);
console.log(p2);
console.log(p3);
p1.catch(error => {})
p2.catch(error => {})
p3.catch(error => {})
let p4 = Promise.reject(new Promise((resolve, reject) => {
resolve('芜湖')
}))
console.log(p4);
p4.catch(error => {})
all方法
Promise.all([])
all方法接受一个 元素都是Promise对象组成的数组 作为参数。
当数组的每一个promise对象结果都是成功,all方法返回的结果就是成功的,而且返回的内容就是每一个promise对象的结果值。
let p1 = Promise.resolve('芜湖!')
let p2 = Promise.resolve('起飞!')
let p3 = Promise.resolve('全体起立!')
const result = Promise.all([p1, p2, p3])
console.log(result);
当数组中有失败的promise对象时,all方法返回的结果就是失败的,而且返回的内容就是失败的promise对象的结果值。
let p1 = Promise.resolve('芜湖!')
let p2 = Promise.resolve('起飞')
let p3 = Promise.reject('超逊的')
const result = Promise.all([p1, p2, p3])
console.log(result);
race方法
race()方法接受的参数和all一样,也是由promise对象组成的数组,但是race方法返回的结果取决于第一个改变状态的promise对象。
let p1 = Promise.resolve('芜湖!')
let p2 = Promise.resolve('起飞')
let p3 = Promise.reject('超逊的')
const result = Promise.race([p1, p2, p3])
// p1首先改变状态
console.log(result);
let p1 = Promise.resolve(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('芜湖')
}, 1000);
}))
let p2 = Promise.reject('起飞')
let p3 = Promise.reject('超逊的')
const result = Promise.race([p1, p2, p3])
// p2首先改变状态
console.log(result);