Qu'est-ce que l'enfer des rappels es6 ?

Dans es6, l'enfer de rappel est constitué de fonctions de rappel multicouches imbriquées les unes dans les autres, c'est-à-dire des fonctions de rappel imbriquées dans des fonctions de rappel ; c'est une opération qui se produit pour réaliser une exécution séquentielle du code, et cela rendra notre code lisible. est très pauvre et difficile à entretenir par la suite. La promesse est utilisée dans es6 pour résoudre le problème de l'enfer des rappels.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Avant-propos

Avant de comprendre formellement « l'enfer du rappel », nous comprenons d'abord deux concepts :

1 Fonction de rappel

Lorsqu'une fonction est passée en paramètre à un autre paramètre, et ce n'est pas le cas. Elle sera exécutée immédiatement. La fonction ne peut être exécutée que lorsque certaines conditions sont remplies. Cette fonction est appelée fonction de rappel. Il existe des fonctions de rappel dans les minuteries et Ajax que nous connaissons :

setTimeout(function(){   //function(){console.log('执行了回调函数')}就是回调函数，它只有在3秒后才会执行
	console.log('执行了回调函数');
},3000)  //3000毫秒

La fonction de rappel ici est function(){console.log('Callback function exécutée')}, lorsque l'heure 3 est rencontré Exécuté après quelques secondes. 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 可以时代码看起来更像同步代码。

2.async/await

首先我们看async

        async function fn(){
            return '不讲武德';
        }
        console.log(fn());

La fonction de rappel ici est la fonction liée par xhr.onreadystatechange, qui est exécutée après que xhr.send() envoie la requête et obtient la réponse.

2. Tâches asynchrones

Le concept correspondant est "tâches synchrones". Les tâches synchrones sont mises en file d'attente pour être exécutées sur le thread principal. Ce n'est que lorsque la tâche précédente est terminée que la tâche suivante peut être exécutée. Les tâches asynchrones n'entrent pas dans le thread principal, mais entrent dans la file d'attente asynchrone. Le fait que la tâche précédente soit terminée n'affecte pas l'exécution de la tâche suivante. De même, prenons le timer comme exemple de tâche asynchrone : 🎜

        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声明的函数是异步的');

🎜Si vous suivez l'ordre d'écriture du code, il devrait d'abord afficher "Fonction de rappel exécutée", puis "111". Mais le résultat réel est : 🎜🎜 Ceci Une tâche qui ne bloque pas l’exécution des tâches suivantes est appelée tâche asynchrone. 🎜🎜Voyons ensuite ce qu'est l'enfer des rappels. 🎜🎜🎜🎜1. Qu'est-ce que l'enfer du rappel ? 🎜🎜🎜Sur la base de ce qui précède, nous pouvons tirer une conclusion : il existe un code pour les tâches asynchrones, dont on ne peut pas garantir qu'elles soient exécutées dans l'ordre. Et si nous devions exécuter le code dans l'ordre ? 🎜🎜Par exemple, si je veux prononcer une phrase, l'ordre des mots doit être le suivant : Dans les arts martiaux, la paix doit être valorisée, l'éthique martiale doit être respectée et aucun combat ne doit être mené. 🎜 Je dois faire ceci pour garantir le bon ordre : 🎜

        //封装一个返回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();

🎜🎜🎜Comme vous pouvez le voir, les fonctions de rappel dans le code sont imbriquées dans trois couches de fonctions de rappel. Cette situation d'imbrication de fonctions de rappel dans des fonctions de rappel est appelée l'enfer du rappel. 🎜🎜Pour résumer, l'enfer de rappel est une opération qui se produit pour réaliser une exécution séquentielle du code. Cela rendra notre code très mal lisible et difficile à maintenir plus tard. 🎜🎜Alors, comment résoudre l'enfer des rappels ? 🎜🎜🎜🎜 2. Comment résoudre l'enfer des rappels🎜🎜🎜🎜1. Promise🎜🎜Promise est un objet natif en js et une sorte de programmation asynchrone. La solution peut remplacer la solution de fonction de rappel traditionnelle. 🎜

• 🎜Le constructeur Promise reçoit une fonction en paramètre. Les tâches asynchrones que nous devons traiter sont déchargées dans le corps de la fonction. sont résolus, rejetés. Lorsque la tâche asynchrone est exécutée avec succès, la fonction de résolution est appelée pour renvoyer le résultat, sinon le rejet est appelé. 🎜
• 🎜La méthode then de l'objet Promise est utilisée pour recevoir les données de réponse lorsque le traitement est réussi, et la méthode catch est utilisée pour recevoir les données correspondantes lorsque le traitement échoue. 🎜
• 🎜La programmation en chaîne de Promise peut garantir l'ordre d'exécution du code. Le principe est qu'à chaque fois après le traitement de celui-ci, un objet Promise doit être renvoyé, afin que les données puissent être reçues dans le ensuite alors. 🎜

🎜Voici un exemple de code : 🎜rrreee🎜🎜 Mais le plus gros problème avec Promise est la redondance du code. La tâche asynchrone d'origine est encapsulée par Promise. Si vous utilisez que pour une opération, cela conduira à alors... alors .. .puis à première vue..., cela n'est pas non plus propice à la maintenance du code. 🎜🎜Ainsi, l'async/await suivant fonctionne et le code ressemble plus à du code synchrone. 🎜🎜🎜🎜2.async/await🎜🎜🎜Nous examinons d'abord le async mot-clé , qui est placé devant la fonction déclarée comme mot-clé, indiquant que la fonction est une tâche asynchrone et ne bloquera pas l'exécution des fonctions suivantes : 🎜rrreee🎜🎜🎜 Vous pouvez voir que lorsque la fonction asynchrone renvoie des données, elle est automatiquement encapsulé dans un objet Promise. 🎜🎜Comme les objets Promise, lors du traitement de tâches asynchrones, vous pouvez également renvoyer différentes données en fonction du succès et de l'échec. Lorsque le traitement réussit, utilisez la méthode then pour le recevoir, et en cas d'échec, utilisez la méthode catch pour recevoir les données. : 🎜

        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前端】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!