zhuhjay
22e48d9558
- 新增 .drone.yml 文件用于定义 CI/CD 流程 - 配置了基于 Docker 的部署步骤 - 设置了工作区和卷映射以支持持久化数据 - 添加了构建准备阶段和 Docker 部署阶段 - 定义了环境变量和代理设置 - 配置了 artifacts 目录的处理逻辑 - 添加了 timezone 映射以确保时间同步 - 设置了 docker.sock 映射以支持 Docker in Docker
153 lines
58 KiB
HTML
153 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Promise使用之道 | ZhuHJay Blog</title>
|
||
<meta name="generator" content="VuePress 1.9.7">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="description" content="my blog">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||
|
||
<link rel="preload" href="/assets/css/0.styles.93f9cd2e.css" as="style"><link rel="preload" href="/assets/js/app.049e1b5b.js" as="script"><link rel="preload" href="/assets/js/3.ff0e945d.js" as="script"><link rel="preload" href="/assets/js/1.1ced4111.js" as="script"><link rel="preload" href="/assets/js/12.588a1dd8.js" as="script"><link rel="prefetch" href="/assets/js/10.21e2f029.js"><link rel="prefetch" href="/assets/js/11.18770288.js"><link rel="prefetch" href="/assets/js/13.e66c15d0.js"><link rel="prefetch" href="/assets/js/14.141a3334.js"><link rel="prefetch" href="/assets/js/15.bd05cf61.js"><link rel="prefetch" href="/assets/js/16.346083d6.js"><link rel="prefetch" href="/assets/js/17.382f52f1.js"><link rel="prefetch" href="/assets/js/18.a55369bc.js"><link rel="prefetch" href="/assets/js/19.a2a264ee.js"><link rel="prefetch" href="/assets/js/20.c6871f96.js"><link rel="prefetch" href="/assets/js/21.2956f057.js"><link rel="prefetch" href="/assets/js/4.581595e5.js"><link rel="prefetch" href="/assets/js/5.55d6cfd7.js"><link rel="prefetch" href="/assets/js/6.9619dc5e.js"><link rel="prefetch" href="/assets/js/7.d2b7a379.js"><link rel="prefetch" href="/assets/js/8.9f502ca9.js"><link rel="prefetch" href="/assets/js/9.ec0bd674.js">
|
||
<link rel="stylesheet" href="/assets/css/0.styles.93f9cd2e.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-7dd95ae2><div data-v-7dd95ae2><div class="password-shadow password-wrapper-out" style="display:none;" data-v-59e6cb88 data-v-7dd95ae2 data-v-7dd95ae2><h3 class="title" data-v-59e6cb88>ZhuHJay Blog</h3> <p class="description" data-v-59e6cb88>my blog</p> <label id="box" class="inputBox" data-v-59e6cb88><input type="password" value="" data-v-59e6cb88> <span data-v-59e6cb88>Konck! Knock!</span> <button data-v-59e6cb88>OK</button></label> <div class="footer" data-v-59e6cb88><span data-v-59e6cb88><i class="iconfont reco-theme" data-v-59e6cb88></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-59e6cb88>vuePress-theme-reco</a></span> <span data-v-59e6cb88><i class="iconfont reco-copyright" data-v-59e6cb88></i> <a data-v-59e6cb88><span data-v-59e6cb88>ZhuHJay</span>
|
||
|
||
<span data-v-59e6cb88>2021 - </span>
|
||
2025
|
||
</a></span></div></div> <div class="hide" data-v-7dd95ae2><header class="navbar" data-v-7dd95ae2><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="ZhuHJay Blog" class="logo"> <span class="site-name">ZhuHJay Blog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
|
||
首页
|
||
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
|
||
分类
|
||
</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/Java/" class="nav-link"><i class="undefined"></i>
|
||
Java
|
||
</a></li><li class="dropdown-item"><!----> <a href="/categories/NoSQL/" class="nav-link"><i class="undefined"></i>
|
||
NoSQL
|
||
</a></li><li class="dropdown-item"><!----> <a href="/categories/JavaScript/" class="nav-link"><i class="undefined"></i>
|
||
JavaScript
|
||
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
|
||
标签
|
||
</a></div><div class="nav-item"><a href="https://gitee.com/ZhuHJay" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
|
||
码云
|
||
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-7dd95ae2></div> <aside class="sidebar" data-v-7dd95ae2><div class="personal-info-wrapper" data-v-1fad0c41 data-v-7dd95ae2><img src="/avatar.png" alt="author-avatar" class="personal-img" data-v-1fad0c41> <h3 class="name" data-v-1fad0c41>
|
||
ZhuHJay
|
||
</h3> <div class="num" data-v-1fad0c41><div data-v-1fad0c41><h3 data-v-1fad0c41>11</h3> <h6 data-v-1fad0c41>文章</h6></div> <div data-v-1fad0c41><h3 data-v-1fad0c41>5</h3> <h6 data-v-1fad0c41>标签</h6></div></div> <ul class="social-links" data-v-1fad0c41></ul> <hr data-v-1fad0c41></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
|
||
首页
|
||
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
|
||
分类
|
||
</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/Java/" class="nav-link"><i class="undefined"></i>
|
||
Java
|
||
</a></li><li class="dropdown-item"><!----> <a href="/categories/NoSQL/" class="nav-link"><i class="undefined"></i>
|
||
NoSQL
|
||
</a></li><li class="dropdown-item"><!----> <a href="/categories/JavaScript/" class="nav-link"><i class="undefined"></i>
|
||
JavaScript
|
||
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
|
||
标签
|
||
</a></div><div class="nav-item"><a href="https://gitee.com/ZhuHJay" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
|
||
码云
|
||
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-59e6cb88 data-v-7dd95ae2><h3 class="title" data-v-59e6cb88>Promise使用之道</h3> <!----> <label id="box" class="inputBox" data-v-59e6cb88><input type="password" value="" data-v-59e6cb88> <span data-v-59e6cb88>Konck! Knock!</span> <button data-v-59e6cb88>OK</button></label> <div class="footer" data-v-59e6cb88><span data-v-59e6cb88><i class="iconfont reco-theme" data-v-59e6cb88></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-59e6cb88>vuePress-theme-reco</a></span> <span data-v-59e6cb88><i class="iconfont reco-copyright" data-v-59e6cb88></i> <a data-v-59e6cb88><span data-v-59e6cb88>ZhuHJay</span>
|
||
|
||
<span data-v-59e6cb88>2021 - </span>
|
||
2025
|
||
</a></span></div></div> <div data-v-7dd95ae2><div data-v-7dd95ae2><main class="page"><section style="display:;"><div class="page-title"><h1 class="title">Promise使用之道</h1> <div data-v-8a445198><i class="iconfont reco-account" data-v-8a445198><span data-v-8a445198>ZhuHJay</span></i> <i class="iconfont reco-date" data-v-8a445198><span data-v-8a445198>2022/1/25</span></i> <!----> <i class="tags iconfont reco-tag" data-v-8a445198><span class="tag-item" data-v-8a445198>Promise</span></i></div></div> <div class="theme-reco-content content__default"><h2 id="_1-promise的理解和使用"><a href="#_1-promise的理解和使用" class="header-anchor">#</a> 1 Promise的理解和使用</h2> <p>Promise 是异步编程的一种解决方案，主要用来解决<strong>回调地狱</strong>的问题，可以有效的减少回调嵌套。真正解决需要配合async/await</p> <ul><li><p>抽象表达:</p> <ul><li>Promise 是一门新的技术(ES6 规范)</li> <li>Promise 是 JS 中进行异步编程的新解决方案
|
||
<blockquote><p>备注：旧方案是单纯使用回调函数</p></blockquote></li></ul></li> <li><p>具体表达:</p> <ul><li>从语法上来说: Promise 是一个构造函数</li> <li>从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值</li></ul></li></ul> <h3 id="_1-1-promise的状态"><a href="#_1-1-promise的状态" class="header-anchor">#</a> 1.1 Promise的状态</h3> <ul><li>实例对象中的一个属性 『PromiseState』
|
||
<ul><li>pending 未决定的</li> <li>resolved / fullfilled 成功</li> <li>rejected 失败</li></ul></li></ul> <blockquote><p>说明: 只有两种状态(resovled||rejectd), 且一个 promise 对象只能改变一次 无论变为成功还是失败, 都会有一个结果数据 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason</p></blockquote> <p><img src="https://note.youdao.com/yws/api/personal/file/425CC8D89ECD4EC7BB575F64D2DF0350?method=download&shareKey=676e11a6f1f8ba3398ab1321c3007fe0" alt="Promise基本流程"></p> <h3 id="_1-2-promise的基本使用"><a href="#_1-2-promise的基本使用" class="header-anchor">#</a> 1.2 Promise的基本使用</h3> <ol><li>延时器的使用来启动异步任务<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> timeOutPromise <span class="token operator">=</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>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"启动异步任务"</span><span class="token punctuation">)</span><span class="token punctuation">;</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> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"异步任务开始执行..."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> time <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span><span class="token punctuation">(</span> time <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"执行成功了"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">resolve</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"执行失败了"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">reject</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 异步任务的执行结果处理</span>
|
||
timeOutPromise
|
||
<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token parameter">reason</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reason<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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><span class="line-number">18</span><br></div></div></li> <li>ajax请求使用Promise<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 获取原生ajax对象</span>
|
||
<span class="token keyword">const</span> XMLHttpRequest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'xmlhttprequest'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>XMLHttpRequest<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> ajaxPromise <span class="token operator">=</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>
|
||
<span class="token comment">// 获取原生请求对象</span>
|
||
<span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'http://aopt.xyz:3366/test/hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 响应结果的回调函数</span>
|
||
xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span><span class="token punctuation">(</span> xhr<span class="token punctuation">.</span>readyState <span class="token operator">!==</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 将请求的数据通过解构赋值</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span>status<span class="token punctuation">,</span> responseText<span class="token punctuation">}</span> <span class="token operator">=</span> xhr<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span><span class="token punctuation">(</span> status <span class="token operator">>=</span> <span class="token number">200</span> <span class="token operator">&&</span> status <span class="token operator"><</span> <span class="token number">300</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
<span class="token function">resolve</span><span class="token punctuation">(</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
|
||
<span class="token function">reject</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 将请求进行发送</span>
|
||
xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
|
||
ajaxPromise
|
||
<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token parameter">reason</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reason<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div></li> <li>fs模块使用Promise<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
|
||
<span class="token comment">// 创建一个用来读取文件的函数</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">fsPromise</span> <span class="token operator">=</span> <span class="token parameter">path</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<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>
|
||
<span class="token comment">// 进行文件的读取, 第二个参数是以错误为优先的回调函数</span>
|
||
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span><span class="token punctuation">(</span> err <span class="token punctuation">)</span> <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">resolve</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token function">fsPromise</span><span class="token punctuation">(</span><span class="token string">'./笔记.md'</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token parameter">reason</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reason<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div></li> <li>异常穿透的Promise<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">fsPromise</span><span class="token punctuation">(</span><span class="token string">'./aksdhfa.txt'</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 punctuation">)</span>
|
||
<span class="token comment">// 捕捉该Promise中出现的异常, 然后进行处理</span>
|
||
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"这是catch捕捉到的异常"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div></li> <li><code>util.promisify</code>方法, 直接将函数变成Promise封装的方式<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> util <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'util'</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">let</span> creatorFsPromise <span class="token operator">=</span> util<span class="token punctuation">.</span><span class="token function">promisify</span><span class="token punctuation">(</span>fs<span class="token punctuation">.</span>readFile<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">creatorFsPromise</span><span class="token punctuation">(</span><span class="token string">'./笔记.md'</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"这是promisify方法"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div></li></ol> <h2 id="_2-为什么使用promise"><a href="#_2-为什么使用promise" class="header-anchor">#</a> 2 为什么使用Promise</h2> <ol><li>指定回调函数的方式更加灵活
|
||
<ul><li>旧的: 必须在启动异步任务前指定</li> <li>promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函 数(甚至可以在异步任务结束后指定/多个)</li></ul></li> <li>持链式调用, 可以解决回调地狱问题
|
||
<ol><li>什么是回调地狱
|
||
<ul><li>回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件</li></ul></li> <li>回调地狱的缺点?
|
||
<ul><li>不便于阅读 不便于异常处理</li></ul></li> <li>解决方案?
|
||
<ul><li>promise 链式调用,用来解决回调地狱问题，但是只是简单的改变格式，并没有彻底解决上面的问题真正要解决上述问题，一定要利用promise再加上await和async关键字实现异步传同步</li></ul></li> <li>终极解决方案?
|
||
<ul><li>promise + async/await</li></ul></li></ol></li></ol> <h2 id="_3-promise中常用的api"><a href="#_3-promise中常用的api" class="header-anchor">#</a> 3 Promise中常用的API</h2> <h3 id="_3-1-promise-构造函数-promise-excutor"><a href="#_3-1-promise-构造函数-promise-excutor" class="header-anchor">#</a> 3.1 Promise 构造函数: Promise(excutor){}</h3> <p>(1) executor 函数: 执行器 (resolve, reject) => {}</p> <p>(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}</p> <p>(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}</p> <blockquote><p>说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行,换话说Promise支持同步也支持异步操作</p></blockquote> <h3 id="_3-2-promise-prototype-then-方法-onresolved-onrejected"><a href="#_3-2-promise-prototype-then-方法-onresolved-onrejected" class="header-anchor">#</a> 3.2 Promise.prototype.then 方法: (onResolved, onRejected) => {}</h3> <p>(1) onResolved 函数: 成功的回调函数 (value) => {}</p> <p>(2) onRejected 函数: 失败的回调函数 (reason) => {}</p> <blockquote><p>说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调 返回一个新的 promise 对象</p></blockquote> <h3 id="_3-3-promise-prototype-catch-方法-onrejected"><a href="#_3-3-promise-prototype-catch-方法-onrejected" class="header-anchor">#</a> 3.3 Promise.prototype.catch 方法: (onRejected) => {}</h3> <p>(1) onRejected 函数: 失败的回调函数 (reason) => {}</p> <blockquote><p>说明: then()的语法糖, 相当于: then(undefined, onRejected)</p></blockquote> <p>(2) 异常穿透使用: 当运行到最后, 没被处理的所有异常错误都会进入这个方法的回调函数中</p> <h3 id="_3-4-promise-resolve-方法-value"><a href="#_3-4-promise-resolve-方法-value" class="header-anchor">#</a> 3.4 Promise.resolve 方法: (value) => {}</h3> <p>(1) value: 成功的数据或 promise 对象</p> <blockquote><p>说明: 返回一个成功/失败的 promise 对象,直接改变promise状态</p></blockquote> <h3 id="_3-5-promise-reject-方法-reason"><a href="#_3-5-promise-reject-方法-reason" class="header-anchor">#</a> 3.5 Promise.reject 方法: (reason) => {}</h3> <p>(1) reason: 失败的原因</p> <blockquote><p>说明: 返回一个失败的 promise 对象,直接改变promise状态</p></blockquote> <h3 id="_3-6-promise-all-方法-promises"><a href="#_3-6-promise-all-方法-promises" class="header-anchor">#</a> 3.6 Promise.all 方法: (promises) => {}</h3> <p>promises: 包含 n 个 promise 的数组</p> <blockquote><p>说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一 个失败了就直接失败</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> p1 <span class="token operator">=</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> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">let</span> p2 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'错误错误错误'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> p3 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'也是成功'</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> result <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">,</span> p3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div><h3 id="_3-7-promise-race-方法-promises"><a href="#_3-7-promise-race-方法-promises" class="header-anchor">#</a> 3.7 Promise.race 方法: (promises) => {}</h3> <p>(1) promises: 包含 n 个 promise 的数组</p> <blockquote><p>说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态, 如p1延时,开启了异步,内部正常是同步进行,所以p2>p3>p1,结果是P2</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> p1 <span class="token operator">=</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>
|
||
<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 punctuation">{</span>
|
||
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">let</span> p2 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> p3 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Oh Yeah'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">//调用</span>
|
||
<span class="token keyword">const</span> result <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">,</span> p3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">(</span>result<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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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><h2 id="_4-promise的几个关键问题"><a href="#_4-promise的几个关键问题" class="header-anchor">#</a> 4 Promise的几个关键问题</h2> <h3 id="_4-1-如何改变-promise-的状态"><a href="#_4-1-如何改变-promise-的状态" class="header-anchor">#</a> 4.1 如何改变 promise 的状态?</h3> <p>(1) resolve(value): 如果当前是 pending 就会变为 resolved</p> <p>(2) reject(reason): 如果当前是 pending 就会变为 rejected</p> <p>(3) 抛出异常: 如果当前是 pending 就会变为 rejected</p> <h3 id="_4-2-一个-promise-指定多个成功-失败回调函数-都会调用吗"><a href="#_4-2-一个-promise-指定多个成功-失败回调函数-都会调用吗" class="header-anchor">#</a> 4.2 一个 promise 指定多个成功/失败回调函数, 都会调用吗?</h3> <p>当 promise 改变为对应状态时都会调用, 改变状态后, 多个回调函数都会调用, 并不会自动停止(多次调用then)</p> <h3 id="_4-3-改变-promise-状态和指定回调函数谁先谁后"><a href="#_4-3-改变-promise-状态和指定回调函数谁先谁后" class="header-anchor">#</a> 4.3 改变 promise 状态和指定回调函数谁先谁后?</h3> <p>(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调</p> <ul><li>先指定回调再改变状态(<code>异步</code>): 先指定回调--> 再改变状态 -->改变状态后才进入异步队列执行回调函数</li> <li>先改状态再指定回调(<code>同步</code>): 改变状态 -->指定回调 并马上执行回调</li></ul> <p>(2) 如何先改状态再指定回调? -->注意: 指定并不是执行</p> <p> ① 在执行器中直接调用 resolve()/reject() -->即,不使用定时器等方法,执行器内直接同步操作</p> <p> ② 延迟更长时间才调用 then() -->即,在<code>.then()</code>这个方法外再包一层例如延时器这种方法</p> <p>(3) 什么时候才能得到数据?</p> <p> ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据(异步)</p> <p> ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据(同步)</p> <p>(4) 理解--结合源码</p> <ul><li>源码中,promise的状态是通过一个<code>默认为padding</code>的变量进行判断,所以当你<code>resolve/reject</code>延时(异步导致当then加载时,状态还未修改)后,这时直接进行<code>p.then()</code>会发现,目前状态还是进行中,所以只是这样导致只有同步操作才能成功.</li> <li>所以promise将传入的<code>回调函数</code>拷贝到promise对象实例上,然后在<code>resolve/reject</code>的执行过程中再进行调用,达到异步的目的</li> <li>具体代码实现看下方自定义promise</li></ul> <h3 id="_4-4-promise-then-返回的新-promise-的结果状态由什么决定"><a href="#_4-4-promise-then-返回的新-promise-的结果状态由什么决定" class="header-anchor">#</a> 4.4 promise.then()返回的新 promise 的结果状态由什么决定?</h3> <p>(1) 简单表达: 由 then()指定的回调函数执行的结果决定</p> <p>(2) 详细表达:</p> <p> ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常</p> <p> ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值</p> <p> ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果</p> <h3 id="_4-5-promise-如何串连多个操作任务"><a href="#_4-5-promise-如何串连多个操作任务" class="header-anchor">#</a> 4.5 promise 如何串连多个操作任务?</h3> <p>(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用</p> <p>(2) 通过 then 的链式调用串连多个同步/异步任务,这样就能用then()将多个同步或异步操作串联成一个同步队列</p> <h3 id="_4-6-promise-异常传透"><a href="#_4-6-promise-异常传透" class="header-anchor">#</a> 4.6 promise 异常传透?</h3> <ul><li>当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调</li> <li>前面任何操作出了异常, 都会传到最后失败的回调中处理</li></ul> <h3 id="_4-7-中断-promise-链"><a href="#_4-7-中断-promise-链" class="header-anchor">#</a> 4.7 中断 promise 链?</h3> <p>(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数</p> <p>(2) 办法: 在回调函数中返回一个 pendding 状态的promise 对象</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> p <span class="token operator">=</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><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 punctuation">{</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
p<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><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 punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token comment">//有且只有这一个方式</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">222</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">333</span><span class="token punctuation">)</span><span class="token punctuation">;</span><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">reason</span> <span class="token operator">=></span> <span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div><h2 id="_5-promise-async-await"><a href="#_5-promise-async-await" class="header-anchor">#</a> 5 Promise + async + await</h2> <ol><li><p>Promise ==> 异步</p></li> <li><p>await ==> 异步转同步</p> <ol><li>await 可以理解为是async wait的简写。await 必须出现在 async 函数内部，不能单独使用。</li> <li>await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行</li></ol></li> <li><p>async ==> 同步转异步</p> <ol><li>方法体内部的某个表达式使用await修饰，那么这个方法体所属方法必须要用async修饰所以使用awit方法会自动升级为异步方法</li></ol></li> <li><p>mdn文档</p> <ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function" target="_blank" rel="noopener noreferrer">async<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await" target="_blank" rel="noopener noreferrer">await<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ol> <h3 id="_5-1-async函数"><a href="#_5-1-async函数" class="header-anchor">#</a> 5.1 async函数</h3> <ol><li>函数的返回值为 promise 对象</li> <li>promise 对象的结果由 async 函数执行的返回值决定</li></ol> <h3 id="_5-2-await表达式"><a href="#_5-2-await表达式" class="header-anchor">#</a> 5.2 await表达式</h3> <ol><li>await 右侧的表达式一般为 promise 对象, 但也可以是其它的值</li> <li>如果表达式是 promise 对象, await 返回的是 promise 成功的值</li> <li>如果表达式是其它值, 直接将此值作为 await 的返回值</li></ol> <h3 id="_5-3-注意"><a href="#_5-3-注意" class="header-anchor">#</a> 5.3 注意</h3> <ol><li>await 必须写在 async 函数中, 但 async 函数中可以没有 await</li> <li>如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理</li></ol></div></section> <footer class="page-edit"><!----> <!----></footer> <!----> <div class="comments-wrapper"><!----></div></main></div> <!----></div> <ul class="sub-sidebar sub-sidebar-wrapper" style="width:12rem;" data-v-b57cc07c data-v-7dd95ae2><li class="level-2" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_1-promise的理解和使用" class="sidebar-link reco-side-_1-promise的理解和使用" data-v-b57cc07c>1 Promise的理解和使用</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_1-1-promise的状态" class="sidebar-link reco-side-_1-1-promise的状态" data-v-b57cc07c>1.1 Promise的状态</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_1-2-promise的基本使用" class="sidebar-link reco-side-_1-2-promise的基本使用" data-v-b57cc07c>1.2 Promise的基本使用</a></li><li class="level-2" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_2-为什么使用promise" class="sidebar-link reco-side-_2-为什么使用promise" data-v-b57cc07c>2 为什么使用Promise</a></li><li class="level-2" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-promise中常用的api" class="sidebar-link reco-side-_3-promise中常用的api" data-v-b57cc07c>3 Promise中常用的API</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-1-promise-构造函数-promise-excutor" class="sidebar-link reco-side-_3-1-promise-构造函数-promise-excutor" data-v-b57cc07c>3.1 Promise 构造函数: Promise(excutor){}</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-2-promise-prototype-then-方法-onresolved-onrejected" class="sidebar-link reco-side-_3-2-promise-prototype-then-方法-onresolved-onrejected" data-v-b57cc07c>3.2 Promise.prototype.then 方法: (onResolved, onRejected) => {}</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-3-promise-prototype-catch-方法-onrejected" class="sidebar-link reco-side-_3-3-promise-prototype-catch-方法-onrejected" data-v-b57cc07c>3.3 Promise.prototype.catch 方法: (onRejected) => {}</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-4-promise-resolve-方法-value" class="sidebar-link reco-side-_3-4-promise-resolve-方法-value" data-v-b57cc07c>3.4 Promise.resolve 方法: (value) => {}</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-5-promise-reject-方法-reason" class="sidebar-link reco-side-_3-5-promise-reject-方法-reason" data-v-b57cc07c>3.5 Promise.reject 方法: (reason) => {}</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-6-promise-all-方法-promises" class="sidebar-link reco-side-_3-6-promise-all-方法-promises" data-v-b57cc07c>3.6 Promise.all 方法: (promises) => {}</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_3-7-promise-race-方法-promises" class="sidebar-link reco-side-_3-7-promise-race-方法-promises" data-v-b57cc07c>3.7 Promise.race 方法: (promises) => {}</a></li><li class="level-2" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-promise的几个关键问题" class="sidebar-link reco-side-_4-promise的几个关键问题" data-v-b57cc07c>4 Promise的几个关键问题</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-1-如何改变-promise-的状态" class="sidebar-link reco-side-_4-1-如何改变-promise-的状态" data-v-b57cc07c>4.1 如何改变 promise 的状态?</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-2-一个-promise-指定多个成功-失败回调函数-都会调用吗" class="sidebar-link reco-side-_4-2-一个-promise-指定多个成功-失败回调函数-都会调用吗" data-v-b57cc07c>4.2 一个 promise 指定多个成功/失败回调函数, 都会调用吗?</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-3-改变-promise-状态和指定回调函数谁先谁后" class="sidebar-link reco-side-_4-3-改变-promise-状态和指定回调函数谁先谁后" data-v-b57cc07c>4.3 改变 promise 状态和指定回调函数谁先谁后?</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-4-promise-then-返回的新-promise-的结果状态由什么决定" class="sidebar-link reco-side-_4-4-promise-then-返回的新-promise-的结果状态由什么决定" data-v-b57cc07c>4.4 promise.then()返回的新 promise 的结果状态由什么决定?</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-5-promise-如何串连多个操作任务" class="sidebar-link reco-side-_4-5-promise-如何串连多个操作任务" data-v-b57cc07c>4.5 promise 如何串连多个操作任务?</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-6-promise-异常传透" class="sidebar-link reco-side-_4-6-promise-异常传透" data-v-b57cc07c>4.6 promise 异常传透?</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_4-7-中断-promise-链" class="sidebar-link reco-side-_4-7-中断-promise-链" data-v-b57cc07c>4.7 中断 promise 链?</a></li><li class="level-2" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_5-promise-async-await" class="sidebar-link reco-side-_5-promise-async-await" data-v-b57cc07c>5 Promise + async + await</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_5-1-async函数" class="sidebar-link reco-side-_5-1-async函数" data-v-b57cc07c>5.1 async函数</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_5-2-await表达式" class="sidebar-link reco-side-_5-2-await表达式" data-v-b57cc07c>5.2 await表达式</a></li><li class="level-3" data-v-b57cc07c><a href="/blogs/frontend/promise.html#_5-3-注意" class="sidebar-link reco-side-_5-3-注意" data-v-b57cc07c>5.3 注意</a></li></ul></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
|
||
<script src="/assets/js/app.049e1b5b.js" defer></script><script src="/assets/js/3.ff0e945d.js" defer></script><script src="/assets/js/1.1ced4111.js" defer></script><script src="/assets/js/12.588a1dd8.js" defer></script>
|
||
</body>
|
||
</html>
|