search.xml

<?xml version="1.0" encoding="utf-8"?>
<search>
  <entry>
    <title>唤端</title>
    <url>/2020/06/22/app-to-app/</url>
    <content><![CDATA[<h1 id="唤端"><a href="#唤端" class="headerlink" title="唤端"></a>唤端</h1><p>app之间的跳转简称唤端。</p>
<h1 id="方案"><a href="#方案" class="headerlink" title="方案"></a>方案</h1><h2 id="URL-Scheme"><a href="#URL-Scheme" class="headerlink" title="URL Scheme"></a>URL Scheme</h2><p>scheme 标示资源访问的方式。常见的scheme有http/https/ftp等。而在IOS/Andriod中，scheme相当于用哪个app打开URL。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;a href=<span class="string">"tel://18511111111"</span> /&gt; <span class="comment">// IOS中唤起拨号程序</span></span><br></pre></td></tr></table></figure>

<h4 id="Scheme-注册"><a href="#Scheme-注册" class="headerlink" title="Scheme 注册"></a>Scheme 注册</h4><p>需要在app里事先向系统注册自己的Scheme，才能让app通过Scheme方式唤起。</p>
<p><strong>系统只负责根据Scheme唤起对应的app，至于打开app之后的行为，需要app解析URL参数作出相应处理</strong></p>
<h4 id="适用性"><a href="#适用性" class="headerlink" title="适用性"></a>适用性</h4><p>不适应Android的Chrome及基于Chrome内核浏览器直接访问</p>
<h4 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h4><p>兼容性好</p>
<h4 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h4><ul>
<li>无法准确判断是否唤起成功。</li>
<li>如果用户没有安装对应的app，那么尝试跳转后在浏览器中会没有任何反应。甚至在一些webview里还会跳到一个类似 <strong>无法打开xxxx</strong> 这样的错误页面或者错误弹窗。</li>
<li>在很多浏览器和webview中会有一个弹窗提示是否打开对应app，会导致用户流失。</li>
<li>有URL Scheme劫持风险。比如某不知名app也向系统注册了 <code>xxx://</code> 这个scheme，唤起流量可能就会被劫持到这个app里。</li>
<li>很容易被屏蔽，app很容易拦截掉通过URL Scheme发起的跳转。</li>
</ul>
<h2 id="Intent"><a href="#Intent" class="headerlink" title="Intent"></a>Intent</h2><p>谷歌定制版的URL Scheme。本质与URL Scheme区别不大，<a href="https://developer.chrome.com/multidevice/android/intents?spm=ata.13261165.0.0.d54f54a3toRfWr" target="_blank" rel="noopener">构造链接</a>方式不同。</p>
<h4 id="适用性-1"><a href="#适用性-1" class="headerlink" title="适用性"></a>适用性</h4><p>仅Android的Chrome及基于Chrome内核浏览器。</p>
<h2 id="Universal-Link"><a href="#Universal-Link" class="headerlink" title="Universal Link"></a>Universal Link</h2><p>IOS 9 中引入的功能，可以直接通过https协议的链接来打开app，如果没有安装则打开对应h5页面。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;a href=<span class="string">"https://xxxx"</span> /&gt;</span><br></pre></td></tr></table></figure>

<h4 id="注册"><a href="#注册" class="headerlink" title="注册"></a><a href="https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html?spm=ata.13261165.0.0.6a9072d111Nj92" target="_blank" rel="noopener">注册</a></h4><ul>
<li>app 中注册自己要支持的域名</li>
<li>在自己域名的根目录下配置一个 apple-app-site-associatio 文件。</li>
</ul>
<h4 id="适用性-2"><a href="#适用性-2" class="headerlink" title="适用性"></a>适用性</h4><p>只在IOS 9 以上</p>
<h4 id="优点-1"><a href="#优点-1" class="headerlink" title="优点"></a>优点</h4><ul>
<li>唤端时没有弹窗提示，可减少一部分用户流失</li>
<li>对于没有安装应用的用户，点击链接就会直接打开对应的页面，可引导到中转页，一定程度解决URL Scheme无法判断唤端失败问题。</li>
</ul>
<h4 id="缺点-1"><a href="#缺点-1" class="headerlink" title="缺点"></a>缺点</h4><ul>
<li>只能在IOS 上用</li>
<li>只能由用户主动触发。比如浏览器扫码打开页面，没有办法由页面直接唤起app，需要用户手动点击页面按钮才能唤起。</li>
</ul>
<h2 id="App-Links"><a href="#App-Links" class="headerlink" title="App Links"></a><a href="https://developer.android.com/training/app-links#add-app-links" target="_blank" rel="noopener">App Links</a></h2><p>安卓版的Universal Link。</p>
<h2 id="H5唤端兼容"><a href="#H5唤端兼容" class="headerlink" title="H5唤端兼容"></a>H5唤端兼容</h2><h4 id="iframe"><a href="#iframe" class="headerlink" title="iframe"></a>iframe</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> iframe = <span class="built_in">document</span>.createElement(<span class="string">'iframe'</span>);</span><br><span class="line">iframe.frameborder = <span class="string">'0'</span>;</span><br><span class="line">iframe.style.cssText = <span class="string">'display: none;border: none;width: 0;height: 0'</span>;</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(iframe);</span><br><span class="line">iframe.src = <span class="string">'zhihu://xxx'</span></span><br></pre></td></tr></table></figure>
<p>即使没有安装app，当前页面也不会跳转到错误的页面</p>
<h4 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h4><p>IOS 9 以上safari中，不支持iframe唤起，可以用a标签，并模拟点击事件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>);</span><br><span class="line">a.setAttribute(<span class="string">'href'</span>, url);</span><br><span class="line">a.style.display = <span class="string">'none'</span>;</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(a);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.createEvent(<span class="string">'HEMLEvents'</span>);</span><br><span class="line">e.initEvent(<span class="string">'click'</span>, <span class="literal">false</span>, <span class="literal">false</span>);</span><br><span class="line">a.dispatchEvent(e);</span><br></pre></td></tr></table></figure>

<h4 id="window-location"><a href="#window-location" class="headerlink" title="window.location"></a>window.location</h4><p>对于Intent和Universal Link，App Links可以直接设置window.location.href方式跳转，即使没有安装app也不会跳转到错误页面。</p>
<h4 id="微信环境下"><a href="#微信环境下" class="headerlink" title="微信环境下"></a>微信环境下</h4><ul>
<li>微信版本大于6.5.16，腾讯系50个应用白名单。通过sdk隐藏API wx.launchApplication唤起。</li>
<li>ios 7.0.5+ 放开Universal Link</li>
<li>微信版本大于7.0.12。支持<a href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html" target="_blank" rel="noopener">wx-open-launch-app</a>唤起</li>
</ul>
<h4 id="判断是否唤起成功"><a href="#判断是否唤起成功" class="headerlink" title="判断是否唤起成功"></a>判断是否唤起成功</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">getVisibilityName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> hidden = <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">let</span> visibilityChange = <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.hidden !== <span class="string">'undefined'</span>) &#123;</span><br><span class="line">        hidden = <span class="string">'hidden'</span>;</span><br><span class="line">        visibilityChange = <span class="string">'visibilitychange'</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.msHidden !== <span class="string">'undefined'</span>) &#123;</span><br><span class="line">        hidden = <span class="string">'msHidden'</span>;</span><br><span class="line">        visibilityChange = <span class="string">'msvisibilitychange'</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.webkitHidden !== <span class="string">'undefined'</span>) &#123;</span><br><span class="line">        hidden = <span class="string">'webkitHidden'</span>;</span><br><span class="line">        visibilityChange = <span class="string">'webkitvisibilitychange'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123; hidden, visibilityChange &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkOpen</span>(<span class="params">cb, timeout</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; hidden, visibilityChange &#125; = getVisibilityName</span><br><span class="line">    <span class="keyword">const</span> timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (!hidden) &#123;</span><br><span class="line">            cb();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, timeout)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (visibilityChange) &#123;</span><br><span class="line">        <span class="built_in">document</span>.addEventListener(visibilityChange, () =&gt; &#123;</span><br><span class="line">            clearTimeout(timer)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">document</span>.addEventListener(<span class="string">'pagehide'</span>, () =&gt; &#123;</span><br><span class="line">            clearTimeout(timer)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> (isIos) &#123;</span><br><span class="line">    <span class="keyword">if</span> (isWeixin) &#123;</span><br><span class="line">       <span class="keyword">if</span> (weixinVersion &gt;= <span class="number">6.5</span><span class="number">.16</span> &amp;&amp; HOST_WHITE) &#123;</span><br><span class="line">            wx.launchApplication</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (weixinVersion &gt;= <span class="number">7.0</span><span class="number">.5</span> &amp;&amp; isIOSVersion &gt;= <span class="number">9</span>) &#123;</span><br><span class="line">            <span class="built_in">window</span>.top.location.href = Universal Link</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="built_in">window</span>.top.location.href = appstore <span class="comment">// eg: https://itunes.apple.com/cn/app/idxxxx</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// weixinVersion &gt;= 7.0.12既支持 wx-open-launch-app，也支持 Universal link</span></span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (isQQ || isWeibo) &#123;</span><br><span class="line">        <span class="built_in">window</span>.top.location.href = appstore</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (isIOSVersion &lt; <span class="number">9</span>) &#123;</span><br><span class="line">        iframe.src = URL Scheme</span><br><span class="line">    &#125;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (isWeixin) &#123;</span><br><span class="line">        <span class="keyword">if</span> (weixinVersion &gt;= <span class="number">7.0</span><span class="number">.12</span>) &#123;</span><br><span class="line">            wx-open-launch-app</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (hasYingyongbao) &#123;</span><br><span class="line">            <span class="built_in">window</span>.top.location.href = hasYingyongbao</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">// 引导浏览器打开</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (isChrome) &#123;</span><br><span class="line">        <span class="built_in">window</span>.top.location.href = Intent</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        iframe.src = URL Scheme</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h4><p><a href="https://juejin.im/post/5eeb785251882565a762e50f" target="_blank" rel="noopener">揭秘手淘召唤术</a></p>
]]></content>
      <tags>
        <tag>h5，mobile</tag>
      </tags>
  </entry>
  <entry>
    <title>fetch</title>
    <url>/2020/06/23/fetch/</url>
    <content><![CDATA[<h1 id="fetch"><a href="#fetch" class="headerlink" title="fetch"></a>fetch</h1><h3 id="兼容性"><a href="#兼容性" class="headerlink" title="兼容性"></a>兼容性</h3><p><img src="https://cdn.llscdn.com/misc/fetch-%20compatibility-ee9bbf3573fd355106ec29a0fca6778f.jpeg" alt="兼容性"></p>
<p>原生支持程度并不理想，引入相应polyfill后可以支持IE8+:</p>
<ul>
<li>IE8 是 ES3，需要引入 ES5 的 polyfill：<a href="https://github.com/es-shims/es5-shim" target="_blank" rel="noopener">es5-shim</a></li>
<li>引入 Promise 的 polyfill：<a href="https://github.com/stefanpenner/es6-promise" target="_blank" rel="noopener">es6-promise</a></li>
<li>fetch 的 polyfill: <a href="https://github.com/github/fetch" target="_blank" rel="noopener">whatwg-fetch</a>;同构<a href="https://github.com/matthew-andrews/isomorphic-fetch" target="_blank" rel="noopener">isomorphic-fetch</a></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">注意：transform-runtime 不能作为 <span class="built_in">Promise</span> 的 polyfill。fetch底层实现用到<span class="built_in">Promise</span>是从全局中取的。</span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">### fetch - timeout</span></span><br><span class="line"><span class="string">fetch自身无法对请求设置超时timeout，从而将请求abort。</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">方法一：</span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>js</span><br><span class="line"><span class="comment">// Rough implementation</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timeoutPromise</span>(<span class="params">ms, promise</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> timeoutId = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      reject(<span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'promise timeout'</span>))</span><br><span class="line">    &#125;, ms);</span><br><span class="line">    promise.then(</span><br><span class="line">      (res) =&gt; &#123;</span><br><span class="line">        clearTimeout(timeoutId);</span><br><span class="line">        resolve(res);</span><br><span class="line">      &#125;,</span><br><span class="line">      (err) =&gt; &#123;</span><br><span class="line">        clearTimeout(timeourId);</span><br><span class="line">        reject(err);</span><br><span class="line">      &#125;</span><br><span class="line">    )</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方法二：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timeoutPromise</span>(<span class="params">ms, promise</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> timeoutPromise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      reject(<span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'promise timeout'</span>))</span><br><span class="line">    &#125;, ms);</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.race([promise, timeoutPromise])</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方法三：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> controller = <span class="keyword">new</span> AbortController();</span><br><span class="line"><span class="keyword">const</span> promise = fetch(<span class="string">'/path'</span>, &#123;</span><br><span class="line">  method: <span class="string">'POST'</span>,</span><br><span class="line">  signal: controller.signal,</span><br><span class="line">  body: <span class="built_in">JSON</span>.stringify(&#123; <span class="attr">name</span>: <span class="string">'zy'</span> &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> timeoutId = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> controller.abort(), ms)</span><br><span class="line"></span><br><span class="line">promise</span><br><span class="line">  .then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;&#125;)</span><br><span class="line">  .catch(<span class="function"><span class="params">err</span> =&gt;</span> <span class="built_in">console</span>.log(<span class="string">'promise timeout'</span>))</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">注意：</span><br><span class="line">- 方法一/二中，fetch的timeout即使超时发生了，本次请求也不会被abort丢弃掉，它在后台仍然会发送到服务器端，只是请求的响应内容被丢弃了</span><br><span class="line">- 方法三，请求真实被中止</span><br></pre></td></tr></table></figure>

<h3 id="fetch-interceptors"><a href="#fetch-interceptors" class="headerlink" title="fetch - interceptors"></a>fetch - interceptors</h3><p>fetch自身不提供拦截器能力</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">fetch = <span class="function">(<span class="params">(originalFetch</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function">(<span class="params">...orgs</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> result = originalFetch.apply(<span class="keyword">this</span>, args);</span><br><span class="line">    <span class="keyword">return</span> result.then(<span class="function"><span class="params">()</span> =&gt;</span> &#123; <span class="built_in">console</span>.log(<span class="string">'Request was sent'</span>) &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)(fetch)</span><br></pre></td></tr></table></figure>

<h3 id="fetch-progress"><a href="#fetch-progress" class="headerlink" title="fetch - progress"></a>fetch - progress</h3><p>fetch自身是不支持有关progress事件的。</p>
<p>fetch内部实现了Request和Response类，通过实例可以访问类封装的方法和属性。比如response.body,这是一个可读字节流对象，其实现了一个getRender方法，用于读取响应的原始字节流，该字节流是可以循环读取的，直至body内容传输完成。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">fetch(<span class="string">'/xxx.jpg'</span>)</span><br><span class="line">  .then(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">if</span> (!response.ok) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="built_in">Error</span>(<span class="string">`<span class="subst">$&#123;response.status&#125;</span> <span class="subst">$&#123;response.statusText&#125;</span>`</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!response.body) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="built_in">Error</span>(<span class="string">'ReadableStream not yet supported in this browser'</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> contentLength = response.headers.get(<span class="string">'content-length'</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!contentLenght) &#123;</span><br><span class="line">      <span class="keyword">throw</span> <span class="built_in">Error</span>(<span class="string">'Content-Length response header unavailable'</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> total = <span class="built_in">parseInt</span>(contentLength, <span class="number">10</span>)</span><br><span class="line">    <span class="keyword">let</span> loaded = <span class="number">0</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> Response(</span><br><span class="line">      <span class="keyword">new</span> ReadableStream(&#123;</span><br><span class="line">        start(controller) &#123;</span><br><span class="line">          <span class="keyword">const</span> reader = response.body.getReader()</span><br><span class="line"></span><br><span class="line">          read()</span><br><span class="line">          <span class="function"><span class="keyword">function</span> <span class="title">read</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            reader.read()</span><br><span class="line">              .then(<span class="function">(<span class="params">&#123; done, value &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">if</span> (done) &#123;</span><br><span class="line">                  controller.close()</span><br><span class="line">                  <span class="keyword">return</span></span><br><span class="line">                &#125;</span><br><span class="line">                loaded += value.byteLength</span><br><span class="line">                progress(&#123; loaded, total &#125;)</span><br><span class="line">                controller.enquene(value)</span><br><span class="line">                read()</span><br><span class="line">              &#125;)</span><br><span class="line">              .catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">                controller.error(err)</span><br><span class="line">              &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">  &#125;)</span><br><span class="line">  .then(<span class="function"><span class="params">res</span> =&gt;</span> res.blob())</span><br><span class="line">  .then(<span class="function"><span class="params">data</span> =&gt;</span> <span class="built_in">console</span>.log(URL.createObjectURL(data)))</span><br><span class="line">  .catch(<span class="function"><span class="params">err</span> =&gt;</span> <span class="built_in">console</span>.log(err))</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">progress</span>(<span class="params">&#123; loaded, total &#125;</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;<span class="built_in">Math</span>.round(loaded <span class="regexp">/ total * 100)&#125;%`)</span></span></span></span><br><span class="line"><span class="string"><span class="subst"><span class="regexp">  &#125;</span></span></span></span><br></pre></td></tr></table></figure>
<h3 id="fetch-http"><a href="#fetch-http" class="headerlink" title="fetch - http"></a>fetch - http</h3><p>fetch 返回的promise在某些错误的http状态下，如400、500等不会reject。只有网络错误会导致请求不能完成，才会被reject。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkStatus</span>(<span class="params">response</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (response.status &gt;= <span class="number">200</span> &amp; response.status &lt; <span class="number">300</span>) &#123;</span><br><span class="line">      resolve(response)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> error = <span class="keyword">new</span> <span class="built_in">Error</span>(response.statusText)</span><br><span class="line">    error.response = response</span><br><span class="line">    reject(error)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseJSON</span>(<span class="params">response</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">    response.json().then(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (data.hasError === <span class="literal">true</span>) &#123;</span><br><span class="line">        resolve(&#123;&#125;)</span><br><span class="line">      &#125;</span><br><span class="line">      resolve(data)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">fetch(url)</span><br><span class="line">  .then(checkStatus)</span><br><span class="line">  .then(parseJSON)</span><br></pre></td></tr></table></figure>

<h3 id="fetch-cookie"><a href="#fetch-cookie" class="headerlink" title="fetch - cookie"></a>fetch - cookie</h3><p>fetch 默认不发送cookie，不管是同域还是跨域；通过配置credentials处理需要权限验证的请求：</p>
<ul>
<li>omit: 默认值，忽略cookie的发送</li>
<li>same-origin: 表示cookie只能同域发送，不能跨域发送</li>
<li>include: cookie既可以同域发送，也可以跨域发送</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">fetch默认对服务端通过 <span class="built_in">Set</span>-Cookie 头设置的cookie也会忽略，若想选择接受来自服务端的cookie信息，也需要配置credentials</span><br></pre></td></tr></table></figure>

<h3 id="fetch-跨域"><a href="#fetch-跨域" class="headerlink" title="fetch - 跨域"></a>fetch - 跨域</h3><p>fetch的mode配置项有3个值：</p>
<ul>
<li>same-origin:该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic</li>
<li>cors：该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors</li>
<li>no-cors：该模式用于跨域请求但是服务器不带CORS响应头，也就是服务器不支持CORS；这也是fetch的特殊跨域请求方式；其对应的response type为opaque</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">no-cors 模式不能访问响应的内容信息；但是可以被其他APIs进行处理，例如ServiceWorker。另外，该模式返回的response可以在Cache API中被存储起来以便后续的使用。这点可以应用于script、css和图片的CDN资源。</span><br></pre></td></tr></table></figure>

<h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><p><a href="https://blog.logrocket.com/axios-or-fetch-api/" target="_blank" rel="noopener">Axios or Fetch</a></p>
]]></content>
      <tags>
        <tag>js</tag>
      </tags>
  </entry>
</search>