首页 > 其他分享> 文章详细

Promise 回调地狱

2021-07-30 14:32:04 阅读：174 来源： 互联网

标签：地狱 console log resolve Promise reject 回调 hello

网络请求的回调地狱:

一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2

data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3

data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4

发送网络请求url4，获取最终的数据data4

上面代码问题：

正常情况下，不会有什么问题，可以正常运行并且获取结果。

但是这样代码难看且不易维护

解决方法：

使用Promise,Promise可以以一中非常优雅的方式来解决这个问题

下面的demo分别展示了旧式的层层嵌套和promise的链式操作获取：

<template>
  <div>
    <button
      @click="nomarlClick"
      style="height:40px;color:#666;border:1px solid #ccc;"
    >
      点击获取异步层层嵌套取得的数据old
    </button>
    <button
      @click="promiseClick"
      style="height:40px;color:hotPink;border:1px solid #ccc;"
    >
      点击获取异步层层嵌套取得的数据promise
    </button>
  </div>
</template>

<script>
export default {
  name: "profile",
  data() {
    return {};
  },
  methods: {
    // 点击获取异步层层嵌套取得的数据old
    nomarlClick() {
      setTimeout(() => {
        console.log("hello");
        console.log("hello");
        console.log("hello");
        console.log("hello");

        setTimeout(() => {
          console.log("hello Vue");
          console.log("hello Vue");
          console.log("hello Vue");
          console.log("hello Vue");

          setTimeout(() => {
            console.log("hello Promise");
            console.log("hello Promise");
            console.log("hello Promise");
            console.log("hello Promise");

            setTimeout(() => {
              console.log("hello end");
              console.log("hello end");
              console.log("hello end");
              console.log("hello end");
            }, 1000);
          }, 1000);
        }, 1000);
      }, 1000);
    },

    // 点击获取异步层层嵌套取得的数据promise
    // 参数 -> 函数（resolve[解决]，reject[拒绝]）
    // resolve和reject本身他们有事函数
    promiseClick() {
      new Promise((resolve, reject) => {
        // 第一次网络请求的代码
        // 成功时调用resolve;
        resolve("hello");

        // 失败时调用reject
        reject("error msg");
      })
        .then(data => {
          // 第一次拿到结果的处理代码
          console.log(data);
          console.log(data);
          console.log(data);
          console.log(data);

          return new Promise((resolve, reject) => {
            // 第二次网络请求的代码
            resolve("hello Vue");
          })
            .then(data1 => {
              // 第二次拿到结果的处理代码
              console.log(data1);
              console.log(data1);
              console.log(data1);
              console.log(data1);

              return new Promise((resolve, reject) => {
                // 第三次网络请求的代码
                resolve("hello Promise");
              })
                .then(data2 => {
                  // 第三次拿到结果的处理代码
                  console.log(data2);
                  console.log(data2);
                  console.log(data2);
                  console.log(data2);

                  return new Promise((resolve, reject) => {
                    // 第四次网络请求的代码
                    resolve("hello end");
                  })
                    .then(data3 => {
                      // 第四次拿到结果的处理代码
                      console.log(data3);
                      console.log(data3);
                      console.log(data3);
                      console.log(data3);
                    })
                    .catch(err => {
                      // 失败时
                    });
                })
                .catch(err => {
                  // 失败时
                });
            })
            .catch(err => {
              // 失败时
            });
        })
        .catch(err => {
          // 失败时
        });
    }
  }
};
</script>

标签：地狱,console,log,resolve,Promise,reject,回调,hello
来源： https://www.cnblogs.com/magic-world/p/15079453.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Promise 回调地狱