1import{r as t,o as l,c as i,a as s,b as e,w as u,F as r,f as a,d as n}from"./app.1a0d0096.js";const k={},d=a('<h1 id="understanding-async-await" tabindex="-1"><a class="header-anchor" href="#understanding-async-await" aria-hidden="true">#</a> Understanding async/await</h1><p>If you aren't very familiar with ECMAScript 2017, you may not know about async/await. It's a useful way to handle Promises in a hoisted manner. It's also slightly faster and increases overall readability.</p><h2 id="how-do-promises-work" tabindex="-1"><a class="header-anchor" href="#how-do-promises-work" aria-hidden="true">#</a> How do Promises work?</h2><p>Before we can get into async/await, you should know what Promises are and how they work because async/await is just a way to handle Promises. If you know what Promises are and how to deal with them, you can skip this part.</p><p>Promises are a way to handle asynchronous tasks in JavaScript; they are the newer alternative to callbacks. A Promise has many similarities to a progress bar; they represent an unfinished and ongoing process. An excellent example of this is a request to a server (e.g., discord.js sends requests to Discord's API).</p><p>A Promise can have three states; pending, resolved, and rejected</p><p>The <strong>pending</strong> state means that the Promise still is ongoing and neither resolved nor rejected. The <strong>resolved</strong> state means that the Promise is done and executed without any errors. The <strong>rejected</strong> state means that the Promise encountered an error and could not execute correctly.</p><p>One important thing to know is that a Promise can only have one state simultaneously; it can never be pending and resolved, rejected and resolved, or pending and rejected. You may be asking, "How would that look in code?". Here is a small example:</p>',8),h={class:"custom-container tip"},m=s("p",{class:"custom-container-title"},"TIP",-1),b=n("This example uses ES6 code. If you do not know what that is, you should read up on that "),g=n("here"),v=n("."),w=a(`<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">deleteMessages</span><span class="token punctuation">(</span><span class="token parameter">amount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 2 <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 3 <span class="token keyword">if</span> <span class="token punctuation">(</span>amount <span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'You can\\'t delete more than 10 Messages at a time.'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 4 <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Deleted 10 messages.'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2_000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 5 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 6<span class="token punctuation">}</span> 7 8<span class="token function">deleteMessages</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 9 <span class="token comment">// \`deleteMessages\` is complete and has not encountered any errors</span> 10 <span class="token comment">// the resolved value will be the string "Deleted 10 messages"</span> 11<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 12 <span class="token comment">// \`deleteMessages\` encountered an error</span> 13 <span class="token comment">// the error will be an Error Object</span> 14<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 15</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>In this scenario, the <code>deleteMessages</code> function returns a Promise. The <code>.then()</code> method will trigger if the Promise resolves, and the <code>.catch()</code> method if the Promise rejects. In the <code>deleteMessages</code> function, the Promise is resolved after 2 seconds with the string "Deleted 10 messages.", so the <code>.catch()</code> method will never be executed. You can also pass the <code>.catch()</code> function as the second parameter of <code>.then()</code>.</p><h2 id="how-to-implement-async-await" tabindex="-1"><a class="header-anchor" href="#how-to-implement-async-await" aria-hidden="true">
15#</a> How to implement async/await</h2><h3 id="theory" tabindex="-1"><a class="header-anchor" href="#theory" aria-hidden="true">#</a> Theory</h3><p>The following information is essential to know before working with async/await. You can only use the <code>await</code> keyword inside a function declared as <code>async</code> (you put the <code>async</code> keyword before the <code>function</code> keyword or before the parameters when using a callback function).</p><p>A simple example would be:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">declaredAsAsync</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 16 <span class="token comment">// ...</span> 17<span class="token punctuation">}</span> 18</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>or</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token function-variable function">declaredAsAsync</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 19 <span class="token comment">// ...</span> 20<span class="token punctuation">}</span><span class="token punctuation">;</span> 21</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>You can use that as well if you use the arrow function as an event listener.</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'event'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">first<span class="token punctuation">,</span> last</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 22 <span class="token comment">// ...</span> 23<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 24</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>An important thing to know is that a function declared as <code>async</code> will always return a Promise. In addition to this, if you return something, the Promise will resolve with that value, and if you throw an error, it will reject the Promise with that error.</p><h3 id="execution-with-discord-js-code" tabindex="-1"><a class="header-anchor" href="#execution-with-discord-js-code" aria-hidden="true">#</a> Execution with discord.js code</h3><p>Now that you know how Promises work and what they are used for, let's look at an example that handles multiple Promises. Let's say you want to react with letters (regional indicators) in a specific order. For this example, here's a basic template for a discord.js bot with some ES6 adjustments.</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> Client<span class="token punctuation">,</span> Events<span class="token punctuation">,</span> GatewayIntentBits <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'discord.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 25 26<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Client</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">intents</span><span class="token operator">:</span> <span class="token punctuation">[</span>GatewayIntentBits<span class="token punctuation">.</span>Guilds<span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 27 28client<span class="token punctuation">.</span><span class="token function">once</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>ClientReady<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 29 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I am ready!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 30<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 31 32client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 33 <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>interaction<span class="token punctuation">.</span><span class="token function">isChatInputCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> 34 35 <span class="token keyword">if</span> <span class="token punctuation">(</span>interaction<span class="token punctuation">.</span>commandName <span class="token operator">===</span> <span class="token string">'react'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 36 <span class="token comment">
36// ...</span> 37 <span class="token punctuation">}</span> 38<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 39 40client<span class="token punctuation">.</span><span class="token function">login</span><span class="token punctuation">(</span><span class="token string">'your-token-goes-here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 41</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>If you don't know how Node.js asynchronous execution works, you would probably try something like this:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 42 <span class="token comment">// ...</span> 43 <span class="token keyword">if</span> <span class="token punctuation">(</span>commandName <span class="token operator">===</span> <span class="token string">'react'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 44 <span class="token keyword">const</span> response <span class="token operator">=</span> interaction<span class="token punctuation">.</span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'Reacting!'</span><span class="token punctuation">,</span> <span class="token literal-property property">withResponse</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 45 <span class="token keyword">const</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> response<span class="token punctuation">.</span>resource<span class="token punctuation">;</span> 46 message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E6}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 47 message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E7}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 48 message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E8}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 49 <span class="token punctuation">}</span> 50<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 51</code></pre><div class="highlight-lines"><br><br><br><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>But since all of these methods are started at the same time, it would just be a race to which server request finished first, so there would be no guarantee that it would react at all (if the message isn't fetched) or in the order you wanted it to. In order to make sure it reacts after the message is sent and in order (a, b, c), you'd need to use the <code>.then()</code> callback from the Promises that these methods return. The code would look like this:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 52 <span class="token comment">
52// ...</span> 53 <span class="token keyword">if</span> <span class="token punctuation">(</span>commandName <span class="token operator">===</span> <span class="token string">'react'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 54 interaction<span class="token punctuation">.</span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'Reacting!'</span><span class="token punctuation">,</span> <span class="token literal-property property">withResponse</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> 55 <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 56 <span class="token keyword">const</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> response<span class="token punctuation">.</span>resource<span class="token punctuation">;</span> 57 58 message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E6}'</span><span class="token punctuation">)</span> 59 <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E7}'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> 60 <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E8}'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> 61 <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 62 <span class="token comment">// handle failure of any Promise rejection inside here</span> 63 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 64 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 65 <span class="token punctuation">}</span> 66<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 67</code></pre><div class="highlight-lines"><br><br><br><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><br><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div>`,19),y=n("In this piece of code, the Promises are "),f={href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining",target:"_blank",rel:"noopener noreferrer"},_=n("chain resolved"),j=n(" with each other, and if one of the Promises gets rejected, the function passed to "),x=s("code",null,".catch()",-1),P=n(" gets called. Here's the same code but with async/await:"),I=a(`<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 68 <span class="token comment">
68// ...</span> 69 <span class="token keyword">if</span> <span class="token punctuation">(</span>commandName <span class="token operator">===</span> <span class="token string">'react'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 70 <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> interaction<span class="token punctuation">.</span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'Reacting!'</span><span class="token punctuation">,</span> <span class="token literal-property property">withResponse</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 71 <span class="token keyword">const</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> response<span class="token punctuation">.</span>resource<span class="token punctuation">;</span> 72 <span class="token keyword">await</span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E6}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 73 <span class="token keyword">await</span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E7}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 74 <span class="token keyword">await</span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E8}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 75 <span class="token punctuation">}</span> 76<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 77</code></pre><div class="highlight-lines"><div class="highlight-line">\xA0</div><br><br><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>It's mostly the same code, but how would you catch Promise rejections now since <code>.catch()</code> isn't there anymore? That is also a useful feature with async/await; the error will be thrown if you await it so that you can wrap the awaited Promises inside a try/catch, and you're good to go.</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 78 <span class="token keyword">if</span> <span class="token punctuation">(</span>commandName <span class="token operator">===</span> <span class="token string">'react'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 79 <span class="token keyword">try</span> <span class="token punctuation">{</span> 80 <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> interaction<span class="token punctuation">.</span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'Reacting!'</span><span class="token punctuation">,</span> <span class="token literal-property property">withResponse</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 81 <span class="token keyword">const</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> response<span class="token punctuation">.</span>resource<span class="token punctuation">;</span> 82 <span class="token keyword">await</span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E6}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 83 <span class="token keyword">await</span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E7}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 84 <span class="token keyword">await</span> message<span class="token punctuation">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string">'\u{1F1E8}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 85 <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span> 86 <span class="token comment">// handle failure of any Promise rejection inside here</span> 87 <span class="token punctuation">}</span> 88 <span class="token punctuation">}</span> 89<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 90</code></pre><div class="highlight-lines"><div class="highlight-line">\xA0</div><br><br><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>This code looks clean and is also easy to read.</p><p>So you may be asking, "How would I get the value the Promise resolved with?".</p><p>Let's look at an example where you want to delete a sent reply.</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 91 <span class="token comment">
91// ...</span> 92 <span class="token keyword">if</span> <span class="token punctuation">(</span>commandName <span class="token operator">===</span> <span class="token string">'delete'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 93 interaction<span class="token punctuation">.</span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'This message will be deleted.'</span><span class="token punctuation">,</span> <span class="token literal-property property">withResponse</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> 94 <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> response<span class="token punctuation">.</span>resource<span class="token punctuation">.</span>message<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">10_000</span><span class="token punctuation">)</span><span class="token punctuation">)</span> 95 <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 96 <span class="token comment">// handle error</span> 97 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 98 <span class="token punctuation">}</span> 99<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 100</code></pre><div class="highlight-lines"><br><br><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,7),C=n("The return value of a "),T=s("code",null,".reply()",-1),E=n(" with the "),R=s("code",null,"withResponse",-1),N=n(" option set to "),q=s("code",null,"true",-1),A=n(" is a promise which resolves with "),L=n(", but how would the same code with async/await look?"),M=a(`<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>client<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>Events<span class="token punctuation">.</span>InteractionCreate<span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token parameter">interaction</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 101 <span class="token keyword">if</span> <span class="token punctuation">(</span>commandName <span class="token operator">===</span> <span class="token string">'delete'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 102 <span class="token keyword">try</span> <span class="token punctuation">{</span> 103 <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> interaction<span class="token punctuation">.</span><span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'This message will be deleted.'</span><span class="token punctuation">,</span> <span class="token literal-property property">withResponse</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 104 <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> response<span class="token punctuation">.</span>resource<span class="token punctuation">.</span>message<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">10_000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 105 <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span> 106 <span class="token comment">// handle error</span> 107 <span class="token punctuation">}</span> 108 <span class="token punctuation">}</span> 109<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 110</code></pre><div class="highlight-lines"><div class="highlight-line">\xA0</div><br><br><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div><div class="highlight-line">\xA0</div></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>With async/await, you can assign the awaited function to a variable representing the returned value. Now you know how you use async/await.</p>`,2);function S(B,D){const p=t("RouterLink"),o=t("OutboundLink"),c=t("DocsLink");return l(),i(r,null,[d,s("div",h,[m,s("p",null,[b,e(p,{to:"/additional-info/es6-syntax.html"},{default:u(()=>[g]),_:1}),v])]),w,s("p",null,[y,s("a",f,[_,e(o)]),j,x,P]),I,s("p",null,[C,T,E,R,N,q,A,e(c,{path:"InteractionCallbackResponse:Class"}),L]),M],64)}k.render=S;export{k as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.