Ajax-案例-商品分类

分类名字#

• 

  巧克力

• 

  巧克力

• 

  巧克力

• 

  巧克力

案例-商品分类#

需求：尽可能同时展示所有商品分类到页面上

步骤：

1. 获取所有的一级分类数据
2. 遍历id，创建获取二级分类请求
3. 合并所有二级分类Promise对象
4. 等待同时成功，开始渲染页面

// 1.一级分类
axios({
    url: 'http://hmajax.itheima.net/api/category/top'
}).then(res => {
    console.log(res);
    // 遍历
    const secPromiseList = res.data.data.map(item => {
        return axios({
            url: 'http://hmajax.itheima.net/api/category/sub',
            params: {
                // 一级分类的id
                id: item.id
            }
        })
    });
    // 二级分类请求Promise对象数组
    console.log(secPromiseList);
    // 3.合并
    const p = Promise.all(secPromiseList)
    p.then(res => {
        console.log(res);
        // 4.渲染
        const htmlStr = res.map(item => {
            const dataObj = item.data.data; // 取出关键数据对象，每个二级分类的数据
            // 取出二级分类下所有商品
            const liStr = dataObj.children.map(liItem => {
                return `<li>
                    <a href="javascript:;">
                        <img src="${liItem.picture}" />
                        <p>${liItem.name}</p>
                    </a>
                </li>`
            }).join('');
            // 将获取到的二级分类下所有商品数据及二级分类名填入
            return `<div class="item">
            <h3>${dataObj.name}</h3>
                <ul>
                    ${liStr}
                </ul>
            </div>`
        }).join('')
        document.querySelector('.sub-list').innerHTML = htmlStr
    })
})