ajax day4

1、promise链式调用

/**
     * 目标:把回调函数嵌套代码,改成Promise链式调用结构
     * 需求:获取默认第一个省,第一个市,第一个地区并展示在下拉菜单中
    */
    let pname = ''
    axios({
      url: 'http://hmajax.itheima.net/api/province',
    }).then(result => {
      pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // then方法返回一个promise对象 此对象调用then中的result为此处返回的结果
      return axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
    }).then(result => {
      const cname = result.data.list[0]
      document.querySelector('.city').innerHTML = cname
      return axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
    }).then(result => {
      // 此处result为上面请求返回的promise对象
      console.log(result)
    })
    // let pname = ''
    // // 1. 得到-获取省份Promise对象
    // axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
    //   pname = result.data.list[0]
    //   document.querySelector('.province').innerHTML = pname
    //   // 2. 得到-获取城市Promise对象
    //   return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
    // }).then(result => {
    //   const cname = result.data.list[0]
    //   document.querySelector('.city').innerHTML = cname
    //   // 3. 得到-获取地区Promise对象
    //   return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
    // }).then(result => {
    //   console.log(result)
    //   const areaName = result.data.list[0]
    //   document.querySelector('.area').innerHTML = areaName
    // })

2、事件循环请添加图片描述
异步代码交由指定的线程处理, 处理完毕后推入任务队列, 当主线程空闲时就会循环从任务队列中取出异步代码执行请添加图片描述
3、宏任务和微任务请添加图片描述
promise本身是同步的,而then和catch回调函数是异步的

请添加图片描述
例题:
请添加图片描述

答案:1 7 5 6 2 3 4
请添加图片描述
调用栈空闲时,优先清空微任务队列中的回调

4、promise.all 静态方法
什么时候使用:想合并多个promise对象,同时等待大家都成功的结果,然后做后续处理的场景
请添加图片描述
请添加图片描述

  <script>
    /**
     * 目标:掌握Promise的all方法作用,和使用场景
     * 业务:当我需要同一时间显示多个请求的结果时,就要把多请求合并
     * 例如:默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code:
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    // 1. 请求城市天气,得到Promise对象
    const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用Promise.all,合并多个Promise对象
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      // 注意:结果数组顺序和合并时顺序是一致
      console.log(result)
      const htmlStr = result.map(item => {
        return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`
      }).join('')
      document.querySelector('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      console.dir(error)
    })
  </script>

5、axios返回的是一个promise对象,axios.then方法也返回一个新promise对象

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const p = axios({
            url: 'http://hmajax.itheima.net/api/weather',
            params: { city: '110100' }
        })
        console.log(typeof p)
        const p2 = p.then(result => {
            console.log(result)
        })
        console.log(p2 === p)
        console.log(typeof p === typeof p2)
    </script>

在这里插入图片描述
6、案例:
需求:同时展示数据

返回的是一个个promise对象组成的数组请添加图片描述
${}中放一个表达式,map函数调用也是一个表达式
在模板字符串中如何体现循环操作

<script>
    //一级 二级 及所有商品要一起展示
    axios({
      url: 'http://hmajax.itheima.net/api/category/top'
    }).then(result => {
      // console.log(result)
      const arr = result.data.data
      const pArr = arr.map(item => {
        return axios({
          url: 'http://hmajax.itheima.net/api/category/sub',
          params: {
            id: item.id
          }
        })
      })
      //返回一个promise对象组成的数组

      const p = Promise.all(pArr)
      p.then(result => {
        // console.log(result)

        document.querySelector('.sub-list').innerHTML = result.map(item => {
          const itemData = item.data.data
          const children = itemData.children
          // console.log(children)
          return `
          <div class="item">
        <h3>${itemData.name}</h3>
        <ul>
          ${children.map(item => {
            return `<li>
            <a href="javascript:;">
              <img src=${item.picture}>
              <p>${item.name}</p>
            </a>
          </li>`
          }).join('')
            }
        </ul>
      </div>`
        }).join('')
      })
    })
    // /**
    //  * 目标:把所有商品分类“同时”渲染到页面上
    //  *  1. 获取所有一级分类数据
    //  *  2. 遍历id,创建获取二级分类请求
    //  *  3. 合并所有二级分类Promise对象
    //  *  4. 等待同时成功后,渲染页面
    // */
    // // 1. 获取所有一级分类数据
    // axios({
    //   url: 'http://hmajax.itheima.net/api/category/top'
    // }).then(result => {
    //   console.log(result)
    //   // 2. 遍历id,创建获取二级分类请求
    //   const secPromiseList = result.data.data.map(item => {
    //     return axios({
    //       url: 'http://hmajax.itheima.net/api/category/sub',
    //       params: {
    //         id: item.id // 一级分类id
    //       }
    //     })
    //   })
    //   console.log(secPromiseList) // [二级分类请求Promise对象,二级分类请求Promise对象,...]
    //   // 3. 合并所有二级分类Promise对象
    //   const p = Promise.all(secPromiseList)
    //   p.then(result => {
    //     console.log(result)
    //     // 4. 等待同时成功后,渲染页面
    //     const htmlStr = result.map(item => {
    //       const dataObj = item.data.data // 取出关键数据对象
    //       return `<div class="item">
    //     <h3>${dataObj.name}</h3>
    //     <ul>
    //       ${dataObj.children.map(item => {
    //         return `<li>
    //         <a href="javascript:;">
    //           <img src="${item.picture}">
    //           <p>${item.name}</p>
    //         </a>
    //       </li>`
    //       }).join('')}
    //     </ul>
    //   </div>`
    //     }).join('')
    //     console.log(htmlStr)
    //     document.querySelector('.sub-list').innerHTML = htmlStr
    //   })
    // })

  </script>
阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
该代码存在以下问题: 1. 缺少引入 jQuery 库的代码,导致 $ 符号无法使用。 2. 在 $.get() 方法中,未定义 Number 和 day 变量,应该使用 $("#flightNumber").val() 和 $("#date").val() 来获取表单输入的值。 3. 在 $.get() 方法中,回调函数的参数名称应该为 res 而不是 response。 4. 在循环中,应该使用 res[key] 而不是 response[key]。 5. 在标签中使用中文作为 id 属性值,不规范。 改正后的代码如下: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>民航查询</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>民航查询</h1> <form> <label for="flightNumber">航班号:</label> <input type="text" id="flightNumber" name="flightNumber"><br><br> <label for="date">日期:</label> <input type="date" id="date" name="date"><br><br> <input type="submit" id="submit" value="Submit"> </form> <div id="flightNumberResult"></div> <div id="departureResult"></div> <div id="destinationResult"></div> <div id="dateResult"></div> <div id="takeoffTimeResult"></div> <div id="landingTimeResult"></div> <div id="availableTicketsResult"></div> <div id="ticketPriceResult"></div> <div id="discountRateResult"></div> <div id="discountResult"></div> <div id="airlineResult"></div> <script> $(function (){ $("#submit").on('click',function () { var flightNumber = $("#flightNumber").val(); var date = $("#date").val(); $.get('/flightQuery',{flightNumber: flightNumber, date: date},function (res){ for (var key in res) { // 将属性的值渲染到页面中 document.getElementById(key + "Result").innerHTML = key +": "+ res[key]; } }) }) }) </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

learn 11233466

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值