master

分支 (1)

管理

管理

master

axios_doc
/
index2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>News | axios</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="http://axios-js.com/zh-cn/blogs/index.html">
  <!-- Alternative links -->

  <!-- Icon -->
  <link rel="apple-touch-icon" sizes="57x57" href="http://www.axios-js.com/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="http://www.axios-js.com/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="http://www.axios-js.com/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="http://www.axios-js.com/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="http://www.axios-js.com/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="http://www.axios-js.com/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="http://www.axios-js.com/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="http://www.axios-js.com/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
  <meta name="generator" content="Hexo 4.1.0">
  <!-- CSS -->
  <!-- build:css build/css/navy.css -->

<link rel="stylesheet" href="static/css/navy.css">

  <!-- endbuild -->
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/font-awesome.min.css">
  <link rel="stylesheet" href="static/css/docsearch.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  <!-- RSS -->
  <link rel="alternate" href="http://www.axios-js.com/atom.xml" title="axios">
  <!-- Open Graph -->
  <meta property="og:type" content="website">
<meta property="og:title" content="News">
<meta property="og:url" content="http://axios-js.com/zh-cn/blogs/index.html">
<meta property="og:site_name" content="axios">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Hexo">
<meta name="twitter:card" content="summary">
  <!-- Analytics -->

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:1120304,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

<a title="Real Time Web Analytics" href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/badge.gif" border="0"></a>
<script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101192693);</script>
<script async="" src="static/js/js.js"></script>


</head>

<body>
  <div id="container">
    <header id="header" class="wrapper">
  <div id="header-inner" class="inner">
    <h1 id="logo-wrap">
      <a href="index.html" id="logo">axios</a>
    </h1>
    <nav id="main-nav">
      <a href="index1.html" class="main-nav-link">文档</a><a href="" class="main-nav-link">博客</a>
      <a href="javascript:;" target="_blank" rel="noopener" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
      <div id="search-input-wrap">
        <div id="search-input-icon">
          <i class="fa fa-search"></i>
        </div>
        <input type="search" id="search-input" placeholder="Search...">
      </div>
    </nav>
    <div id="lang-select-wrap">
      <label id="lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></label>
      <select id="lang-select" data-canonical="">

          <option value="en">undefined</option>

          <option value="zh-cn" selected="">简体中文</option>

      </select>
    </div>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
  </div>
</header>


<div id="content-wrap">
  <div class="wrapper">
    <div class="inner">


          <article class="article post" itemscope="" itemtype="http://schema.org/Article">
  <header class="article-header">

      <h1>
        <a href="axios-ajax-fetch-compare.html" class="article-title" itemprop="name">axios, ajax和fetch的比较</a>
      </h1>

    <a href="axios-ajax-fetch-compare.html" class="article-date"><time datetime="2019-03-16T00:00:00.000Z">2019-03-16</time></a>
  </header>
  <div class="article-content" itemprop="articleBody">
    <h1 id="Ajax" class="article-heading"><a href="#Ajax" class="headerlink" title="Ajax"></a>Ajax<a class="article-anchor" href="#Ajax" aria-hidden="true"></a></h1><p>前端程序员常说的Ajax是 <code>Asynchronous JavaScript and XML</code>的缩写，意思是异步网络请求。区别于传统web开发中采用的同步方式。</p>
