La promesse est-elle basée sur Es6 ?

Oui. Promise est un nouveau type de référence dans ECMAScript 6, qui représente l'achèvement ou l'échec final d'une opération asynchrone. Promise résout le problème de l'écriture logique trop complexe dans le code d'appel de programmation asynchrone. Lorsque la demande réseau est très complexe, un enfer de rappel se produira de cette façon, si ces codes sont écrits ensemble, ils sembleront très compliqués et peu propices à la lecture. Si vous utilisez Promises, le code sera plus beau et plus élégant.

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

ECMAScript 6 ajoute une prise en charge complète de la spécification Promises/A+, à savoir le type Promise. Une fois lancé, Promise est devenu extrêmement populaire et est devenu le mécanisme de programmation asynchrone dominant. Tous les navigateurs modernes prennent en charge les attentes ES6, et de nombreuses autres API de navigateur sont basées sur les attentes.

Promise est un nouveau type de référence dans ECMAScript 6, qui représente l'achèvement ou l'échec final d'une opération asynchrone.

1. Que fait la fonction de promesse ? La fonction de promesse résout le problème de l'écriture trop complexe de la logique du code d'appel de programmation asynchrone. Lorsque la requête réseau est très complexe, un enfer de rappel se produira si ces codes sont écrits ensemble. semble très compliqué et peu propice à la lecture. Si vous utilisez promise, le code sera plus beau et élégant

2 Trois états de promesse

Tout d'abord, lorsque nous avons des opérations asynchrones dans notre développement, nous pouvons Wrap. a Promesse pour l'opération asynchrone Il y aura trois états après l'opération asynchrone

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

3 Implémentation

1, puis et catch

1 Les fonctions en attente sont synchrones et seront exécutées immédiatement.

2. then et catch sont asynchrones Même s'il n'y a pas d'opération asynchrone dans l'objet de promesse et que la méthode then ou catch est exécutée immédiatement, les deux méthodes ici peuvent être ajoutées à la file d'attente des événements en attente d'exécution

//参数 函数（resolve,reject）
    new Promise((resolve, reject) => {
        setTimeout(() => {
            //请求成功的时候调用resolve
            resolve('22222')
            //请求失败的时候调用reject
            reject('error message')
        }, 1000)
    }).then((data) => { //请求成功处理函数
        console.log(data)
    }).catch((err) => { //请求失败处理函数
        console.log(err)
    })

1. Si une erreur non détectée se produit dans la fonction de traitement de l'état en attente, l'état sera en attente et deviendra directement l'état rejeté et pourra être capturé par catach

var pro = new Promise((resolve, reject) => {
            throw new Error("123");

            // try{
            //     throw new Error("123"); 
            // } catch(e) {}

            resolve(12);
            reject(34);
        })

        // pro.then(data => {
        //     console.log(data);
        // }, err => {
        //     console.log(err);
        // })


        console.log(pro);
        

        pro.then(data => {
            console.log(data);
            
        })

        pro.catch(data => {
            console.log(data);
            
        })

Copier après la connexion

3.

1. Utiliser Promise :

const makeRequest = () =>
        getJSON().then(data => {
            console.log(data)
            return "done"
        })

    makeRequest()

2. Utiliser Async :

async et wait sont proposés par ES7

Simplifier la création d'objets de promesse dans les valeurs de retour des fonctions Généralement. , async est écrit à la fin de la fonction. Auparavant, la valeur de retour de la fonction modifiée devait être un objet de promesse. Ce n'est que dans certains cas particuliers qu'un objet de promesse sera renvoyé manuellement.
Fonction : résolvez les problèmes asynchrones comme promis, mais son avantage est de rendre le code asynchrone identique à celui synchrone !!

Syntaxe de base pour utiliser async et wait :

consiste à ajouter un async devant une fonction ordinaire. L'appel est le même qu'une fonction ordinaire

• Async est généralement utilisé en conjonction avec wait
  .
• await est suivi de Un objet de promesse wait doit être utilisé dans une fonction asynchrone

const makeRequest = async () => {
 // await getJSON()表示console.log会等到getJSON的promise成功reosolve之后再执行。
        console.log(await getJSON)
        return "done"
    }

    makeRequest()

Copier après la connexion

• 3 Différence

2. Nous ne pouvons pas utiliser wait dans le code le plus externe car il ne fait pas partie de la fonction async.

var r1 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第一个请求");
            },1000)
        })
        var r2 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第二个请求");
            },3000)
        })
        var r3 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第三个请求");
            },4000)
        })
        var r4 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第四个请求");
            },500)
        })

Parfois, nous devons attendre que deux requêtes ou plus reviennent avec succès avant de passer à l'étape suivante. La méthode all de promesse consiste à attendre que toutes les requêtes asynchrones soient renvoyées. être terminé. Dans la prochaine étape du rappel

Promise.all([r1,r2,r3,r4]).then(data => {
            console.log(data);
            
        })

Copier après la connexion

Promise.race([r1,r2,r3,r4]).then(data => {
           console.log(data);
           
       })

Five.promise encapsulation ajax case

<script>
       function toData(obj) {
               
               // 声明一个数组 来装每一组的数据
               var arr = [];
               if(obj !== null) {
                   for(var key in obj) {
                       let str = key + "=" + obj[key];
                       arr.push(str);
                   }
                   return arr.join("&");
               }
       }

       function ajax(obj) {
           return new Promise(function(resolve, reject) {
               // 给ajax所需要的参数设置默认值
               obj.type = obj.type || "get";
               obj.async = obj.async|| "true";
               obj.dataType = obj.dataType || "json";
               obj.data = obj.data || null;

               // 开始发送ajax请求
               var xhr;

               if(window.XMLHttpRequest) {
                   xhr = new XMLHttpRequest();
               } else {
                   // IE低版本的浏览器
                   xhr = new ActiveXObject("Microsoft.XMLHttp");
               }

               // 判断是post请求 还是get请求
               if(obj.type === "post") {
                   xhr.open(obj.type, obj.url, obj.async);
                   // 设置请求头
                   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                   xhr.send(toData(obj.data));

               } else {
                   var url = obj.url + "?" + toData(obj.data);
                   xhr.open(obj.type, url, obj.async);
                   xhr.send();
               }

               // 处理响应体
               xhr.onreadystatechange = function() {

                   if(xhr.readyState == 4) {
                       if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                           resolve(JSON.parse(xhr.responseText));

                       } else {
                           reject(xhr.status);
                       }
                   }
               }
           })
       }

       ajax({
           url : "./data.php",
           data : {
               name : "jack",
               age : 16
           }
       }).then(res => {
           console.log(res);
           
       }, err => {
           console.log(err);
           
       })
   
   </script>

tutoriel vidéo javascript, front-end 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!