Promise.all静态方法#
概念:合并多个Promise对象,等待所有 同时成功 完成(或某一个失败),做后续逻辑
语法:
const p = Promise.all([Promise对象, Promise对象, ...])
p.then(res => {
// res结果:[Promise对象成功结果,Promise对象成功结果,...]
}).catch(err => {
// 第一个失败的Promise对象抛出的异常
})
练习-同时显示多地天气#
需求:同时请求'北京'、'上海'、'广州'、'深圳'的天气并在页面上尽可能 同时 显示
// 1.请求城市天气,得到Promise对象
// 使用数组的方式创建
const cities = [
{name: 'bjPromise',cityCode: '110100'},
{name: 'shPromise',cityCode: '310100'},
{name: 'gzPromise',cityCode: '440100'},
{name: 'szPromise',cityCode: '440300'}
];
const cityPromises = cities.map(cityItem => {
return axios({
url: 'http://hmajax.itheima.net/api/weather',
params: {
city: cityItem.cityCode
}
})
});
// 2.使用Promise.all合并多个Promise对象
const p = Promise.all(cityPromises)
p.then(res => {
// 注意:结果数组顺序与合并时顺序一致
console.log(res);
const wStr = res.map(item => {
return `${item.data.data.area}--${item.data.data.todayWeather.weather}
`
}).join('')
document.querySelector('.weatherbox').innerHTML = wStr
}).catch(err => {
console.log(err);
})