JavaScript : tenir parole

JavaScript, grâce à sa popularité et ses récentes améliorations, devient de plus en plus le meilleur ami des programmeurs Web. Comme tous les meilleurs amis, JavaScript tient ses promesses.

Cela peut paraître un peu étrange, mais c'est vrai. La plupart des navigateurs prennent actuellement en charge les objets dits Promise. Une promesse ressemble beaucoup à une fonction qui représente un morceau de code ou une tâche que vous souhaitez exécuter à un moment donné dans le futur.

Voici à quoi ressemble l'engagement.

var myPromise = new Promise(function (resolve, reject) {
    // Task to carry out goes here.
});

Vous pouvez voir ici que lorsque nous créons une promesse, nous lui donnons un paramètre, qui est une fonction qui contient le code que nous voulons exécuter à un moment donné dans le futur. Vous remarquerez peut-être également les deux paramètres passés à la Promise dans la fonction : resolve 和 reject. Ce sont également des fonctions, et c'est ainsi que nous pouvons indiquer à une promesse si elle est remplie. Voici comment les utiliser :

var myPromise = new Promise(function (resolve, reject) {
    if (true) {
        resolve('Hello Tuts+ fans!');
    } else {
        reject('Aww, didn\'t work.');
    }
});

Cette promesse sera évidemment toujours tenue car if 语句将始终为真。这只是出于学习目的 - 我们稍后会做一些更实际的事情 - 但想象一下用一段您不能 100% 确定是否有效的代码片段替换 true .

Maintenant que nous avons créé une Promesse, comment l'utilisons-nous ? Eh bien, nous devons lui dire quelle est la fonction resolve 和 reject 函数是什么。我们通过使用 Promise 的 then. Nous faisons cela en utilisant la méthode then de Promise.

myPromise.then(function (result) {
    // Resolve callback.
    console.log(result); 
}, function (result) {
    // Reject callback.
    console.error(result);
});

Parce que notre instruction if réussit toujours sa vérification true, le code ci-dessus enregistrera toujours "Bonjour Tuts+Fans !" Il s'exécute également immédiatement. En effet, le code à l'intérieur du constructeur Promise est synchrone, ce qui signifie qu'il n'attend aucune opération. Elle dispose de toutes les informations nécessaires pour procéder, et elle le fera dans les plus brefs délais.

Cependant, là où les promesses brillent vraiment, c'est dans les tâches asynchrones, des tâches pour lesquelles vous ne savez pas exactement quand la promesse sera remplie. Un exemple concret de tâche asynchrone consiste à récupérer une ressource, telle qu'un fichier JSON, via AJAX. Nous ne savons pas combien de temps il faudra au serveur pour répondre, ni s'il risque même de tomber en panne. Ajoutons un peu d'AJAX à notre code Promise.

var myPromise = new Promise(function (resolve, reject) {
    // Standard AJAX request setup and load.
    var request = new XMLHttpRequest();
    
    // Request a user's comment from our fake blog.
    request.open('GET', 'http://jsonplaceholder.typicode.com/posts/1');

    // Set function to call when resource is loaded.
    request.onload = function () {
        if (request.status === 200) {
            resolve(request.response);
        } else {
            reject('Page loaded, but status not OK.');
        }
    };

    // Set function to call when loading fails.
    request.onerror = function () {
        reject('Aww, didn\'t work at all.');
    }

    request.send();
});

Le code ici est simplement du JavaScript standard pour effectuer des requêtes AJAX. Nous demandons une ressource, dans ce cas un fichier JSON à une URL spécifiée, et attendons qu'elle réponde. Nous ne saurons jamais exactement quand. Nous ne voulons évidemment pas arrêter l’exécution du script pour l’attendre, alors que faisons-nous ?

Heureusement, nous avons mis ce code dans une promesse. En le mettant ici, nous disons essentiellement : « Hé, un morceau de code, je dois y aller maintenant, mais je t'appellerai plus tard et je te dirai quand l'exécuter. Promets-moi que tu vas le faire et dis-le ». moi toi Quand est-ce que ça sera fait ?" Le code dira : "Oui, bien sûr."

La chose importante à noter dans le code ci-dessus est l'appel de fonction resolve 和 reject. N'oubliez pas que c'est ainsi que nous indiquons à nos promesses si notre code s'est exécuté avec succès. Sinon, nous ne le saurons jamais.

En utilisant le même code de l'exemple de base, nous pouvons voir comment les requêtes AJAX dans Promise fonctionneront désormais.

