这一次我们来说一下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也能够帮助我们更好的解决异步回调的问题.