Les plats clés
- L'API SoundCloud permet aux développeurs d'accéder à presque toutes les données dont ils ont besoin. L'API est une collection d'URL qui donnent accès aux données des serveurs SoundCloud, tandis que le SDK (kit de développement de logiciels) est une bibliothèque pré-écrite pour interroger l'API.
- Il existe deux versions du SDK disponibles. La principale différence entre eux est la fa?on dont ils renvoient les données lorsqu'une demande asynchrone est faite à l'API. La dernière version renvoie une promesse, tandis que l'autre nécessite une fonction de rappel comme un paramètre.
- Pour commencer à interroger l'API SoundCloud à l'aide de JavaScript, le SDK JavaScript fourni par SoundCloud doit être téléchargé. Pour les fonctionnalités de la collection d'utilisateurs, l'ancienne version du SDK est recommandée car elle est plus stable.
- Les données de l'API SoundCloud sont accessibles avec une simple demande de GET. Des données spécifiques à l'utilisateur peuvent être obtenues en utilisant le point de terminaison / Me, mais uniquement si l'utilisateur est connecté au site Web à l'aide de son compte SoundCloud.
- interroger une API à partir du c?té client peut sauver les développeurs de la complexité du back-end. Le SDK simplifie le processus, permettant la création d'applications Web plus puissantes et plus conviviales.
SoundCloud a mis à disposition une API qui permet aux développeurs d'obtenir presque toutes les données qu'ils souhaitent. Mais son utilisation peut être déroutante, en particulier pour les débutants, car à l'heure actuelle, la documentation de l'API SoundCloud et les exemples utilisent différentes versions du SDK (kit de développement de logiciels).
Quelle est la différence entre l'API et le SDK? Fondamentalement, l'API est une collection d'URL qui donnent accès aux données des serveurs SoundCloud, et le SDK est une bibliothèque (ou client) pré-écrite pour interroger l'API. Pour en savoir plus, voir cette discussion.
Dans ce tutoriel, nous apprendrons à accéder à l'API SoundCloud et à simplifier le processus à l'aide du SDK. Nous allons marcher mais installer le SDK, puis écrire le javascript pour obtenir des données, lire l'audio et plus sur SoundCloud.
Pour commencer
Conna?tre les concepts et les fonctions de HTTP et API sera utile. Si vous voulez en savoir plus sur les API, je recommande ce court cours: une introduction aux API. Un peu de connaissance du JavaScript asynchrone, des promesses et des rappels aidera également. jQuery est utilisé dans nos exemples de code, donc savoir que les bases ne feront pas de mal.
Pour commencer à interroger l'API SoundCloud à l'aide de JavaScript, nous devons télécharger le SDK JavaScript fourni par SoundCloud. Comme mentionné précédemment, il existe deux versions différentes du SDK disponibles.
Quelle version du SDK utiliser?
La principale différence entre eux est la fa?on dont ils renvoient les données lorsqu'une demande asynchrone est faite à l'API. La dernière version renvoie une promesse, tandis que l'autre nécessite une fonction de rappel comme un paramètre.
Un problème que j'ai remarqué, c'est qu'avec la version du SDK utilisée par la documentation, il semble y avoir un problème avec la fonctionnalité de la login d'utilisateur, car la fenêtre contextuelle ne se ferme pas automatiquement.
Donc, pour la simplicité, et parce qu'il est plus stable, nous utiliserons l'ancienne version dans les exemples tout au long de ce tutoriel. Cette version nécessitera des fonctions de rappel pour les demandes asynchrones.
en utilisant l'API SoundCloud
Configurer un document HTML de base
Nous créerons une page HTML de base qui servira de page d'accueil. Nous inclurons également le SDK ici, afin que nous puissions utiliser ses fonctionnalités.
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span> </span> <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Notez que nous avons inclus le SDK dans notre page directement à partir des serveurs de SoundCloud. Vous pouvez également télécharger le SDK et référence à celui-ci comme:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
pour tester si le SDK est chargé correctement dans votre page Web:
- Ouvrez la page dans un navigateur (Chrome recommandé).
- Ouvrez la console du développeur dans le navigateur ( Ctrl Shift J , dans Chrome).
- Dans la console, tapez SC et appuyez sur Entrée. SC est un objet JavaScript créé par le SDK que nous venons de inclure.
Si une erreur non définie appara?t, elle ne se charge pas correctement. Essayez de rafra?chir et assurez-vous que le chemin du fichier SDK (sdk.js) est correct.
Enregistrez une application SoundCloud
Pour enregistrer une application SoundCloud, tout ce dont vous avez besoin est un compte SoundCloud. Si vous n'en avez pas déjà un, allez-y et créez-en un. En enregistrant une application, les serveurs SoundCloud pourront vérifier notre demande, afin que personne d'autre ne puisse faire une demande en notre nom.
Remarque: nous pouvons ignorer cette étape, si nous n'utilisons pas la fonctionnalité de login d'utilisateur dans notre site Web. Il sera expliqué dans la section suivante.
-
Ouvrez la page SoundCloud Apps. Ici, toutes les applications que nous avons déjà créées seront répertoriées. Assurez-vous que vous êtes connecté à votre compte SoundCloud. Remarque: vous n'avez pas besoin de créer un compte distinct à cet effet. Vous pouvez utiliser le même compte que vous utilisez à des fins personnelles.
-
Cliquez sur le bouton Enregistrer un nouveau bouton Application .
-
Donnez-lui un nom et acceptez les stratégies de développement de SoundCloud en consultant la case à cocher.
-
Cliquez sur le bouton Big Enregistrer , pour terminer l'enregistrement de l'application.
Une fois que nous nous sommes inscrits avec succès, nous serons redirigés vers la page Paramètres de notre application nouvellement créée. Là, nous trouverons notre application ID client , qui sera utilisé pour autoriser nos demandes. Nous pouvons laisser les champs site Web et Rappel pour l'instant. Nous y reviendrons plus tard.
Initialiser le client
En ?initialisant le client?, nous voulons rendre le client prêt à échanger des données entre lui-même et l'API SoundCloud. Nous pouvons le faire dans notre document HTML de base, que nous avons créé plus t?t, ou dans un fichier externe .js .
La syntaxe JavaScript pour le faire est:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span> </span> <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Décomposons-le:
- Le client_id nous est fourni lorsque nous enregistrons notre application.
- callback_url est l'URL de callback.html, un fichier html qui est appelé après que l'utilisateur s'est connecté. Nous le créerons bient?t.
Maintenant, après initialisation, nous sommes prêts à interroger l'API SoundCloud. Jetons un coup d'?il à quelques exemples de ce que nous pouvons déjà faire.
Exemples
Si nous ouvrons la console de navigateur et le type SC., Une liste de méthodes associées à l'objet SC appara?tra. SC.Get (URI, rappel) est l'un d'eux, qui est utilisé pour faire des demandes de GET à l'API.
Obtenir une liste de pistes
Pour obtenir une liste de pistes aléatoires, nous pouvons utiliser sc.get () comme ceci:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
Voir les pistes de liste des stylos par SitePoint (@SitePoint) sur Codepen.
Ce que cela fait, c'est qu'il interroge le point de terminaison / suit et attend une fonction de rappel. La réponse est stockée dans le paramètre de réponse du rappel, qui est un tableau d'objets JavaScript avec plusieurs propriétés, le titre étant l'un d'entre eux. Nous pouvons console.log (réponse [0]) au lieu de boucler pour voir un objet entier et ses propriétés. Ensuite, nous saurons à quelles propriétés nous avons accès.
AVIS, dans cet exemple, nous n'avons pas spécifié d'URL de rappel lors de l'initialisation. En effet, ici, peu importe si nous le spécifions ou non. Quoi qu'il en soit, notre code fonctionnera. Mais lorsque nous implémenterons les fonctionnalités de la collection d'utilisateurs, cela sera important et sera nécessaire afin que personne d'autre ne puisse utiliser notre ID client.
Incorporer une piste
L'objet SC propose une autre méthode, S.oembed (URL, Options, rappel), qui incorpore le lecteur SoundCloud dans notre site Web et nous permet de jouer une trace de notre choix.
<span>SC.initialize({
</span> <span>client_id: "CLIENT_ID",
</span> <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
Voir le stylo incorporer une piste de SitePoint (@SitePoint) sur Codepen.
Décomposons-le:
- Tout d'abord, nous lui donnons une URL complète de la piste que nous voulons jouer.
- Dans le paramètre Options, nous définissons quelques options pour le lecteur. Voir plus ici.
- Dans la fonction de rappel, nous rempla?ons le contenu d'un élément (#Player) dans notre page par le code HTML pour le lecteur (res.html).
Cette astuce peut être utilisée pour intégrer une chanson ou une musique dans un site Web.
Implémentation de la connexion de l'utilisateur
Pour la mise en ?uvre de la fonctionnalité de la collection d'utilisateurs, nous devons avoir une URL de rappel à des fins d'autorisation. Il s'agit d'une exigence du protocole OAuth. Si vous êtes curieux à ce sujet, voici une explication simplifiée de: OAuth 2 simplifié. Alors allons-y et mettons à jour les paramètres de l'application pour inclure une URL de rappel de callback.html, que nous allons maintenant créer.
Créez la page de rappel
Une fois qu'un utilisateur s'est connecté, la fenêtre contextuelle redirige vers ce fichier. Dans notre cas, nous allons le nommer Callback.html et il résidera dans le même répertoire que notre page d'accueil (index.html). Ceci est le fichier que nous devons donner dans le champ de rappel dans les paramètres de nos applications.
Le code que nous devons utiliser dans le fichier de rappel est fourni dans la documentation. Cependant, la documentation est un peu obsolète, nous allons donc le modifier légèrement pour répondre aux normes modernes.
Vous pouvez modifier son message et sa conception autant que vous le souhaitez, mais pour l'instant, nous le garderons aussi simple que possible:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span> </span> <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Enregistrer l'utilisateur dans
sc.connect (rappel) est la méthode d'implémentation de la fonctionnalité d'utilisateur-login. Il ouvre une fenêtre contextuelle, incitant l'utilisateur à se connecter à son compte SoundCloud. L'utilisation de base est comme ci-dessous:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
Un exemple légèrement plus intéressant serait:
<span>SC.initialize({
</span> <span>client_id: "CLIENT_ID",
</span> <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
Décomposons-le:
- Une fois que l'utilisateur s'est connecté, il sera redirigé vers Callback.html, que nous avons créé plus t?t.
- Ensuite, la fenêtre contextuelle se fermera automatiquement, comme nous pouvons le deviner en lisant le code dans rappel.html.
- Après cela, notre fonction de rappel sera appelée, dans laquelle un point de terminaison de la demande de GET est effectué à l'aide de la méthode sc.get ().
- dès que la demande de GET se termine, sa fonction de rappel est exécutée et un message de bienvenue est enregistré à la console.
Remarquez qu'une demande à / moi renverra des données sur l'utilisateur actuellement connecté. Par conséquent, l'utiliser avant que l'utilisateur ne soit connecté entra?nera un message d'erreur.
jouer avec les données de l'utilisateur
Une fois que l'utilisateur s'est connecté, il y a tellement plus que nous pouvons faire. Pour démontrer une partie de la puissance, j'ai créé un site Web de démonstration sur GitHub. Vous pouvez trouver le code source ici et le voir en action ici.
Parcourons deux des fichiers. Dans index.html, les quatre divs sont importants, car ils sont remplis de données utilisateur après que l'utilisateur s'est connecté:
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span> </span> <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
Le fichier le plus important le plus important est Script.js: toute la magie se produit ici. La plupart du code nous sera familier, mais passons rapidement à travers cela:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
- Nous initialisons d'abord notre application. Remarquez, cette fois, nous avons Redirect_uri spécifié comme notre page Callback.html. Cette URL ou URI doit correspondre exactement à l'URL que nous avons spécifiée dans les paramètres de nos applications.
<span>SC.initialize({
</span> <span>client_id: "CLIENT_ID",
</span> <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
- Ensuite, nous attachons un gestionnaire d'événements de clic au bouton #login. Qui, lorsqu'il est cliqué, exécutera sc.connect (rappel) qui ouvre une fenêtre contextuelle incitant l'utilisateur à se connecter.
- Une fois l'utilisateur connecté, la fenêtre pop-up se ferme. Ensuite, la fonction de rappel de sc.connect () est exécutée. à l'intérieur de la fonction de rappel, nous faisons une demande GET au point de terminaison / Me qui renvoie l'objet de l'utilisateur actuellement connecté. Dans le rappel de la demande GET que nous venons de faire, nous stockons le permalien de l'utilisateur dans la variable User_perma, qui est définie dans la portée globale, afin que nous puissions l'utiliser plus tard.
- les fonctions setui (), getTracks () et getPlayLists (), configurer l'interface utilisateur, répertorier respectivement les pistes de l'utilisateur et énumérer les listes de lecture de l'utilisateur. Ces fonctions sont définies dans le même fichier.
<span>SC.get("/tracks", function(response) {
</span> <span>for (var i = 0; i < response.length; i++) {
</span> <span>$("ul").append("<li>" + response[i].title + "</li>");
</span> <span>}
</span><span>});
</span>
- Lorsque tout nom de piste ou de playlist est cliqué, la fonction play () s'exécute, qui intègre un lecteur audio dans notre page en utilisant la méthode sc.oembed (), pour cette piste ou playlist.
Il y a beaucoup plus que nous pouvons faire, comme obtenir ou mettre à jour la description de l'utilisateur, obtenir l'avatar de l'utilisateur, voir qui suit l'utilisateur et ses favoris.
Résumé
- Utilisez l'ancienne version du SDK, si la fonctionnalité de login d'utilisateur doit être utilisée. Il est stable et les données sont renvoyées à l'aide des fonctions de rappel.
- Si la fonctionnalité de login utilisateur n'est pas utilisée, la version plus récente du SDK peut être utilisée. Il utilise des promesses pour retourner les données.
- Les données de l'API SoundCloud sont accessibles par une simple demande de GET.
- Les données spécifiques à l'utilisateur peuvent être obtenues en utilisant / me point de terminaison, mais uniquement si l'utilisateur est connecté à notre site Web en utilisant son compte SoundCloud.
interroger une API à partir du c?té client est un outil puissant car il nous sauve des complexités du back-end. Le SDK facilite notre vie. Après avoir appris ses bases, nous pouvons créer des applications Web encore plus puissantes et conviviales. Voir quelques exemples de ce qui est possible et consultez la documentation officielle de SoundCloud pour en savoir plus sur les méthodes API avancées disponibles.
Je serais ravi de vous entendre sur les choses que vous avez construites (ou prévoyez de construire) avec le SoundCloud SDK. Faites-moi savoir dans les commentaires!
Questions fréquemment posées (FAQ) sur l'utilisation de l'API SoundCloud avec JavaScript SDK
Quelles sont les conditions préalables à l'utilisation de l'API SoundCloud avec JavaScript SDK?
Pour utiliser l'API SoundCloud avec JavaScript SDK, vous devez avoir une compréhension de base de JavaScript et le fonctionnement des API. Vous devez également avoir un compte SoundCloud et une application enregistrée sur SoundCloud. L'application enregistrée vous fournira un ID client, qui est nécessaire pour faire des demandes d'API.
Comment puis-je enregistrer une application sur SoundCloud pour obtenir un ID client?
Pour enregistrer une application sur SoundCloud, vous devez vous connecter à votre compte SoundCloud et accéder à la section ?Applications?. Ici, vous pouvez créer une nouvelle application en fournissant les détails nécessaires tels que le nom de l'application, la description, le site Web et la redirection URI. Une fois l'application créée, vous recevrez un ID client.
Comment puis-je initialiser l'API SoundCloud avec mon ID client?
Pour initialiser l'API SoundCloud, vous devez utiliser le SC.Initialiser la méthode et passer dans un objet avec votre ID client. Voici un exemple:
sc.Initialize ({
client_id: 'your_client_id'
});
Remplacez 'your_client_id' par l'ID client de votre application enregistrée.
Comment faire des demandes d'API à SoundCloud?
Vous pouvez faire des demandes d'API à SoundCloud à l'aide de la méthode SC.get. Cette méthode prend deux paramètres: le point de terminaison et une fonction de rappel. Le point de terminaison est l'URL de la ressource API auquel vous souhaitez accéder, et la fonction de rappel est exécutée lorsque la réponse de l'API est re?ue.
Comment gérer les erreurs lors de la création de demandes d'API?
Quand En faisant des demandes d'API, les erreurs peuvent être gérées à l'aide de la méthode de capture. Cette méthode prend une fonction en tant que paramètre, qui est exécuté lorsqu'une erreur se produit. L'objet d'erreur est transmis à cette fonction, vous permettant de gérer l'erreur de manière appropriée.
Comment lire une piste à l'aide de l'API SoundCloud?
Pour lire une piste à l'aide de l'API SoundCloud, vous, vous Besoin d'utiliser la méthode SC.stream. Cette méthode prend l'URI de la piste en tant que paramètre et renvoie un objet Stream. Vous pouvez ensuite utiliser la méthode de lecture de cet objet pour lire la piste.
Comment faire une pause et reprendre une piste?
Pour suspendre une piste, vous pouvez utiliser la méthode de pause sur le flux objet. Pour reprendre la piste, vous pouvez à nouveau utiliser la méthode de lecture.
Comment puis-je obtenir les détails d'une piste?
Pour obtenir les détails d'une piste, vous pouvez utiliser le sc.get Méthode et passer l'URI de la piste en tant que paramètre. La réponse de l'API contiendra les détails de la piste.
Comment rechercher des pistes?
Pour rechercher des pistes, vous pouvez utiliser la méthode SC.get et passer ‘/ Tracks’ comme point de terminaison. Vous pouvez également passer un paramètre de requête pour filtrer les pistes. Par exemple, pour rechercher des pistes avec le titre 'My Track', vous pouvez utiliser le code suivant:
sc.get ('/ Tracks', {Q: 'My Track'}). Puis (fonction (pistes) {
console.log (pistes);
});
comment puis-je obtenir des pistes d'utilisateur?
Pour obtenir des pistes d'un utilisateur, vous pouvez utiliser le Méthode sc.get et pass '/ users / {user_id} / tracks' comme point de terminaison. Remplacez ?{user_id}? par l'ID de l'utilisateur. La réponse API contiendra les pistes de l'utilisateur.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.
Jul 08, 2025 pm 02:27 PM
Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle
Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript
Jul 08, 2025 am 02:40 AM
La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)
Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?
Jul 08, 2025 am 02:43 AM
Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.
JS Roundup: une plongée profonde dans la boucle d'événement JavaScript
Jul 08, 2025 am 02:24 AM
La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.
Comprendre l'événement bouillonnant et capturer dans les événements JavaScript DOM
Jul 08, 2025 am 02:36 AM
Les bulles d'événements se propagent de l'élément cible vers l'extérieur vers le n?ud d'ancêtre, tandis que la capture d'événements se propage de la couche externe vers l'intérieur vers l'élément cible. 1. événements Bubbles: Après avoir cliqué sur l'élément enfant, l'événement déclenche l'auditeur de l'élément parent vers le haut. Par exemple, après avoir cliqué sur le bouton, il sortira d'abord cliqué sur l'enfant, puis parent. 2. Capture d'événement: définissez le troisième paramètre sur true, afin que l'auditeur soit exécuté dans l'étape de capture, tels que le déclenchement de l'écouteur de capture de l'élément parent avant de cliquer sur le bouton. 3. Les utilisations pratiques incluent la gestion unifiée des événements d'éléments enfants, le prétraitement d'interception et l'optimisation des performances. 4. Le flux d'événements DOM est divisé en trois étapes: capture, cible et bulle, et l'écouteur par défaut est exécuté dans l'étape de la bulle.
Un tour d'horizon des fonctions d'ordre supérieur au-delà de la carte et du filtre
Jul 10, 2025 am 11:41 AM
Dans les tableaux JavaScript, en plus de la carte et du filtre, il existe d'autres méthodes puissantes et rarement utilisées. 1. La réduction peut non seulement résumer, mais également compter, se regrouper, aplatir les tableaux et construire de nouvelles structures; 2. Find et FindIndex sont utilisés pour trouver des éléments ou des index individuels; 3.Il et tout sont utilisés pour déterminer si les conditions existent ou que toutes les personnes se rencontrent; 4.Sort peut être trié mais changera le tableau d'origine; 5. Faites attention à la copie du tableau lorsque vous l'utilisez pour éviter les effets secondaires. Ces méthodes rendent le code plus concis et efficace.
