master

分支 (1)

管理

管理

master

axios_doc
/
vue-axios-plugin.html

<!DOCTYPE html>
<html lang="zh-cn">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>vue-axios-plugin|axios中文网 | 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/docs/vue-axios-plugin.html">
  <!-- Alternative links -->


      <link rel="alternative" hreflang="en" href="http://axios-js.com/docs/vue-axios-plugin.html">

      <link rel="alternative" hreflang="zh-cn" href="http://axios-js.com/zh-cn/docs/vue-axios-plugin.html">


  <!-- 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 name="description" content="vue-axios-plugin中文文档">
<meta property="og:type" content="website">
<meta property="og:title" content="vue-axios-plugin|axios中文网">
<meta property="og:url" content="http://axios-js.com/zh-cn/docs/vue-axios-plugin.html">
<meta property="og:site_name" content="axios">
<meta property="og:description" content="vue-axios-plugin中文文档">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://travis-ci.org/yugasun/vue-axios-plugin.svg?branch=master">
<meta property="og:image" content="https://img.shields.io/npm/dm/vue-axios-plugin.svg">
<meta property="og:image" content="https://img.shields.io/npm/v/vue-axios-plugin.svg">
<meta property="og:image" content="https://img.shields.io/badge/code%20style-standard-brightgreen.svg">
<meta property="og:image" content="https://res.cloudinary.com/dq9x329zv/image/upload/v1589976968/853a7860-8d0d-4c00-9d55-75ae4bb8e3f4_euxax7.jpg">
<meta property="og:image" content="http://axios-js.com/icon/les01.jpeg">
<meta property="og:image" content="http://axios-js.com/icon/les02.jpeg">
<meta property="og:image" content="http://axios-js.com/icon/les03.jpeg">
<meta property="og:image" content="http://axios-js.com/icon/les04.jpeg">
<meta property="article:published_time" content="2021-05-30T01:00:16.000Z">
<meta property="article:modified_time" content="2021-05-30T01:00:16.000Z">
<meta property="article:author" content="Hexo">
<meta property="article:tag" content="axios 中文">
<meta property="article:tag" content=" axios 中文文档">
<meta property="article:tag" content=" vue-axios-plugin中文">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://travis-ci.org/yugasun/vue-axios-plugin.svg?branch=master">
  <!-- 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="index2.html" 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="docs/vue-axios-plugin.html">

          <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 id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope="" itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">vue-axios-plugin|axios中文网</h1>
                <a href="javascript:;" target="_blank" rel="noopener" class="article-edit-link" title="改进本文"></a>
              </header>
              <div class="article-content" itemprop="articleBody">
                <p class="vultr-desc">
                  本站由axios爱好者共建，部署在vultr vps上，推荐使用vultr!价格实惠，实力雄厚。
                  最近新注册用户充值$25,可额外获赠$50,搭建博客必备。
                  <a href="javascript:;" target="_blank" rel="noopener">前往注册</a>
                </p>

                <div id="lagou-vip">
                  <a href="javascript:;" target="_blank" rel="noopener">京东双11，现在不买等一年！犒劳自己--></a>
                </div>
                <h2 id="vue-axios-plugin" class="article-heading"><a href="#vue-axios-plugin" class="headerlink" title="vue-axios-plugin"></a>vue-axios-plugin<a class="article-anchor" href="#vue-axios-plugin" aria-hidden="true"></a></h2><p><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/react-axios1.svg" alt="Build Status"></a><br><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/vue-axios-plugin.svg" alt="Downloads"></a><br><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/vue-axios-plugin1.svg" alt="Version"></a><br><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/codestyle-standard-brightgreen.svg" alt="js-standard-style"></a></p>
