十七(AJAX4)、同步异步、回调函数地狱、Promise-链式调用、async和await、事件循环eventloop、 (宏)任务和微任务、Promise.all 静态方法

最新推荐文章于 2025-12-27 19:25:02 发布

原创

最新推荐文章于 2025-12-27 19:25:02 发布 · 354 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ajax

1. 同步代码和异步代码

同步代码: 浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作，在上一行完成后才会执行下一行。这样做是很有必要的，因为每一行新的代码都是建立在前面代码的基础之上的。

这也使得它成为一个 同步程序 。

异步代码: 异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任

务完成。与此同时，你的程序也将在任务完成后显示结果。

1. 同步代码: 逐行执行，需原地等待结果后，才继续向下执行

2. 异步代码: 调用后耗时，不阻塞代码继续执行，在将来完成后触发一个回调函数

3. 常见异步代码: 定时器，事件，XHR

4. 如何接收异步代码结果: 回调函数

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>同步代码和异步代码</title>
</head>

<body>
  <h2>同步代码和异步代码</h2>
  <script>
    // 1. 同步
    console.log(1)
    const num = 1 + 1
    console.log(num)
    console.log('-----------')

    // 2.1 异步 定时器：直接输出: 1,3; 一秒之后: 2
    console.log(1)
    setTimeout(() => {
      console.log(2)
    }, 1000)
    console.log(3)
    console.log('-----------')

    // 2.1 异步 事件：直接输出: 1,3; 点击之后: 2
    console.log(1)
    document.body.addEventListener('click', () => {
      console.log(2)
    })
    console.log(3)
    console.log('-----------')

    // 2.3 异步 XHR：直接输出: 1,3; 响应回来: 2
    console.log(1)
    const xhr = new XMLHttpRequest()
    xhr.open('get', 'url地址')
    xhr.addEventListener('loadend', () => {
      console.log(2)
    })
    xhr.send()
    console.log(3)

  </script>
</body>

</html>

2. 回调函数地狱

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回调函数地狱</title>
</head>

<body>
  <h2>回调函数地狱</h2>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.3/axios.js"></script> -->
  <script src="./axios.min.js"></script>
  <script>
    /**
     * 需求: 展示数据到下拉框中
     *  1. 获取省份数据并展示第1个省
     *  2. 获取第1个省的城市数据,并展示第1个城市
     *  3. 获取第1个城市的区数据，并展示第1个区
     * */

    /* 
    回调函数地狱: 在回调函数中调用回调函数，形成的代码结构
    缺点: 可读性差，异常捕获困难
    */

    axios({
      url: 'https://hmajax.itheima.net/api/province',
    }).then(res => {
      // console.log(res)
      const pname = res.data.list[0]
      document.querySelector('.province').innerHTML = pname

      axios({
        url: 'https://hmajax.itheima.net/api/city',
        params: {
          pname
        }
      }).then(res => {
        // console.log(res.data.list)
        const cname = res.data.list[0]
        document.querySelector('.city').innerHTML = cname

        axios({
          url: 'https://hmajax.itheima.net/api/area',
          params: {
            pname,
            cname
          }
        }).then(res => {
          document.querySelector('.area').innerHTML = res.data.list[0]
        })
      })
    })

  </script>

</body>

</html>

3. Promise-链式调用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise-链式调用<

最低0.47元/天解锁文章