ES6--Promise&模块化编程（详细解析！以及使用案例! 建议收藏！）

酸奶代码

于 2024-07-16 18:21:54 发布

阅读量836

点赞数 26

CC 4.0 BY-SA版权

文章标签： es6 前端 ecmascript 开发语言 java

本文链接：https://blog.csdn.net/m0_74301606/article/details/140458427

1. Promise的基本介绍

1. 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够

直观，就是常说的 Callback Hell。

2. 为了解决上述的问题， Promise 对象应运而生，在 EMCAScript 2015 当中已经成为标准

3. Promise 是ajax异步编程的一种解决方案。

4. 从语法上说， Promise 是一个 对象 ，从它可以获取异步操作的消息

2. 做一个Promise的应用案例

1. 首先创建monster.json

2. 创建monster_detail_1.json

2.1. 用JQuery的Ajax解决

先展示结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
</head>
<body>
<script src="jquery-3.6.0.min.js"></script>
<script>
  $(function () {
    $.ajax({
      url:"data/monster.json",
      //这里采用的是ES6方法简写的形式！
      success(data,status,xhr){
        console.log("第一次ajax请求访问的数据是=>",data)
          //在正确的基础上再次进行ajax请求
          $.ajax({
              url:`data/monster_detail_${data.id}.json`,
              success(data){
                  console.log("第二次访问ajax请求的数据=>",data)
              },
              error(error) {
                  console.log("error=>", error)
              }
          })
      },
      error(err){
        console.log("err=>",err)
      }
    })
  })
</script>
</body>
</html>

出现的问题

不懂ajax的小伙伴可以去我的博客去看ajax ajax

我们可以看出用$.ajax()方法，首先去拿去第一个json文件的数据，再根据第一个json文件的数据，去寻找第二个json文件，出现了回调函数嵌套的问题。虽然现在看起来没啥，但是如果嵌套多了，代码就会显得更加的冗杂，不易解读。

2.2. 用Promise的Ajax解决

先展示结果：

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用promise完成多次ajax请求</title>
  <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
  <script type="text/javascript">

    //先请求到monster.json
    //1. 创建Promise对象
    //2. 构造