<p>Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。</p>
<p>传统web请求方式：<br><img src="https://res.cloudinary.com/dq9x329zv/image/upload/v1552706775/axios-js.com/15527067382726.jpg" alt=""></p>
<p>使用Ajax后请求：<br><img src="https://res.cloudinary.com/dq9x329zv/image/upload/v1552708201/axios-js.com/Snip20190316_17.png" alt=""></p>
<h2 id="实现一个Ajax请求" class="article-heading"><a href="#实现一个Ajax请求" class="headerlink" title="实现一个Ajax请求"></a>实现一个Ajax请求<a class="article-anchor" href="#实现一个Ajax请求" aria-hidden="true"></a></h2><p>在现代浏览器上实现一个Ajax请求是非常容易的，</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> request = <span class="keyword">new</span> XMLHttpRequest(); <span class="comment">// 创建XMLHttpRequest对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//ajax是异步的，设置回调函数</span></span><br><span class="line">request.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="comment">// 状态发生变化时，函数被回调</span></span><br><span class="line">    <span class="keyword">if</span> (request.readyState === <span class="number">4</span>) &#123; <span class="comment">// 成功完成</span></span><br><span class="line">        <span class="comment">// 判断响应状态码</span></span><br><span class="line">        <span class="keyword">if</span> (request.status === <span class="number">200</span>) &#123;</span><br><span class="line">            <span class="comment">// 成功，通过responseText拿到响应的文本:</span></span><br><span class="line">            <span class="keyword">return</span> success(request.responseText);</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">            <span class="keyword">return</span> fail(request.status);</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="comment">// HTTP请求还在继续...</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 发送请求:</span></span><br><span class="line">request.open(<span class="string">'GET'</span>, <span class="string">'/api/categories'</span>);</span><br><span class="line">request.setRequestHeader(<span class="string">"Content-Type"</span>, <span class="string">"application/json"</span>) <span class="comment">//设置请求头</span></span><br><span class="line">request.send();<span class="comment">//到这一步，请求才正式发出</span></span><br></pre></td></tr></table></figure>
<p>使用原生的js还是比较繁琐，实际工程中建议使用jQuery之类的库，封装的ajax请求方法非常好用，且解决了浏览器兼容性的问题。</p>
<h1 id="axios" class="article-heading"><a href="#axios" class="headerlink" title="axios"></a>axios<a class="article-anchor" href="#axios" aria-hidden="true"></a></h1><p>首先需要知道：axios不是一种新的技术。</p>
<p>axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：</p>
<ul>
<li>从浏览器中创建 XMLHttpRequests</li>
<li>从 node.js 创建 http 请求</li>
<li>支持 Promise API</li>
<li>拦截请求和响应</li>
<li>转换请求数据和响应数据</li>
<li>取消请求</li>
<li>自动转换 JSON 数据</li>
<li>客户端支持防御 XSRF</li>
</ul>
<h2 id="浏览器支持" class="article-heading"><a href="#浏览器支持" class="headerlink" title="浏览器支持"></a>浏览器支持<a class="article-anchor" href="#浏览器支持" aria-hidden="true"></a></h2><p><img src="https://res.cloudinary.com/dq9x329zv/image/upload/v1552717535/axios-js.com/Snip20190316_18.png" alt=""></p>
<p>axios面向现代浏览器设计，所以古老的浏览器并不支持。</p>
<p>因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。</p>
<h1 id="fetch" class="article-heading"><a href="#fetch" class="headerlink" title="fetch"></a>fetch<a class="article-anchor" href="#fetch" aria-hidden="true"></a></h1><p>fetch是前端发展的一种新技术产物。</p>
<p>以下内容摘自mozilla：<br>Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。</p>
<p>这种功能以前是使用  XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。</p>
<p>在使用fetch的时候需要注意：</p>
<ul>
<li>当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。</li>
<li>默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。</li>
</ul>
<p>一个使用fetch获取数据的例子</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">fetch(<span class="string">'http://example.com/movies.json'</span>)</span><br><span class="line">  .then(<span class="function"><span class="keyword">function</span>(<span class="params">response</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> response.json();</span><br><span class="line">  &#125;)</span><br><span class="line">  .then(<span class="function"><span class="keyword">function</span>(<span class="params">myJson</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(myJson);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<p>fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。</p>

  </div>

</article>


    </div>
  </div>
</div>
    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2021 axios中文网<br>
      Documentation licensed under <a href="javascript:;" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="javascript:;" class="footer-link" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="javascript:;" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>

  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <ul id="mobile-nav-list">
      <a href="index1.html" class="mobile-nav-link">文档</a><a href="" class="mobile-nav-link">博客</a>
      <li class="mobile-nav-item">
        <a href="javascript:;" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
      </li>
    </ul>

  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></span>
    <select id="mobile-lang-select" data-canonical="">

        <option value="en">undefined</option>

        <option value="zh-cn" selected="">简体中文</option>

    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->

<script src="static/js/lang_select.js"></script>


<script src="static/js/toc.js"></script>


<script src="static/js/mobile_nav.js"></script>

<!-- endbuild -->

<!-- Algolia -->


<div class="popup-container">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css">
<style>
    #magic-popup {
        color: #000;

    }
    .vultr-coupon {
        margin-top: 20px
    }
    .popup-container {
        visibility: hidden;
        position: relative
    }

    .coupon {
        font-size: 16px;
    }
    .desc {
        margin-top: 10px;
        color: #03a9f4;
        font-size: 16px;
    }
    .reason {
        position: absolute;
        bottom: 0;
        right: 10px;
        width: 100%;
        font-size: 12px;
        color: red
    }

    .red-packet {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #magic-popup{
        height: 200px
    }

    .campaign-tip {
        font-size: 14px;
        letter-spacing: 0
    }
</style>
<div class="popup-container">
<div id="magic-popup" class="magic-popup">
    <div class="pure-g">
            <a href="javascript:;" class="red-packet">
            <img width="150" src="https://res.cloudinary.com/dq9x329zv/image/upload/v1600435375/redpacket_n6cqu1.jpg">

            <span class="campaign-tip">拼多多新人专享红包！最高188元，限时领取！还有新人0元购，更多福利等你来拿~>></span>
            </a>
    </div>

    <!-- >
    <div class="pure-g">
            <div class="pure-u-12-24">
              <a class="pure-button pure-button-primary coupon" href="http://bit.ly/2PpdaHG" target="_blank" rel="noopener" class="btn btn-default btn-md" role="button">virmach特价vps</a>
            </div>

            <div class="pure-u-12-24">
              <a class="pure-button pure-button-primary coupon" href="http://bit.ly/2NDPn4N" target="_blank" rel="noopener" class="btn btn-default btn-md" role="button">vultr新户送$100</a>
            </div>

    </div>
    <div class="desc">
    vps可用来搭建博客，学习Linux，搭建个人网盘，私人git，
    可以搭建ssr一键使用google,搜索资料更方便。以上支持支付宝付款。
    </div>

    <div class="reason">
        广告费用用于支持本站服务器费用，希望大家理解
    </div>

    <-->


</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
<script src="static/js/js.cookie.min.js"></script>

<script type="text/javascript">
var result = Cookies.get('popuped');
if(result){

} else {
Cookies.set('popuped', '1', { expires: 7 })
// Swal.fire({
//   title: '<strong></strong>',
//   icon: 'info',
//   html: $('#magic-popup'),
//   focusConfirm: false,
//   confirmButtonText: '知道了'
// })
}


</script>


</body>
</html>