Js中的promise解决回调地狱的问题

这一次我们来说一下promise回调地狱的问题

文章目录

• 什么是回调地狱
• 一、前言
• 二、promise是什么呢?
  • 1.那么该如何创建一个promise呢?
  • 2.使用promise解决回调地狱的问题.
• 三 那么我们还可以如何优化这个promise呢?
• 总结

---

前言

首先我们需要知道什么是回调地狱,在promise没有出现之前我们是如何解决的,promise出现之后问我们又该如何解决呢?

一 首先我们来了解一个问题

 function getdate(fn) {
        setTimeout(() => {
          fn("使用数据");
        }, 1000);
      }
      function setdata(fn) {
        setTimeout(() => {
          fn("获取数据");
        }, 2000);
      }
      setdata(function (data) {
        console.log(data);
      });
      getdate(function (data) {
        console.log(data);
      });
//由于定时器是一个异步操作,这里会出现一个问题,不应该是先获取到数据,才能使用吗?这里很明显达不到我们想要的结果(先获取数据,然后才能使用数据),而这里的结果与我想要的结果完全相反,那么我们该如何修改呢?

二 我们应该怎们解决上述问题呢?

 setdata(function (data) {
        console.log(data);
        getdate(function (data) {
          console.log(data);
        });
      });
//如果把下方的代码设置成为这样,就解决了这个问题了,但是如果你还有使用数据,又来一大堆异步操作的话,就会使得你的这个程序难以维护。



//总结：上述内容就是典型的回调地狱问题

---

一、promis是什么？

promise是为了专门解决异步回调地狱的问题的

二、使用步骤

1.那么该如何创建一个promise呢?

代码如下（示例）：

let p = new Promise(function(resove,reject){})

这里的resove代表的是回调成功的结果

这里的reject代表的是回调失败的结果

2.使用promise解决回调地狱的问题.

代码如下（示例）：

function getdata() {
        return new Promise((resove, reject) => {
          setTimeout(() => {
            resove("获取数据");
          }, 2000);
        });
      }
      function setdata() {
        return new Promise((resove, reject) => {
          setTimeout(() => {
            resove("使用数据");
          }, 1000);
        });
      }
      getdata()
        .then(function (value) {
          console.log(value);
          return setdata();
        })
        .then(function (value) {
          console.log(value);
        });

//promise对应的有一个then方法,可以将内部成功或者失败的结果给传出来
//1 在这里我们首先调用了getdata函数,因为getdata函数内部返回的是一个promise对象,那么就应该有.then方法,.then使用的话内部会有一个函数函数的形参就是上面promise返回的成功和失败的结果.
//在我们的.then方法里面我们又返回了使用数据的函数,因为使用数据函数内部封装的也是一个promise对象,所有也会对应有一个promise对应的方法,接着我们再用一个函数形参去接受返回的结果
//这样就解决了我们遇到的回调地狱问题,但是写多了,还是会发现一些问题.

三 那么我们还可以如何优化这个promise呢?

接下来就是使用async方法和await方法

async function name() {
        //trycatch的使用
        try {
          let result = await getdata();
          console.log(result);
          let box = await getnai();
          console.log(box);
        } catch (error) {
          console.error(error);
        }
      }
name()
//try catch用来捕捉发生错误的方法
//async对应会有一个await,用一个参数来接受和.then方法的结果是一样的.

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了promsie的使用，而promise也能够帮助我们更好的解决异步回调的问题.