// Tell our promise to execute its code
// and tell us when it's done.
myPromise.then(function (result) {
    // Prints received JSON to the console.
    console.log(result);
}, function (result) {
    // Prints "Aww didn't work" or
    // "Page loaded, but status not OK."
    console.error(result); 
});

Je sais que nous pouvons vous faire confiance, myPromise.

Promesse de lien

Maintenant, vous pensez peut-être que les promesses ne sont que des fonctions de rappel sophistiquées avec une meilleure syntaxe. Cela est vrai dans une certaine mesure, mais pour continuer avec notre exemple AJAX, disons que vous devez faire quelques requêtes supplémentaires, chacune basée sur les résultats de la requête précédente. Ou que se passe-t-il si vous devez d'abord traiter JSON ?

Faire cela à l'aide de rappels entraînera de nombreuses imbrications de fonctions, chacune devenant de plus en plus difficile à suivre. Heureusement, dans le monde de Promises, nous pouvons enchaîner ces fonctions comme ceci. Voici un exemple : une fois que nous recevons le JSON du commentaire d'un utilisateur sur notre faux blog, nous devons nous assurer qu'il est entièrement en minuscules avant de faire quoi que ce soit d'autre avec.

myPromise
    .then(function (result) {
        // Once we receive JSON,
        // turn it into a JSON object and return.
        return JSON.parse(result);
    })
    .then(function (parsedJSON) {
        // Once json has been parsed,
        // get the email address and make it lowercase.
        return parsedJSON.email.toLowerCase();
    })
    .then(function (emailAddress) {
        // Once text has been made lowercase,
        // print it to the console.
        console.log(emailAddress);
    }, function (err) {
        // Something in the above chain went wrong?
        // Print reject output.
        console.error(err);
    });

Vous pouvez voir ici que bien que notre appel initial soit asynchrone, il est également possible d'enchaîner des appels synchrones. Toute promesse de resolve 函数中的代码在 then 每个返回时都会被调用。您还会注意到，这里只为整个链指定了一个误差函数。通过将其作为最后一个 then 中的 reject 函数放在链的末尾，链中调用 reject appellera cette fonction.

现在我们对承诺更有信心了，让我们结合上面的承诺创建另一个承诺。我们将创建一个采用新的小写电子邮件地址的电子邮件地址，并（假装）向该地址发送电子邮件。这只是一个说明异步内容的示例 - 它可以是任何内容，例如联系服务器以查看电子邮件是否在白名单上或者用户是否已登录。我们需要将电子邮件地址提供给新的 Promise，但承诺不接受争论。解决这个问题的方法是将 Promise 包装在一个可以执行此操作的函数中，如下所示：

var sendEmail = function (emailAddress) {
    return new Promise(function (resolve, reject) {
        // Pretend to send an email
        // or do something else asynchronous
        setTimeout(function () {
            resolve('Email sent to ' + emailAddress);
        }, 3000);
    });
};

我们在此处使用 setTimeout 调用来简单地伪造一个需要几秒钟才能异步运行的任务。

那么我们如何使用新的承诺创建函数呢？好吧，由于在 then 中使用的每个 resolve 函数都应该返回一个函数，那么我们可以以与同步任务类似的方式使用它。

myPromise
    .then(function (result) {
        return JSON.parse(result);
    })
    .then(function (parsedJSON) {
        return parsedJSON.email.toLowerCase();
    })
    .then(function (emailAddress) {
        return sendEmail(emailAddress)
    })
    .then(function (result) {
        // Outputs "Email sent to stuart@fakemail.biz"
        console.log(result);
    }, function (err) {
        console.error(err);
    });

让我们回顾一下这个流程，总结一下发生了什么。我们最初的 Promise myPromise 请求一段 JSON。当收到该 JSON 时（我们不知道何时），我们将 JSON 转换为 JavaScript 对象并返回该值。

完成后，我们从 JSON 中取出电子邮件地址并将其变为小写。然后我们向该地址发送一封电子邮件，同样我们不知道它何时完成，但当它完成时，我们将向控制台输出一条成功消息。看不到沉重的嵌套。

结论

我希望这是对 Promise 的有用介绍，并为您提供了在 JavaScript 项目中开始使用它们的充分理由。如果您想更详细地了解 Promise，请查看 Jake Archibald 关于这个主题的优秀 HTML5 Rocks 文章。

学习 JavaScript：完整指南

我们构建了一个完整的指南来帮助您学习 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!