Promise 回调地狱

网络请求的回调地狱:

一个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>