前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（四）

你可以的，去飞吧！

同步代码和异步代码

回调函数地狱和 Promise 链式调用

回调函数地狱

缔造“回调地狱”↓

制造里层回调错误，却在最外层接收错误→无法捕获

axios源码抛出异常（未捕获）

  
  
  
  



  

    省份：
    
      
    
    城市：
    
      
    
    地区：
    
      
    
  
  
  

总结：

Promise - 链式调用

实操：

总结：

async 和 await 使用

使用方法

在async函数中使用await直接获取Promise对象成功状态的结果值

完整代码：

  
  
  
  



  

    省份：
    
      
    
    城市：
    
      
    
    地区：
    
      
    
  
  
  

async函数和await_捕获错误

在area后面加了“1”，用comsole.dir打印错误信息，

接口返回的，真正的响应数据在错误对象（该对象中有着axios处理过的提供的一些其他信息）的response属性

还可以到网络里查看到

疑问：省份和城市应该获取成功，为什么没有展示？

——在try语句中，如果某句代码发生错误，后面的不会再执行。

  
  
  
  



  

    省份：
    
      
    
    城市：
    
      
    
    地区：
    
      
    
  
  
  

事件循环-EventLoop

事件循环

运行结果都是1 3 2

调用栈：可以理解为 JS代码在运行时形成的调用环境

宿主环境：浏览器（注意：浏览器是多线程的，JS是单线程的）

任务队列：内存开辟的一块空间

代码及答案：

宏任务与微任务

宏任务与微任务 - 执行顺序

什么是宏任务

——交给浏览器管理和执行的异步代码

什么是微任务（在JS引擎中执行，先与宏任务执行）

——JS引擎发起和管理执行的异步代码

经典面试题

Promise.all 静态方法

合并多个Promise对象：

展出数据，可使用低速网络查看是否同时展示

测试catch，在weather后面加123

进catch不进then

案例 - 商品分类

  
  
  
  
  



  
  

    

      

        
分类名字
        

          

            
              
              
巧克力
            
          
          

            
              
              
巧克力
            
          
          

            
              
              
巧克力
            
          
        
      
    
  
  
  

效果：先是默认的HTML结构，全部请求完成后才重新渲染展示如下

案例 - 学习反馈

样式结构：

  
  
  
  
  
  
  
  
  
  



  

    
学习反馈
    
    

      

        热门校区
        

          
北京 
          
上海 
          
广州 
          
深圳 
        
      
      

        

          地区选择
          
            省份
          
          
            城市
          
          
            地区
          
        
        

          您的称呼
          
        
        

          宝贵建议
          
        
        

          
            确定提交
          
        
      
    
  
  
  
  
  

功能核心JS代码：

/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */
// 1.1 设置省份下拉菜单数据
axios({
  url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
  const optionStr = result.data.list.map(pname => `${pname}`).join('')
  document.querySelector('.province').innerHTML = `省份` + optionStr
})

// 1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
document.querySelector('.province').addEventListener('change', async e => {
  // 获取用户选择省份名字
  // console.log(e.target.value)
  const result = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
  const optionStr = result.data.list.map(cname => `${cname}`).join('')
  // 把默认城市选项+下属城市数据插入select中
  document.querySelector('.city').innerHTML = `城市` + optionStr

  // 清空地区数据
  document.querySelector('.area').innerHTML = `地区`
})

// 1.3 切换城市，设置地区下拉菜单数据
document.querySelector('.city').addEventListener('change', async e => {
  console.log(e.target.value)
  const result = await axios({url: 'http://hmajax.itheima.net/api/area', params: {
    pname: document.querySelector('.province').value,
    cname: e.target.value
  }})
  console.log(result)
  const optionStr = result.data.list.map(aname => `${aname}`).join('')
  console.log(optionStr)
  document.querySelector('.area').innerHTML = `地区` + optionStr
})

/**
 * 目标2：收集数据提交保存
 *  2.1 监听提交的点击事件
 *  2.2 依靠插件收集表单数据
 *  2.3 基于axios提交保存，显示结果
 */
// 2.1 监听提交的点击事件
document.querySelector('.submit').addEventListener('click', async () => {
  // 2.2 依靠插件收集表单数据
  const form = document.querySelector('.info-form')
  const data = serialize(form, { hash: true, empty: true })
  console.log(data)
  // 2.3 基于axios提交保存，显示结果
  try {
    const result = await axios({
      url: 'http://hmajax.itheima.net/api/feedback',
      method: 'POST',
      data
    })
    console.log(result)
    alert(result.data.message)
  } catch (error) {
    console.dir(error)
    alert(error.response.data.message)
  }
})

效果：