<p>简体中文 | <a href="javascript:;">English</a></p>
<p>Vuejs 项目的 axios 插件</p>
<h2 id="如何使用" class="article-heading"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用<a class="article-anchor" href="#如何使用" aria-hidden="true"></a></h2><h3 id="通过-Script-标签" class="article-heading"><a href="#通过-Script-标签" class="headerlink" title="通过 Script 标签"></a>通过 Script 标签<a class="article-anchor" href="#通过-Script-标签" aria-hidden="true"></a></h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在 vue.js 之后引入 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/vue"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/vue-axios-plugin"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="npm-模块引入" class="article-heading"><a href="#npm-模块引入" class="headerlink" title="npm 模块引入"></a>npm 模块引入<a class="article-anchor" href="#npm-模块引入" aria-hidden="true"></a></h3><p>首先通过 npm 安装</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install --save vue-axios-plugin</span><br></pre></td></tr></table></figure>
<p>然后在入口文件配置如下:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'Vue'</span></span><br><span class="line"><span class="keyword">import</span> VueAxiosPlugin <span class="keyword">from</span> <span class="string">'vue-axios-plugin'</span></span><br><span class="line"></span><br><span class="line">Vue.use(VueAxiosPlugin, &#123;</span><br><span class="line">  <span class="comment">// 请求拦截处理</span></span><br><span class="line">  reqHandleFunc: <span class="function"><span class="params">config</span> =&gt;</span> config,</span><br><span class="line">  reqErrorFunc: <span class="function"><span class="params">error</span> =&gt;</span> <span class="built_in">Promise</span>.reject(error),</span><br><span class="line">  <span class="comment">// 响应拦截处理</span></span><br><span class="line">  resHandleFunc: <span class="function"><span class="params">response</span> =&gt;</span> response,</span><br><span class="line">  resErrorFunc: <span class="function"><span class="params">error</span> =&gt;</span> <span class="built_in">Promise</span>.reject(error)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="配置参数" class="article-heading"><a href="#配置参数" class="headerlink" title="配置参数"></a>配置参数<a class="article-anchor" href="#配置参数" aria-hidden="true"></a></h2><p>除了 <code>axios</code> 提供的默认 <a href="javascript:;" target="_blank" rel="noopener">请求配置</a>, <code>vue-axios-plugin</code> 也提供了 <code>request/response</code> 拦截器配置，如下:</p>
<table>
<thead>
<tr>
<th style="text-align:center">参数名</th>
<th style="text-align:center">类型</th>
<th style="text-align:center">默认值</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><strong><a href="#"><code>reqHandleFunc</code></a></strong></td>
<td style="text-align:center"><code>{Function}</code></td>
<td style="text-align:center"><code>config =&gt; config</code></td>
<td style="text-align:left">请求发起前的拦截处理函数</td>
</tr>
<tr>
<td style="text-align:center"><strong><a href="#"><code>reqErrorFunc</code></a></strong></td>
<td style="text-align:center"><code>{Function}</code></td>
<td style="text-align:center"><code>error =&gt; Promise.reject(error)</code></td>
<td style="text-align:left">处理请求错误的函数</td>
</tr>
<tr>
<td style="text-align:center"><strong><a href="#"><code>resHandleFunc</code></a></strong></td>
<td style="text-align:center"><code>{Function}</code></td>
<td style="text-align:center"><code>response =&gt; response</code></td>
<td style="text-align:left">响应数据处理函数</td>
</tr>
<tr>
<td style="text-align:center"><strong><a href="#"><code>resErrorFunc</code></a></strong></td>
<td style="text-align:center"><code>{Function}</code></td>
<td style="text-align:center"><code>error =&gt; Promise.reject(error)</code></td>
<td style="text-align:left">响应错误处理函数</td>
</tr>
</tbody>
</table>
<h2 id="示例" class="article-heading"><a href="#示例" class="headerlink" title="示例"></a>示例<a class="article-anchor" href="#示例" aria-hidden="true"></a></h2><p>在 Vue 组件上添加了 <code>$http</code> 属性, 它默认提供 <code>get</code> 和 <code>post</code> 方法，使用如下:</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">this</span>.$http.get(url, data, options).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">this</span>.$http.post(url, data, options).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>你也可以通过 <code>this.$axios</code> 来使用 <code>axios</code> 所有的 api 方法，如下：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">this</span>.$axios.get(url, data, options).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.$axios.post(url, data, options).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" target="_blank" rel="noopener"><br>  <img width="300" src="https://res.cloudinary.com/dq9x329zv/image/upload/v1589976968/853a7860-8d0d-4c00-9d55-75ae4bb8e3f4_euxax7.jpg"><br></a></p>
<h2 id="TODO" class="article-heading"><a href="#TODO" class="headerlink" title="TODO"></a>TODO<a class="article-anchor" href="#TODO" aria-hidden="true"></a></h2><ul>
<li>[ ] Unit test.</li>
</ul>
<h2 id="注意" class="article-heading"><a href="#注意" class="headerlink" title="注意!!!"></a>注意!!!<a class="article-anchor" href="#注意" aria-hidden="true"></a></h2><p>当你 header 设置为 <code>application/x-www-form-urlencoded</code> 时, 你需要使用 <a href="javascript:;" target="_blank" rel="noopener">qs</a> 来转换 post 数据, 如下:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> qs <span class="keyword">from</span> <span class="string">'qs'</span></span><br><span class="line"><span class="keyword">this</span>.$http.post(url, qs.stringify(data), &#123;</span><br><span class="line">  headers: &#123;</span><br><span class="line">    <span class="string">'Content-Type'</span>: <span class="string">'application/x-www-form-urlencoded'</span>,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>但是如果 post 数据对象属性值含有 <code>object/array</code>，你就需要将这些属性值转化为 <code>JSON</code> 字符串，不然后端接受的的数据将无法解析，方法如下：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> qs <span class="keyword">from</span> <span class="string">'qs'</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">jsonProp</span> (<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// type check</span></span><br><span class="line">  <span class="keyword">if</span> (!obj || (<span class="keyword">typeof</span> obj !== <span class="string">'object'</span>)) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">Object</span>.keys(obj).forEach(<span class="function">(<span class="params">key</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> ((<span class="keyword">typeof</span> obj[key]) === <span class="string">'object'</span>) &#123;</span><br><span class="line">      obj[key] = <span class="built_in">JSON</span>.stringify(obj[key])</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> obj</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.$http.post(url, qs.stringify(data), &#123;</span><br><span class="line">  headers: &#123;</span><br><span class="line">    <span class="string">'Content-Type'</span>: <span class="string">'application/x-www-form-urlencoded'</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  transformRequest: [</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">      <span class="comment">// if data has object type properties, need JSON.stringify them.</span></span><br><span class="line">      <span class="keyword">return</span> qs.stringify(jsonProp(data))</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(response)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>更多使用方式, 参考 <a href="javascript:;" target="_blank" rel="noopener">axios</a></p>
<h2 id="License" class="article-heading"><a href="#License" class="headerlink" title="License"></a>License<a class="article-anchor" href="#License" aria-hidden="true"></a></h2><p>MIT</p>
<div class="recommand">以下课程十分推荐想往前端架构师方向精进的同学，月入5万的梦想总要有的！投资自己就是最好的投资！</div><div class="lessonlist"><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les01.jpeg" class="lesspic"></a></div><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les02.jpeg" class="lesspic"></a></div><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les03.jpeg" class="lesspic"></a></div><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les04.jpeg" class="lesspic"></a></div></div>
              </div>
              <footer class="article-footer">
                <time class="article-footer-updated" datetime="2021-05-30T01:00:16.000Z" itemprop="dateModified">上次更新：2021-05-30</time>
                <a href="axios-retry.html" class="article-footer-prev" title="axios-retry"><i class="fa fa-chevron-left"></i><span>上一页</span></a>
              </footer>

            </div>
          </div>
          <aside id="article-toc" role="navigation">
            <div id="article-toc-inner">
              <strong class="sidebar-title">目录</strong>
              <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-axios-plugin"><span class="toc-text">vue-axios-plugin</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何使用"><span class="toc-text">如何使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#通过-Script-标签"><span class="toc-text">通过 Script 标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-模块引入"><span class="toc-text">npm 模块引入</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#配置参数"><span class="toc-text">配置参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#示例"><span class="toc-text">示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TODO"><span class="toc-text">TODO</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#注意"><span class="toc-text">注意!!!</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#License"><span class="toc-text">License</span></a></li></ol>
              <a href="#" id="article-toc-top">回到顶部</a>
            </div>
          </aside>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner">
    <strong class="sidebar-title">开始使用</strong><a href="index1.html" class="sidebar-link">概述</a><strong class="sidebar-title">框架整合</strong><a href="vue-axios.html" class="sidebar-link">vue-axios</a><a href="nuxtjs-axios.html" class="sidebar-link">nuxtjs-axios</a><a href="react-axios.html" class="sidebar-link">react-axios</a><strong class="sidebar-title">Plugins</strong><a href="axios-retry.html" class="sidebar-link">axios-retry</a><a href="" class="sidebar-link current">vue-axios-plugin</a>
  </div>
</aside>
    </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="index2.html" 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>

      <strong class="mobile-nav-title">开始使用</strong><a href="index1.html" class="mobile-nav-link">概述</a><strong class="mobile-nav-title">框架整合</strong><a href="vue-axios.html" class="mobile-nav-link">vue-axios</a><a href="nuxtjs-axios.html" class="mobile-nav-link">nuxtjs-axios</a><a href="react-axios.html" class="mobile-nav-link">react-axios</a><strong class="mobile-nav-title">Plugins</strong><a href="axios-retry.html" class="mobile-nav-link">axios-retry</a><a href="" class="mobile-nav-link current">vue-axios-plugin</a>

  </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="docs/vue-axios-plugin.html">

        <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>