轻松理解Promise.all 、Promise.then、Promise.race有什么区别以及使用方法
2024-10-21 04:04:40
简单来说呢，Promse.all一般应用于某个场景需要多个接口数据合并起来才能实现
有个极大地好处我必须说一下，请求顺序和获取数据顺序是一样的哟,大可放心使用~~
const success1 = new Promise((res,rej) => {
const data = {status: 'success', message:'success1'}
res(data)
})
const error1 = new Promise((res,rej) => {
const data = {status: 'error', message:'error1'}
rej(data.message)
})
const success2 = new Promise((res,rej) => {
const data = {status: 'success', message:'success2'}
res(data)
})
const error2 = new Promise((res,rej) => {
const data = {status: 'error', message:'error2'}
rej(data)
})
Promise.all([success1, success2]).then(res => {
console.log('Promise.all([success1, success2]).then')
console.log(res)
}).catch(error => {
console.log('Promise.all([success1, success2]).catch')
console.log(error)
})
// 打印结果
// Promise.all([success1, success2]).then
// 0: {status: "success", message: "success1"}
// 1: {status: "success", message: "success2"}
// length: 2
// __proto__: Array(0)
Promise.all([success1, error1, success2]).then(res => {
console.log('Promise.all([success1, error1, success2]).then')
console.log(res)
}).catch(error => {
console.log('Promise.all([success1, error1, success2]).catch')
console.log(error)
})
// 打印结果
// Promise.all([success1, error1, success2]).catch
// error1
Promise.all([success1, error1, success2, error2]).then(res => {
console.log('Promise.all([success1, error1, success2, error2]).then')
console.log(res)
}).catch(error => {
console.log('Promise.all([success1, error1, success2, error2]).catch')
console.log(error)
})
// 打印结果
// Promise.all([success1, error1, success2, error2]).catch
// error1
总结：按照上面的使用方法
所有结果成功>按顺序返回成功
有一个失败>返回第一个失败的那个
重点来了~~ 解决有一个失败就全盘失败的方法如下
Promise.all(
[
success1.catch(err=>err),
error1.catch(err=>err),
success2.catch(err=>err),
error2.catch(err=>err)
]
)
.then((res) => {
console.log(res)
if (res[0] && res[0].status == 'success') {
console.log('res[0]success', res[0])
} else {
console.log('res[0]error', res[0])
}
if (res[1] && res[1].status == 'success') {
console.log('res[1]success', res[1])
} else {
console.log('res[1]error', res[1])
}
if (res[2] && res[2].status == 'success') {
console.log('res[2]success', res[2])
} else {
console.log('res[2]error', res[2])
}
if (res[3] && res[3].status == 'success') {
console.log('res[3]success', res[3])
} else {
console.log('res[3]error', res[3])
}
})
// 打印结果
// res[0]success {status: "success", message: "success1"}
// res[1]error error1
// res[2]success {status: "success", message: "success2"}
// res[3]error {status: "error", message: "error2"}
来说一下Promise.prototype.then
下个请求依赖上个请求获取的数据
function P1() {
return new Promise((res, rej) => {
const data = { status: 'success', message: 'res2依赖的数据' }
setTimeout(() => {
res(data)
}, 1000)
})
}
function P2(params) {
return new Promise((res, rej) => {
const data = { status: 'success', message: 'res3依赖的数据', r: params }
setTimeout(() => {
res(data)
}, 2000)
})
}
function P3(params) {
return new Promise((res, rej) => {
const data = { status: 'success', message: '最终结果', r: params }
setTimeout(() => {
res(data)
}, 3000)
})
}
try {
P1()
.then((res) => P2(res))
.then((res) => P3(res))
.then((res) => {
console.log(JSON.stringify(res))
})
} catch (e) {
console.log('执行请求出错', e)
}
// 打印结果
// {
// status: 'success',
// message: '最终结果',
// r: {
// status: 'success',
// message: 'res3依赖的数据',
// r: { status: 'success', message: 'res2依赖的数据' },
// },
// }
最后来看一下Promise.race,简单来说就是几个请求比赛跑步，看谁跑得快，跑的最快的就会被直接返回，不论成功还是失败.
let suc1 = new Promise((res, rej) => {
setTimeout(() => {
res('success1000')
}, 1000)
})
let suc2 = new Promise((res, rej) => {
setTimeout(() => {
res('success1500')
}, 1500)
})
let err1 = new Promise((res, rej) => {
setTimeout(() => {
rej('failed500')
}, 500)
})
let err2 = new Promise((res, rej) => {
setTimeout(() => {
rej('failed500')
}, 2000)
})
Promise.race([suc1, err1])
.then((result) => {
console.log(result)
})
.catch((error) => {
console.log(error)
})
// 打印结果
// failed500
Promise.race([suc1, suc2, err2])
.then((result) => {
console.log(result)
})
.catch((error) => {
console.log(error)
})
// 打印结果
// success1000
附promise.race源码，
重点：Constructor.resolve(entries[i]).then(resolve, reject);
通过循环promise 最终的resolve接收为同一个
function race(entries) {
/*jshint validthis:true */
var Constructor = this; // this 是调用 race 的 Promise 构造器函数。
if (!isArray(entries)) {
return new Constructor(function (_, reject) {
return reject(new TypeError('You must pass an array to race.'));
});
} else {
return new Constructor(function (resolve, reject) {
var length = entries.length;
for (var i = 0; i < length; i++) {
Constructor.resolve(entries[i]).then(resolve, reject);
}
});
}
}
总结：由此可以看到，我们可以用它来
1.测试接口的响应速度
2.当用户信号不好的时候可以发出网络不好的提示信息
3.后端代码部署了很多服务器，我们可以看哪个速度快就用哪个的数据
欢迎路过的小伙伴们继续补充哦~~
结语
欢迎大家指出文章需要改正之处~
如果有更好的方法，欢迎大家提出来，共同进步哟~~
最新文章
- MSBuild 编译 C# Solution
- angularjs 解决ng-repeat数组内重复对象报错的问题
- 服务器安装MongoDB
- 纯CSS3技术 加载中
- Spring中@Transactional事务回滚（含实例详细讲解，附源码）
- Ansible安装部署以及常用模块详解
- k8s-N0.4-service
- 吴恩达机器学习笔记2-代价函数I(cost function)
- C#，单元测试
- Java操作MongoDB：连接&增&删&改&查
- hdu 1372 骑士从起点走到终点的步数 (BFS)
- C# 去重处理字符大小写
- 详述 IntelliJ IDEA 插件的安装及使用方法
- unity中Camera.ScreenToWorldPoint
- python创建目录保存文件
- python selenium 常见问题列表
- SVG学习笔录（二）
- vs2015 系统找不到指定的文件（异常来自HRESULT:0x80070002）问题的解决方法
- intellij-idea+maven搭建scala环境
- mint-ui message box 问题；