Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist die Es6-Callback-Hölle?
Was ist die Es6-Callback-Hölle?
- 青灯夜游Original
- 2023-02-14 14:58:541988Durchsuche
In es6 handelt es sich bei der Callback-Hölle um mehrschichtige, ineinander verschachtelte Callback-Funktionen, d ist sehr schlecht und später schwer zu pflegen. Promise wird in es6 verwendet, um das Problem der Rückrufhölle zu lösen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
Vorwort
Bevor wir „Callback-Hölle“ formal verstehen, verstehen wir zunächst zwei Konzepte:
1. Callback-Funktion
Wenn eine Funktion als Parameter an einen anderen Parameter übergeben wird und dies nicht der Fall ist Sie wird sofort ausgeführt. Die Funktion kann nur ausgeführt werden, wenn bestimmte Bedingungen erfüllt sind. Diese Funktion wird als Callback-Funktion bezeichnet. Es gibt Callback-Funktionen in den Timern und Ajax, mit denen wir vertraut sind:
setTimeout(function(){ //function(){console.log('执行了回调函数')}就是回调函数，它只有在3秒后才会执行
console.log('执行了回调函数');
},3000) //3000毫秒
Die Callback-Funktion hier ist function(){console.log('Callback-Funktion ausgeführt'), wenn Zeit 3 ist met Nach Sekunden ausgeführt. function(){console.log('执行了回调函数')}，在满足时间3秒后执行。
//1.创建异步对象
var xhr=new XMLHttpRequest();
//2.绑定监听事件(接收请求)
xhr.onreadystatechange=function(){
//此方法会被调用4次
//最后一次，readyState==4
//并且响应状态码为200时，才是我们要的响应结果 xhr.status==200
if(xhr.readyState==4 && xhr.status==200){
//把响应数据存储到变量result中
var result=xhr.responseText;
console.log(result);
}
}
//3.打开链接（创建请求）
xhr.open("get","/demo/ajaxDemo",true);
//4.发送请求
xhr.send();
这里的回调函数是xhr.onreadystatechange绑定的函数，在xhr.send()发送请求并拿到响应后执行。
2、异步任务
与之相对应的概念是“同步任务”，同步任务在主线程上排队执行，只有前一个任务执行完毕，才能执行下一个任务。异步任务不进入主线程，而是进入异步队列，前一个任务是否执行完毕不影响下一个任务的执行。同样，还拿定时器作为异步任务举例：
setTimeout(function(){
console.log('执行了回调函数');
},3000)
console.log('111');如果按照代码编写的顺序，应该先输出“执行了回调函数”，再输出“111”。但实际输出为：
这种不阻塞后面任务执行的任务就叫做异步任务。
接下来让我们看看什么是回调地狱。
一、回调地狱是什么？
根据前面我们可以得出一个结论：存在异步任务的代码，不能保证能按照顺序执行，那如果我们非要代码顺序执行呢？
比如我要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。
我必须要这样操作，才能保证顺序正确：
setTimeout(function () { //第一层
console.log('武林要以和为贵');
setTimeout(function () { //第二程
console.log('要讲武德');
setTimeout(function () { //第三层
console.log('不要搞窝里斗');
}, 1000)
}, 2000)
}, 3000)
可以看到，代码中的回调函数套回调函数，居然套了3层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。
总结一下，回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。
那该如何解决回调地狱呢？
二、如何解决回调地狱
1.Promise
Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。
Promise构造函数接收一个函数作为参数，我们需要处理的异步任务就卸载该函数体内，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，反之调用reject。
Promise对象的then方法用来接收处理成功时响应的数据，catch方法用来接收处理失败时相应的数据。
Promise的链式编程可以保证代码的执行顺序，前提是每一次在than做完处理后，一定要return一个Promise对象，这样才能在下一次then时接收到数据。
下面是实例代码：
function fn(str){
var p=new Promise(function(resolve,reject){
//处理异步任务
var flag=true;
setTimeout(function(){
if(flag){
resolve(str)
}
else{
reject('操作失败')
}
})
})
return p;
}
fn('武林要以和为贵')
.then((data)=>{
console.log(data);
return fn('要讲武德');
})
.then((data)=>{
console.log(data);
return fn('不要搞窝里斗')
})
.then((data)=>{
console.log(data);
})
.catch((data)=>{
console.log(data);
})
但是Promise最大的问题就是代码冗余，原来的异步任务被Promise封装一下，不管什么操作都用than，就会导致一眼看过去全是then…then…then…,这样也是不利于代码维护的。
所以下面的async/await 可以时代码看起来更像同步代码。
首先我们看async
async function fn(){
return '不讲武德';
}
console.log(fn());Die Rückruffunktion hier ist die durch xhr.onreadystatechange gebundene Funktion, die ausgeführt wird, nachdem xhr.send() die Anfrage gesendet und die Antwort erhalten hat. 
2. Asynchrone Aufgaben
async function fn() {
var flag = true;
if (flag) {
return '不讲武德';
}
else{
throw '处理失败'
}
}
fn()
.then(data=>{
console.log(data);
})
.catch(data=>{
console.log(data);
})
console.log('先执行我，表明async声明的函数是异步的');🎜Wenn Sie die Reihenfolge beim Schreiben des Codes befolgen, sollte zuerst „Callback-Funktion ausgeführt“ und dann „111“ ausgegeben werden. Aber die eigentliche Ausgabe ist: 🎜🎜 Dies Eine Aufgabe, die die Ausführung nachfolgender Aufgaben nicht blockiert, wird als asynchrone Aufgabe bezeichnet. 🎜🎜Als nächstes schauen wir uns an, was die Callback-Hölle ist. 🎜🎜🎜🎜1. Was ist die Rückrufhölle? 🎜🎜🎜Auf der Grundlage des oben Gesagten können wir eine Schlussfolgerung ziehen: Es gibt einen Code für asynchrone Aufgaben, dessen Ausführung in der richtigen Reihenfolge nicht garantiert werden kann. Was ist, wenn wir den Code in der richtigen Reihenfolge ausführen müssen? 🎜🎜Wenn ich zum Beispiel einen Satz sagen möchte, muss die Wortreihenfolge wie folgt sein: In den Kampfkünsten sollte der Frieden geschätzt werden, die Kampfethik sollte respektiert werden und es sollten keine Kämpfe stattfinden. 🎜 Ich muss dies tun, um die richtige Reihenfolge sicherzustellen: 🎜 //封装一个返回promise的异步任务
function fn(str) {
var p = new Promise(function (resolve, reject) {
var flag = true;
setTimeout(function () {
if (flag) {
resolve(str)
} else {
reject('处理失败')
}
})
})
return p;
}
//封装一个执行上述异步任务的async函数
async function test(){
var res1=await fn('武林要以和为贵'); //await直接拿到fn()返回的promise的数据，并且赋值给res
var res2=await fn('要讲武德');
var res3=await fn('不要搞窝里斗');
console.log(res1,res2,res3);
}
//执行函数
test();🎜🎜🎜Wie Sie sehen können, sind die Rückruffunktionen im Code in drei Ebenen von Rückruffunktionen verschachtelt. Diese Situation der Verschachtelung von Rückruffunktionen innerhalb von Rückruffunktionen wird als Rückrufhölle bezeichnet. 🎜🎜Zusammenfassend ist die Rückrufhölle eine Operation, die zur sequentiellen Ausführung des Codes führt. Dies führt dazu, dass unser Code später sehr schlecht lesbar und schwer zu warten ist. 🎜🎜Wie löst man also die Rückrufhölle? 🎜🎜🎜🎜2. So lösen Sie die Callback-Hölle🎜🎜🎜🎜1. Promise ist ein natives Objekt in js und eine Art asynchrone Programmierung Die Lösung kann die herkömmliche Callback-Funktionslösung ersetzen. 🎜- 🎜Der Promise-Konstruktor erhält eine Funktion als Parameter. Die asynchronen Aufgaben, die wir verarbeiten müssen, werden innerhalb des Funktionskörpers entladen sind Entschlossenheit, Ablehnung. Wenn die asynchrone Aufgabe erfolgreich ausgeführt wurde, wird die Auflösungsfunktion aufgerufen, um das Ergebnis zurückzugeben, andernfalls wird „Reject“ aufgerufen. 🎜
- 🎜Die then-Methode des Promise-Objekts wird verwendet, um die Antwortdaten zu empfangen, wenn die Verarbeitung erfolgreich ist, und die Catch-Methode wird verwendet, um die entsprechenden Daten zu empfangen, wenn die Verarbeitung fehlschlägt. 🎜
- 🎜Die Kettenprogrammierung von Promise kann die Ausführungsreihenfolge des Codes garantieren. Die Voraussetzung ist, dass jedes Mal nach der Verarbeitung ein Promise-Objekt zurückgegeben werden muss, damit die Daten empfangen werden können als nächstes dann. 🎜
🎜 Das größte Problem bei Promise ist jedoch die Coderedundanz. Die ursprüngliche asynchrone Aufgabe wird von Promise gekapselt. Wenn Sie than für eine Operation verwenden, führt dies zu then...then... .dann ist das auf den ersten Blick auch nicht förderlich für die Codepflege. 🎜🎜Das folgende Async/Await funktioniert also und der Code sieht eher wie synchroner Code aus. 🎜🎜🎜🎜2.async/await🎜🎜🎜Zuerst schauen wir uns den async an Schlüsselwort, das als Schlüsselwort vor der deklarierten Funktion steht und anzeigt, dass die Funktion eine asynchrone Aufgabe ist und die Ausführung nachfolgender Funktionen nicht blockiert: 🎜rrreee🎜🎜🎜 Sie können sehen, dass die asynchrone Funktion Daten zurückgibt wird automatisch in ein Promise-Objekt gekapselt. 🎜🎜Wie bei Promise-Objekten können Sie bei der Verarbeitung asynchroner Aufgaben auch je nach Erfolg und Misserfolg unterschiedliche Daten zurückgeben. Wenn die Verarbeitung erfolgreich ist, verwenden Sie die Methode then, um sie zu empfangen, und wenn sie fehlschlägt, verwenden Sie die Methode Catch, um die Daten zu empfangen : 🎜 async function fn() {
var flag = true;
if (flag) {
return '不讲武德';
}
else{
throw '处理失败'
}
}
fn()
.then(data=>{
console.log(data);
})
.catch(data=>{
console.log(data);
})
console.log('先执行我，表明async声明的函数是异步的');
当把flag设置为false是，执行结果为：
async关键字说完了，我们看看awai关键字
- await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）
- await函数不能单独使用
- await可以直接拿到Promise中resolve中的数据。
//封装一个返回promise的异步任务
function fn(str) {
var p = new Promise(function (resolve, reject) {
var flag = true;
setTimeout(function () {
if (flag) {
resolve(str)
} else {
reject('处理失败')
}
})
})
return p;
}
//封装一个执行上述异步任务的async函数
async function test(){
var res1=await fn('武林要以和为贵'); //await直接拿到fn()返回的promise的数据，并且赋值给res
var res2=await fn('要讲武德');
var res3=await fn('不要搞窝里斗');
console.log(res1,res2,res3);
}
//执行函数
test();
结果为：
为什么叫await等待呢，因为当代码执行到async函数中的await时，代码就在此处等待不继续往下执行，知道await拿到Promise对象中resolve的数据，才继续往下执行，这样就保证了代码的执行顺序，而且使异步代码看起来更像同步代码。
总结
总结一下，当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法糖，可以使得异步代码看起来更像是同步代码。
【相关推荐：javascript视频教程、web前端】
Das obige ist der detaillierte Inhalt vonWas ist die Es6-Callback-Hölle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!