Promise.all中加上loading
时间: 2023-11-02 14:01:39 浏览: 37
在使用Promise.all方法时,如果需要在所有的promise都完成之前显示loading状态,可以通过在Promise.all的参数中添加一个新的promise来实现。该新的promise用于显示loading状态,当所有的promise都完成后,该promise会被resolve,然后可以隐藏loading状态。
代码示例:
```
async function onSubmit() {
// 显示loading状态
showLoading();
// 使用Promise.all,并添加一个新的promise来显示loading状态
const [res, cus, code] = await Promise.all([
getStoken(this.getLoginParams()),
getCustomerId(this.getCusParams()),
this.wrapLogin(),
new Promise((resolve) => setTimeout(resolve, 2000)), // 添加新的promise来显示loading状态,设置一个延迟时间来模拟异步操作
]);
// 隐藏loading状态
hideLoading();
// 其他逻辑代码...
}
// 其他相关代码...
```
相关问题
promise.all中如何修改
Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。如果所有的 Promise 实例都变为fulfilled状态,Promise.all() 返回的实例才会变为fulfilled状态,返回值是一个数组,包含所有 Promise 实例的返回值。如果其中一个 Promise 实例变为rejected状态,Promise.all() 返回的实例就会变为rejected状态,返回值是第一个被rejected的 Promise 实例的返回值。
如果需要在 Promise.all() 中修改某个 Promise 实例的状态,可以使用 Promise.race() 方法。Promise.race() 方法同样接受一个 Promise 实例的数组作为参数,并返回一个新的 Promise 实例。不同的是,Promise.race() 方法只要有一个 Promise 实例变为fulfilled状态或者rejected状态,就会返回相应状态的结果,并忽略其他 Promise 实例的状态。
因此,可以将需要修改状态的 Promise 实例与一个永远不会变为fulfilled状态或者rejected状态的 Promise 实例一起传递给 Promise.race() 方法,这样只要修改了需要修改的 Promise 实例的状态,Promise.race() 就会返回相应的结果。例如,以下代码演示了如何修改 Promise.all() 中某个 Promise 实例的状态:
```javascript
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('error'));
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'resolved');
});
Promise.race([promise2, new Promise(() => {})]).catch(() => {
// 修改 promise1 的状态为 rejected
Promise.resolve(promise1).then(() => {
throw new Error('error');
});
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
}).catch((error) => {
console.error(error);
});
```
在该代码中,我们使用了 Promise.race() 方法将 promise2 和一个永远不会变为fulfilled状态或者rejected状态的 Promise 实例一起传递给它。在 Promise.race() 中,我们使用 catch() 方法捕获了 promise2 的 rejected 状态,并在 catch() 方法中修改了 promise1 的状态为 rejected。由于 Promise.race() 只要有一个 Promise 实例变为fulfilled状态或者rejected状态就会返回相应的结果,因此,当 promise1 的状态被修改为 rejected 时,Promise.race() 返回该状态的结果,从而使得 Promise.all() 也变为 rejected 状态,最终输出错误信息。
promise.all promise.race 区别
promise.all和.promise.race都是Promise的方法,但是它们的作用不同。
promise.all方法接收一个Promise数组作为参数,返回一个新的Promise对象,当所有的Promise对象都成功时,返回的Promise对象才会成功,返回的值是一个数组,数组中的值是每个Promise对象的返回值。如果其中任何一个Promise对象失败,返回的Promise对象就会失败,失败的原因是第一个失败的Promise对象的错误信息。
promise.race方法也接收一个Promise数组作为参数,返回一个新的Promise对象,当其中任何一个Promise对象成功或失败时,返回的Promise对象就会成功或失败,返回的值是第一个成功或失败的Promise对象的返回值。
因此,promise.all和promise.race的区别在于,promise.all要求所有的Promise对象都成功,而promise.race只要求其中任何一个Promise对象成功或失败。