Ajax-Promise.all静态方法

535 词
Promise.all静态方法

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); })