• AJAX——Promise-链式调用

    1.Promise链式调用

    概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，知道结束

    细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果

    好处：通过链式调用，解决回调函数嵌套问题

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Promise_链式调用</title>
    9. </head>
    10.  
    11. <body>
    12.   <script>
    13.     /**
    14.      * 目标：掌握Promise的链式调用
    15.      * 需求：把省市的嵌套结构，改成链式调用的线性结构
    16.     */
    17.    // 1. 创建Promise对象-模拟请求省份名字
    18.    const p = new Promise((resolve,reject) => {
    19.     setTimeout(() => {
    20.       resolve('北京市')
    21.     },2000)
    22.    })
    23.  
    24.    // 2. 获取省份名字
    25.    const p2 = p.then(result => {
    26.     console.log(result)
    27.     // 3.创建Promise对象-模拟请求城市名字
    28.     // return Promise对象最终状态和结果，会影响到新的Promise对象
    29.     return new Promise((reselve,reject) => {
    30.       setTimeout(() => {
    31.         resolve(result + '--- 北京')
    32.       },2000)
    33.     })
    34.    })
    35.  
    36.   //  4.获取城市名字
    37.   p2.then(result => {
    38.     console.log(result)
    39.   })
    40.    // then()函数的结果是一个新的Promise对象
    41.    console.log(p2 === p)
    42.   </script>
    43. </body>
    44.  
    45. </html>

     2.Promise链式应用-解决回调函数地狱

    目标：使用Promise链式调用，解决回调函数地狱问题

    做法：每个Promise对象中管理一个异步任务，用then返回Promise对象，串联起来

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Promise链式调用_解决回调地狱</title>
    9. </head>
    10.  
    11. <body>
    12.   <form>
    13.     <span>省份：</span>
    14.     <select>
    15.       <option class="province"></option>
    16.     </select>
    17.     <span>城市：</span>
    18.     <select>
    19.       <option class="city"></option>
    20.     </select>
    21.     <span>地区：</span>
    22.     <select>
    23.       <option class="area"></option>
    24.     </select>
    25.   </form>
    26.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    27.   <script>
    28.     /**
    29.      * 目标：把回调函数嵌套代码，改成Promise链式调用结构
    30.      * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    31.     */
    32.     let pname = ''
    33.     // 1. 得到-获取省份Promise对象
    34.     axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
    35.       pname = result.data.list[0]
    36.       document.querySelector('.province').innerHTML = pname
    37.       // 2. 得到-获取城市Promise对象
    38.       return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
    39.     }).then(result => {
    40.       const cname = result.data.list[0]
    41.       document.querySelector('.city').innerHTML = cname
    42.       // 3. 得到-获取地区Promise对象
    43.       return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
    44.     }).then(result => {
    45.       console.log(result)
    46.       const areaName = result.data.list[0]
    47.       document.querySelector('.area').innerHTML = areaName
    48.     })
    49.   </script>
    50. </body>
    51.  
    52. </html>

    3.async函数和await

    定义：async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

    概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>async函数和await_解决回调函数地狱</title>
    9. </head>
    10.  
    11. <body>
    12.   <form>
    13.     <span>省份：</span>
    14.     <select>
    15.       <option class="province"></option>
    16.     </select>
    17.     <span>城市：</span>
    18.     <select>
    19.       <option class="city"></option>
    20.     </select>
    21.     <span>地区：</span>
    22.     <select>
    23.       <option class="area"></option>
    24.     </select>
    25.   </form>
    26.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    27.   <script>
    28.     /**
    29.      * 目标：掌握async和await语法，解决回调函数地狱
    30.      * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
    31.      * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    32.     */
    33.     // 1. 定义async修饰函数
    34.     async function getData() {
    35.       // 2. await等待Promise对象成功的结果
    36.       const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
    37.       const pname = pObj.data.list[0]
    38.       const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
    39.       const cname = cObj.data.list[0]
    40.       const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
    41.       const areaName = aObj.data.list[0]
    42.  
    43.  
    44.       document.querySelector('.province').innerHTML = pname
    45.       document.querySelector('.city').innerHTML = cname
    46.       document.querySelector('.area').innerHTML = areaName
    47.     }
    48.  
    49.     getData()
    50.   </script>
    51. </body>
    52.  
    53. </html>

    4.async函数和await_捕获错误

    使用：try…catch，该语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。  

    语法：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>async函数和await_错误捕获</title>
    9. </head>
    10.  
    11. <body>
    12.   <form>
    13.     <span>省份：</span>
    14.     <select>
    15.       <option class="province"></option>
    16.     </select>
    17.     <span>城市：</span>
    18.     <select>
    19.       <option class="city"></option>
    20.     </select>
    21.     <span>地区：</span>
    22.     <select>
    23.       <option class="area"></option>
    24.     </select>
    25.   </form>
    26.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    27.   <script>
    28.     /**
    29.      * 目标：async和await_错误捕获
    30.     */
    31.     async function getData() {
    32.       // 1. try包裹可能产生错误的代码
    33.       try{
    34.         const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
    35.         const pname = pObj.data.list[0]
    36.         const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
    37.         const cname = cObj.data.list[0]
    38.         const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
    39.         const areaName = aObj.data.list[0]
    40.  
    41.         document.querySelector('.province').innerHTML = pname
    42.         document.querySelector('.city').innerHTML = cname
    43.         document.querySelector('.area').innerHTML = areaName
    44.       } catch (error) {
    45.         // 2. 接着调用catch块，接收错误信息
    46.         // 如果tr里某行代码报错后，try中剩余的代码就不会执行了
    47.         console.dir(error)
    48.       }
    49.  
    50.     getData()
    51.   </script>
    52. </body>
    53.  
    54. </html>

  • 相关阅读:
    vue使日历组件点击时间渲染到时间输入框
    OneFlow如何做静态图的算子对齐任务
    PyQt5_QScrollArea内容保存成图片
    Python基础：输入输出详解-输出字符串格式化
    程序调试技巧
    端到端的机器学习项目（Machine Learning 研习之六）
    2.5 Regression
    混淆矩阵绘制
    新发布的Java使用率均超Java8
    Docker容器数据卷入门教程（超详细）
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/138081196