1.什么是Promise
是一种异步编程解决方案,Promise是一个容器,保存着将来才会执行的代码;从语法角度来说Promise是一个对象,可以用来获取异步操作的消息。异步操作,同步解决,避免了层层嵌套的回调函数,可以链式调用降低了操作难度
2.Promise用法
实例化:
1.参数:Promise构造函数接收一个函数作为参数,也就是回调函数;该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数,reject作为失败的回调函数。
promise(function(resolve,reject))
2.三种异步操作的状态:
pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。
实例方法:
then(res=>{}) 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
参数:回调函数,回调函数的参数为resolve函数传递过来的值
返回值:返回一个新的Promise实例对象,因此可以使用链式调用
catch(err=>{}) 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
参数:回调函数,回调函数的参数为reject函数传递过来的值
返回值:返回一个新的Promise实例对象,因此可以使用链式调用
finally()无论异步操作执行成功失败与否,都会执行该回调
参数:回调函数
返回值:返回一个新的Promise实例对象
3.例子:
let promise = new Promise((resolve, reject) => {
if (3 > 2) {
resolve('success')
} else {
reject('error')
}
})
console.log(promise, '承诺对象');
// 实例方法 成员方法
// resolve由then方法提供 reject由catch提供方法提供
// then 一个参数:请求成功的回调 两个参数:一个成功、一个失败
// 1、then含一个参数
promise.then(
// 执行成功回调函数
(res) => {
console.log(res, '请求成功');
}
).catch(
// 执行失败的回调函数
(err) => {
console.log(err, '请求失败');
}
).finally(
() => {
console.log('最终执行');
}
)
// 2、then含两个参数
// promise.then(res => {
// console.log(res, '请求成功');
// }, err => {
// console.log(err, '请求失败');
// })
3.使用Promise封装ajax
需求:当我们需要发送多个请求时,可以采用工厂模式将ajax封装起来
// 创建多个承诺对象的实例
function promise(method, url, obj) {
return new Promise((reslove, reject) => {
// 封装ajax
let xhr = new XMLHttpRequest()
// 打开一个连接
xhr.open(method, url)
// 发送请求
xhr.send()
// 接收响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 代表请求成功
reslove(xhr.responseText)
} else {
// 代表请求失败
reject(xhr.responseText)
}
}
}
})
}
let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles')
let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll')
// 1、实例方法
p1.then(res => {
console.log(res, '响应1');
})
p2.then(res => {
console.log(res, '响应2');
})
4.Promise的静态方法
定义:静态方法只能由构造函数本身去调用
Promise.all([p1,p2])
参数:数组,数组中的元素为Promise实例
返回值:Promise实例,当p1,p2状态都为fulfilled时候,该实例的状态才为fulfilled,此时p1,p2的返回值组成一个数组,传递给该实例的回调函数;只要p1,p2的返回值有一个变为rejected,该实例状态为rejected;
Promise.race([p1,p2]) 赛跑返回先请求成功的实例
参数:数组,数组中的元素为Promise实例 返回值:Promise实例,当p1,p2之中有一个实例率先改变状态,该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给该实例的回调函数。
Promise.any([p1,p2])
参数:数组,数组中的元素为Promise实例 返回值:Promise实例,只要p1,p2状态有一个变为fulfilled,该实例的状态为fulfilled;p1,p2状态都变为rejected,该实例状态才为rejected
静态方法的例子:
// 创建多个承诺对象的实例
function promise(method, url, obj) {
return new Promise((reslove, reject) => {
// 封装ajax
let xhr = new XMLHttpRequest()
// 打开一个连接
xhr.open(method, url)
// 发送请求
xhr.send()
// 接收响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 代表请求成功
reslove(xhr.responseText)
} else {
// 代表请求失败
reject(xhr.responseText)
}
}
}
})
}
let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles')
let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll')
// console.log(p1);
// console.log(p2);
// 2、静态方法 只能由构造函数本身去调用
// 2.1 all-只有请求全部成功才返回 参数由实例组成的数组 返回值:返回promise实例
// let res = Promise.all([p1, p2])
// 2.2 any-任意一个实例状态成功则返回成功实例 参数由实例组成的数组 返回值:返回promise实例
// let res = Promise.any([p1, p2])
// 2.3 race-返回先成功的实例 参数由实例组成的数组 返回值:返回promise实例
// let res = Promise.race([p1, p2])
// 2.4 allSettle-
/*all和allSettle的区别
1.返回的处理格式问题 array:[{},{}]
2.all 实例 pendding
*/
// let res = Promise.allSettled([p1, p2])
console.log(res);
res.then(res => {
console.log(res, '请求成功');
})
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_48109675/article/details/126936841