Axios 实现商品分类

核心步骤：

* 1. 获取所有一级分类数据

* 2. 遍历id，创建获取二级分类请求

* 3. 合并所有二级分类Promise对象

* 4. 等待同时成功后，渲染页面

    //  1. 获取所有一级分类数据
    axios({ url: 'http://hmajax.itheima.net/api/category/top' }).then(result => {
      console.log(result)
      //2. 遍历id，创建获取二级分类请求
      const list = result.data.data.map(item => {
        return axios({
          url: 'http://hmajax.itheima.net/api/category/sub',
          params: {
            id: item.id
          }
        })
      })
      console.log(list)
      //3. 合并所有二级分类Promise对象   Promise 对象就是所有axios函数的返回值
      const p = Promise.all(list)
      p.then(result => {
        console.log(result)
        // 4. 等待同时成功后，渲染页面
        const htmlStr = result.map(item => {
          // 取出关键的数据对象
          const dataObj = item.data.data
          return `

        
分类名字
        

          ${dataObj.children.map(item => {
            return `

            
              ${item.picture}">
              
${item.name}
            
          `
          }).join('')}
        
      `
        }).join('')
        console.log(htmlStr)
        document.querySelector('.sub-list').innerHTML = htmlStr
      })

    })

文章内添加@[TOC]自动根据文章标题生成目录

---