8、同步与异步（回调、Promise、async函数）-阿里云开发者社区

8、同步与异步（回调、Promise、async函数）

2022-11-22 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 8、同步与异步（回调、Promise、async函数）

1、同步

一条一条数据按顺序执行

2、异步

前一条数据不影响后一条数据执行

3、前端中常见的两种异步情况

类型
1、ajax	向后台请求数据
2、计时器	setInterval、setTimeout

4、获取异步的方法（回调函数）-回调地狱

回调地狱：为了解决异步问题，不断嵌套回调函数，非常难维护

    function getTea(fn) {
      setTimeout(() => {
        fn("奶茶");
      }, 2000)
    }
    function getHotPot(fn) {
      setTimeout(() => {
        fn("火锅");
      }, 1000)
    }
    // 回调地狱：为了解决异步问题，不断嵌套回调函数，非常难维护
    getTea(function (data) {
      console.log(data);
      getHotPot(function (data) {
        console.log(data);
      });
    });
    // 输出结果：奶茶，火锅

5、获取异步的方法（Promise）

  <script>
    let tea = new Promise((resolve, reject) => {
      setTimeout(() => {
        let flag = true;
        if (flag) {
          resolve("奶茶");
        } else {
          reject("获取奶茶失败");
        }
      }, 2000)
    })
    let hotPot = new Promise((resolve, reject) => {
      setTimeout(() => {
        let flag = true;
        if (flag) {
          resolve("火锅");
        } else {
          reject("获取火锅失败");
        }
      }, 1000)
    })
    // 按次序获取异步数据
    tea.then((data) => {
      console.log(data);
      return hotPot;
    }).then((data) => {
      console.log(data);
    }).catch((err) => {
      console.log(err);
    })
  </script>

6、获取异步的方法（async函数）

<script>
    let tea = new Promise((resolve, reject) => {
      setTimeout(() => {
        let flag = true;
        if (flag) {
          resolve("奶茶");
        } else {
          reject("获取奶茶失败");
        }
      }, 2000)
    })
    let hotPot = new Promise((resolve, reject) => {
      setTimeout(() => {
        let flag = true;
        if (flag) {
          resolve("火锅");
        } else {
          reject("获取火锅失败");
        }
      }, 1000)
    })
    // async函数（语法糖），跟同步非常类似
    async function fun() {
      let dataTea = await tea;
      console.log(dataTea);
      let dataHotPot = await hotPot;
      console.log(dataHotPot);
    }
    fun();
  </script>