<div id="article_details" class="details">
<div class="article_title">
<span class="ico ico_type_Repost"></span>
<h1>
<span class="link_title"><a href="/hsany330/article/details/71079745">
axios全攻略
</a>
</span>
</h1>
</div>
<div class="article_manage clearfix">
<div class="article_r">
<span class="link_postdate">2017-05-02 12:03</span>
<span class="link_view" title="阅读次数">1192人阅读</span>
<span class="link_comments" title="评论次数"> <a href="#comments" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
<span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" οnclick="javascript:collectArticle('axios%e5%85%a8%e6%94%bb%e7%95%a5','71079745');return false;" title="收藏" target="_blank">收藏</a></span>
<span class="link_report"> <a href="#report" οnclick="javascript:report(71079745,2);return false;" title="举报">举报</a></span>
</div>
</div> <style type="text/css">
.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}
</style>
<script type="text/javascript">
$(function () {
try
{
var lib = eval("("+$("#lib").attr("value")+")");
var html = "";
if (lib.err == 0) {
$.each(lib.data, function (i) {
var obj = lib.data[i];
//html += '<img src="' + obj.logo + '"/>' + obj.name + " ";
html += ' <a href="' + obj.url + '" target="_blank">';
html += ' <img src="' + obj.logo + '">';
html += ' <em><b>' + obj.name + '</b></em>';
html += ' </a>';
});
if (html != "") {
setTimeout(function () {
$("#lib").html(html);
$("#embody").show();
}, 100);
}
}
} catch (err)
{ }
});
</script>
<div style="clear:both"></div><div style="border:solid 1px #ccc; background:#eee; float:left; min-width:200px;padding:4px 10px;"><p style="text-align:right;margin:0;"><span style="float:left;">目录<a href="#" title="系统根据文章中H1到H6标签自动生成文章目录">(?)</a></span><a href="#" οnclick="javascript:return openct(this);" title="展开">[+]</a></p><ol style="display:none;margin-left:14px;padding-left:14px;line-height:160%;"><li><a href="#t0">
axios 简介</a></li><li><a href="#t1">
浏览器兼容性</a></li><li><a href="#t2">
引入方式</a></li><li><a href="#t3">
举个栗子</a></li><ol><li><a href="#t4">
执行 GET 请求</a></li><li><a href="#t5">
执行 POST 请求</a></li><li><a href="#t6">
执行多个并发请求</a></li></ol><li><a href="#t7">
axios API</a></li><ol><li><a href="#t8">
axiosconfig</a></li><li><a href="#t9">
axiosurl config</a></li><li><a href="#t10">
请求方法别名</a></li><li><a href="#t11">
并发</a></li><li><a href="#t12">
创建实例</a></li><li><a href="#t13">
实例方法</a></li></ol><li><a href="#t14">
请求配置</a></li><li><a href="#t15">
配置默认值</a></li><ol><li><a href="#t16">
全局axios默认值</a></li><li><a href="#t17">
自定义实例默认值</a></li><li><a href="#t18">
配置优先级顺序</a></li></ol><li><a href="#t19">
拦截器</a></li><li><a href="#t20">
处理错误</a></li><li><a href="#t21">
消除</a></li><li><a href="#t22">
使用application x-www-form-urlencoded格式</a></li><ol><li><a href="#t23">
浏览器</a></li><li><a href="#t24">
Nodejs</a></li></ol><li><a href="#t25">
Promise</a></li><li><a href="#t26">
TypeScript</a></li></ol></div><div style="clear:both"></div><div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！</p>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
如果您觉得本文对您有帮助，不妨点个赞或关注收藏一下，您的鼓励对我非常重要。</p>
<h2 id="axios-简介" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t0" target="_blank"></a>
axios 简介</h2>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：</p>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<ul style="margin:0px 0px 1em 40px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<li style="margin:0px; padding:0px; list-style-type:disc">从浏览器中创建 XMLHttpRequest</li><li style="margin:0px; padding:0px; list-style-type:disc">从 node.js 发出 http 请求</li><li style="margin:0px; padding:0px; list-style-type:disc">支持 Promise API</li><li style="margin:0px; padding:0px; list-style-type:disc">拦截请求和响应</li><li style="margin:0px; padding:0px; list-style-type:disc">转换请求和响应数据</li><li style="margin:0px; padding:0px; list-style-type:disc">取消请求</li><li style="margin:0px; padding:0px; list-style-type:disc">自动转换JSON数据</li><li style="margin:0px; padding:0px; list-style-type:disc">客户端支持防止 <a target="_blank" href="http://baike.baidu.com/link?url=iUceAfgyfJOacUtjPgT4ifaSOxDULAc_MzcLEOTySflAn5iLlHfMGsZMtthBm5sK4y6skrSvJ1HOO2qKtV1ej_" rel="external" style="margin:0px; padding:0px; color:rgb(0,0,0)">CSRF/XSRF</a></li></ul>
<h2 id="浏览器兼容性" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t1" target="_blank"></a>
浏览器兼容性</h2>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<a target="_blank" class="fancybox" href="http://p1.bpimg.com/567571/991b798df8c9a528.png" rel="group" style="margin:0px; padding:0px; color:rgb(0,0,0)"></a></p>
<h2 id="引入方式：" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t2" target="_blank"></a>
引入方式：</h2>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">$ npm install axios</div>
<div class="line" style="margin:0px; padding:0px">$ cnpm install axios <span class="comment" style="margin:0px; padding:0px">//taobao源</span></div>
<div class="line" style="margin:0px; padding:0px">$ bower install axios</div>
<div class="line" style="margin:0px; padding:0px">或者使用cdn：</div>
<div class="line" style="margin:0px; padding:0px"><script src=<span class="string" style="margin:0px; padding:0px">"https://unpkg.com/axios/dist/axios.min.js"></script></span></div>
</td>
</tr>
</tbody>
</table>
<h2 id="举个栗子：" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t3" target="_blank"></a>
举个栗子：</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<h3 id="执行-GET-请求" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t4" target="_blank"></a>
执行 GET 请求</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
<div class="line" style="margin:0px; padding:0px">13</div>
<div class="line" style="margin:0px; padding:0px">14</div>
<div class="line" style="margin:0px; padding:0px">15</div>
<div class="line" style="margin:0px; padding:0px">16</div>
<div class="line" style="margin:0px; padding:0px">17</div>
<div class="line" style="margin:0px; padding:0px">18</div>
<div class="line" style="margin:0px; padding:0px">19</div>
<div class="line" style="margin:0px; padding:0px">20</div>
<div class="line" style="margin:0px; padding:0px">21</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 向具有指定ID的用户发出请求</span></div>
<div class="line" style="margin:0px; padding:0px">axios.get(<span class="string" style="margin:0px; padding:0px">'/user?ID=12345')</span></div>
<div class="line" style="margin:0px; padding:0px">.then(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">response) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response);</span></div>
<div class="line" style="margin:0px; padding:0px">})</div>
<div class="line" style="margin:0px; padding:0px">.catch(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">error) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(error);</span></div>
<div class="line" style="margin:0px; padding:0px">});</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 也可以通过 params 对象传递参数</span></div>
<div class="line" style="margin:0px; padding:0px">axios.get(<span class="string" style="margin:0px; padding:0px">'/user', {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">params: {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">ID: <span class="number" style="margin:0px; padding:0px">12345</span></span></div>
<div class="line" style="margin:0px; padding:0px">}</div>
<div class="line" style="margin:0px; padding:0px">})</div>
<div class="line" style="margin:0px; padding:0px">.then(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">response) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response);</span></div>
<div class="line" style="margin:0px; padding:0px">})</div>
<div class="line" style="margin:0px; padding:0px">.catch(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">error) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(error);</span></div>
<div class="line" style="margin:0px; padding:0px">});</div>
</td>
</tr>
</tbody>
</table>
<h3 id="执行-POST-请求" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t5" target="_blank"></a>
执行 POST 请求</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">axios.post(<span class="string" style="margin:0px; padding:0px">'/user', {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">firstName: <span class="string" style="margin:0px; padding:0px">'Fred',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">lastName: <span class="string" style="margin:0px; padding:0px">'Flintstone'</span></span></div>
<div class="line" style="margin:0px; padding:0px">})</div>
<div class="line" style="margin:0px; padding:0px">.then(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">response) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response);</span></div>
<div class="line" style="margin:0px; padding:0px">})</div>
<div class="line" style="margin:0px; padding:0px">.catch(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">error) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(error);</span></div>
<div class="line" style="margin:0px; padding:0px">});</div>
</td>
</tr>
</tbody>
</table>
<h3 id="执行多个并发请求" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t6" target="_blank"></a>
执行多个并发请求</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function <span class="title" style="margin:0px; padding:0px">getUserAccount(<span class="params" style="margin:0px; padding:0px">)
{</span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">return axios.get(<span class="string" style="margin:0px; padding:0px">'/user/12345');</span></span></div>
<div class="line" style="margin:0px; padding:0px">}</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function <span class="title" style="margin:0px; padding:0px">getUserPermissions(<span class="params" style="margin:0px; padding:0px">)
{</span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">return axios.get(<span class="string" style="margin:0px; padding:0px">'/user/12345/permissions');</span></span></div>
<div class="line" style="margin:0px; padding:0px">}</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px">axios.all([getUserAccount(), getUserPermissions()])</div>
<div class="line" style="margin:0px; padding:0px">.then(axios.spread(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">acct, perms) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//两个请求现已完成</span></div>
<div class="line" style="margin:0px; padding:0px">}));</div>
</td>
</tr>
</tbody>
</table>
<h2 id="axios-API" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t7" target="_blank"></a>
axios API</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
可以通过将相关配置传递给 axios 来进行请求。</p>
<h3 id="axios-config" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t8" target="_blank"></a>
axios(config)</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 发送一个 POST 请求</span></div>
<div class="line" style="margin:0px; padding:0px">axios({</div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">method: <span class="string" style="margin:0px; padding:0px">'post',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">url: <span class="string" style="margin:0px; padding:0px">'/user/12345',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">data: {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">firstName: <span class="string" style="margin:0px; padding:0px">'Fred',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">lastName: <span class="string" style="margin:0px; padding:0px">'Flintstone'</span></span></div>
<div class="line" style="margin:0px; padding:0px">}</div>
<div class="line" style="margin:0px; padding:0px">});</div>
</td>
</tr>
</tbody>
</table>
<h3 id="axios-url-config" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t9" target="_blank"></a>
axios(url[, config])</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 发送一个 GET 请求 (GET请求是默认请求模式)</span></div>
<div class="line" style="margin:0px; padding:0px">axios(<span class="string" style="margin:0px; padding:0px">'/user/12345');</span></div>
</td>
</tr>
</tbody>
</table>
<h3 id="请求方法别名" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t10" target="_blank"></a>
请求方法别名</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
为了方便起见，已经为所有支持的请求方法提供了别名。</p>
<ul style="margin:0px 0px 1em 40px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<li style="margin:0px; padding:0px; list-style-type:disc">axios.request（config）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.get（url [，config]）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.delete（url [，config]）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.head（url [，config]）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.post（url [，data [，config]]）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.put（url [，data [，config]]）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.patch（url [，data [，config]]）</li></ul>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<span style="margin:0px; padding:0px">注意</span><br style="margin:0px; padding:0px">
当使用别名方法时，不需要在config中指定url，method和data属性。</p>
<h3 id="并发" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t11" target="_blank"></a>
并发</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
帮助函数处理并发请求。</p>
<ul style="margin:0px 0px 1em 40px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<li style="margin:0px; padding:0px; list-style-type:disc">axios.all（iterable）</li><li style="margin:0px; padding:0px; list-style-type:disc">axios.spread（callback）</li></ul>
<h3 id="创建实例" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t12" target="_blank"></a>
创建实例</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
您可以使用自定义配置创建axios的新实例。</p>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
axios.create（[config]）</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var instance = axios.create({</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">baseURL: <span class="string" style="margin:0px; padding:0px">'https://some-domain.com/api/',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">timeout: <span class="number" style="margin:0px; padding:0px">1000,</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">headers: {<span class="string" style="margin:0px; padding:0px">'X-Custom-Header': <span class="string" style="margin:0px; padding:0px">'foobar'}</span></span></span></div>
<div class="line" style="margin:0px; padding:0px">});</div>
</td>
</tr>
</tbody>
</table>
<h3 id="实例方法" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t13" target="_blank"></a>
实例方法</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
可用的实例方法如下所示。 指定的配置将与实例配置合并。</p>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
axios＃request（config）<br style="margin:0px; padding:0px">
axios＃get（url [，config]）<br style="margin:0px; padding:0px">
axios＃delete（url [，config]）<br style="margin:0px; padding:0px">
axios＃head（url [，config]）<br style="margin:0px; padding:0px">
axios＃post（url [，data [，config]]）<br style="margin:0px; padding:0px">
axios＃put（url [，data [，config]]）<br style="margin:0px; padding:0px">
axios＃patch（url [，data [，config]]）</p>
<h2 id="请求配置" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t14" target="_blank"></a>
请求配置</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法，请求将默认为GET。</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
<div class="line" style="margin:0px; padding:0px">13</div>
<div class="line" style="margin:0px; padding:0px">14</div>
<div class="line" style="margin:0px; padding:0px">15</div>
<div class="line" style="margin:0px; padding:0px">16</div>
<div class="line" style="margin:0px; padding:0px">17</div>
<div class="line" style="margin:0px; padding:0px">18</div>
<div class="line" style="margin:0px; padding:0px">19</div>
<div class="line" style="margin:0px; padding:0px">20</div>
<div class="line" style="margin:0px; padding:0px">21</div>
<div class="line" style="margin:0px; padding:0px">22</div>
<div class="line" style="margin:0px; padding:0px">23</div>
<div class="line" style="margin:0px; padding:0px">24</div>
<div class="line" style="margin:0px; padding:0px">25</div>
<div class="line" style="margin:0px; padding:0px">26</div>
<div class="line" style="margin:0px; padding:0px">27</div>
<div class="line" style="margin:0px; padding:0px">28</div>
<div class="line" style="margin:0px; padding:0px">29</div>
<div class="line" style="margin:0px; padding:0px">30</div>
<div class="line" style="margin:0px; padding:0px">31</div>
<div class="line" style="margin:0px; padding:0px">32</div>
<div class="line" style="margin:0px; padding:0px">33</div>
<div class="line" style="margin:0px; padding:0px">34</div>
<div class="line" style="margin:0px; padding:0px">35</div>
<div class="line" style="margin:0px; padding:0px">36</div>
<div class="line" style="margin:0px; padding:0px">37</div>
<div class="line" style="margin:0px; padding:0px">38</div>
<div class="line" style="margin:0px; padding:0px">39</div>
<div class="line" style="margin:0px; padding:0px">40</div>
<div class="line" style="margin:0px; padding:0px">41</div>
<div class="line" style="margin:0px; padding:0px">42</div>
<div class="line" style="margin:0px; padding:0px">43</div>
<div class="line" style="margin:0px; padding:0px">44</div>
<div class="line" style="margin:0px; padding:0px">45</div>
<div class="line" style="margin:0px; padding:0px">46</div>
<div class="line" style="margin:0px; padding:0px">47</div>
<div class="line" style="margin:0px; padding:0px">48</div>
<div class="line" style="margin:0px; padding:0px">49</div>
<div class="line" style="margin:0px; padding:0px">50</div>
<div class="line" style="margin:0px; padding:0px">51</div>
<div class="line" style="margin:0px; padding:0px">52</div>
<div class="line" style="margin:0px; padding:0px">53</div>
<div class="line" style="margin:0px; padding:0px">54</div>
<div class="line" style="margin:0px; padding:0px">55</div>
<div class="line" style="margin:0px; padding:0px">56</div>
<div class="line" style="margin:0px; padding:0px">57</div>
<div class="line" style="margin:0px; padding:0px">58</div>
<div class="line" style="margin:0px; padding:0px">59</div>
<div class="line" style="margin:0px; padding:0px">60</div>
<div class="line" style="margin:0px; padding:0px">61</div>
<div class="line" style="margin:0px; padding:0px">62</div>
<div class="line" style="margin:0px; padding:0px">63</div>
<div class="line" style="margin:0px; padding:0px">64</div>
<div class="line" style="margin:0px; padding:0px">65</div>
<div class="line" style="margin:0px; padding:0px">66</div>
<div class="line" style="margin:0px; padding:0px">67</div>
<div class="line" style="margin:0px; padding:0px">68</div>
<div class="line" style="margin:0px; padding:0px">69</div>
<div class="line" style="margin:0px; padding:0px">70</div>
<div class="line" style="margin:0px; padding:0px">71</div>
<div class="line" style="margin:0px; padding:0px">72</div>
<div class="line" style="margin:0px; padding:0px">73</div>
<div class="line" style="margin:0px; padding:0px">74</div>
<div class="line" style="margin:0px; padding:0px">75</div>
<div class="line" style="margin:0px; padding:0px">76</div>
<div class="line" style="margin:0px; padding:0px">77</div>
<div class="line" style="margin:0px; padding:0px">78</div>
<div class="line" style="margin:0px; padding:0px">79</div>
<div class="line" style="margin:0px; padding:0px">80</div>
<div class="line" style="margin:0px; padding:0px">81</div>
<div class="line" style="margin:0px; padding:0px">82</div>
<div class="line" style="margin:0px; padding:0px">83</div>
<div class="line" style="margin:0px; padding:0px">84</div>
<div class="line" style="margin:0px; padding:0px">85</div>
<div class="line" style="margin:0px; padding:0px">86</div>
<div class="line" style="margin:0px; padding:0px">87</div>
<div class="line" style="margin:0px; padding:0px">88</div>
<div class="line" style="margin:0px; padding:0px">89</div>
<div class="line" style="margin:0px; padding:0px">90</div>
<div class="line" style="margin:0px; padding:0px">91</div>
<div class="line" style="margin:0px; padding:0px">92</div>
<div class="line" style="margin:0px; padding:0px">93</div>
<div class="line" style="margin:0px; padding:0px">94</div>
<div class="line" style="margin:0px; padding:0px">95</div>
<div class="line" style="margin:0px; padding:0px">96</div>
<div class="line" style="margin:0px; padding:0px">97</div>
<div class="line" style="margin:0px; padding:0px">98</div>
<div class="line" style="margin:0px; padding:0px">99</div>
<div class="line" style="margin:0px; padding:0px">100</div>
<div class="line" style="margin:0px; padding:0px">101</div>
<div class="line" style="margin:0px; padding:0px">102</div>
<div class="line" style="margin:0px; padding:0px">103</div>
<div class="line" style="margin:0px; padding:0px">104</div>
<div class="line" style="margin:0px; padding:0px">105</div>
<div class="line" style="margin:0px; padding:0px">106</div>
<div class="line" style="margin:0px; padding:0px">107</div>
<div class="line" style="margin:0px; padding:0px">108</div>
<div class="line" style="margin:0px; padding:0px">109</div>
<div class="line" style="margin:0px; padding:0px">110</div>
<div class="line" style="margin:0px; padding:0px">111</div>
<div class="line" style="margin:0px; padding:0px">112</div>
<div class="line" style="margin:0px; padding:0px">113</div>
<div class="line" style="margin:0px; padding:0px">114</div>
<div class="line" style="margin:0px; padding:0px">115</div>
<div class="line" style="margin:0px; padding:0px">116</div>
<div class="line" style="margin:0px; padding:0px">117</div>
<div class="line" style="margin:0px; padding:0px">118</div>
<div class="line" style="margin:0px; padding:0px">119</div>
<div class="line" style="margin:0px; padding:0px">120</div>
<div class="line" style="margin:0px; padding:0px">121</div>
<div class="line" style="margin:0px; padding:0px">122</div>
<div class="line" style="margin:0px; padding:0px">123</div>
<div class="line" style="margin:0px; padding:0px">124</div>
<div class="line" style="margin:0px; padding:0px">125</div>
<div class="line" style="margin:0px; padding:0px">126</div>
<div class="line" style="margin:0px; padding:0px">127</div>
<div class="line" style="margin:0px; padding:0px">128</div>
<div class="line" style="margin:0px; padding:0px">129</div>
<div class="line" style="margin:0px; padding:0px">130</div>
<div class="line" style="margin:0px; padding:0px">131</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">{</div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `url`是将用于请求的服务器URL</span></div>
<div class="line" style="margin:0px; padding:0px">url: <span class="string" style="margin:0px; padding:0px">'/user',</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `method`是发出请求时使用的请求方法</span></div>
<div class="line" style="margin:0px; padding:0px">method: <span class="string" style="margin:0px; padding:0px">'get', <span class="comment" style="margin:0px; padding:0px">// 默认</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `baseURL`将被添加到`url`前面，除非`url`是绝对的。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。</span></div>
<div class="line" style="margin:0px; padding:0px">baseURL: <span class="string" style="margin:0px; padding:0px">'https://some-domain.com/api/',</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `transformRequest`允许在请求数据发送到服务器之前对其进行更改</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 这只适用于请求方法'PUT'，'POST'和'PATCH'</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px">transformRequest: [<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">data) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 做任何你想要的数据转换</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">return data;</span></div>
<div class="line" style="margin:0px; padding:0px">}],</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `transformResponse`允许在 then / catch之前对响应数据进行更改</span></div>
<div class="line" style="margin:0px; padding:0px">transformResponse: [<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">data) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// Do whatever you want to transform the data</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">return data;</span></div>
<div class="line" style="margin:0px; padding:0px">}],</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `headers`是要发送的自定义 headers</span></div>
<div class="line" style="margin:0px; padding:0px">headers: {<span class="string" style="margin:0px; padding:0px">'X-Requested-With': <span class="string" style="margin:0px; padding:0px">'XMLHttpRequest'},</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `params`是要与请求一起发送的URL参数</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 必须是纯对象或URLSearchParams对象</span></div>
<div class="line" style="margin:0px; padding:0px">params: {</div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">ID: <span class="number" style="margin:0px; padding:0px">12345</span></span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `paramsSerializer`是一个可选的函数，负责序列化`params`</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)</span></div>
<div class="line" style="margin:0px; padding:0px">paramsSerializer: <span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function(<span class="params" style="margin:0px; padding:0px">params) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">return Qs.stringify(params, {<span class="attr" style="margin:0px; padding:0px">arrayFormat: <span class="string" style="margin:0px; padding:0px">'brackets'})</span></span></span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `data`是要作为请求主体发送的数据</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 仅适用于请求方法“PUT”，“POST”和“PATCH”</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 当没有设置`transformRequest`时，必须是以下类型之一：</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// - Browser only: FormData, File, Blob</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// - Node only: Stream</span></div>
<div class="line" style="margin:0px; padding:0px">data: {</div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">firstName: <span class="string" style="margin:0px; padding:0px">'Fred'</span></span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `timeout`指定请求超时之前的毫秒数。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 如果请求的时间超过'timeout'，请求将被中止。</span></div>
<div class="line" style="margin:0px; padding:0px">timeout: <span class="number" style="margin:0px; padding:0px">1000,</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `withCredentials`指示是否跨站点访问控制请求</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// should be made using credentials</span></div>
<div class="line" style="margin:0px; padding:0px">withCredentials: <span class="literal" style="margin:0px; padding:0px">false, <span class="comment" style="margin:0px; padding:0px">// default</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `adapter'允许自定义处理请求，这使得测试更容易。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））</span></div>
<div class="line" style="margin:0px; padding:0px">adapter: <span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">config) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">/* ... */</span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `auth'表示应该使用 HTTP 基本认证，并提供凭据。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。</span></div>
<div class="line" style="margin:0px; padding:0px">auth: {</div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">username: <span class="string" style="margin:0px; padding:0px">'janedoe',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">password: <span class="string" style="margin:0px; padding:0px">'s00pers3cret'</span></span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// “responseType”表示服务器将响应的数据类型</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'</span></div>
<div class="line" style="margin:0px; padding:0px">responseType: <span class="string" style="margin:0px; padding:0px">'json', <span class="comment" style="margin:0px; padding:0px">// default</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称</span></div>
<div class="line" style="margin:0px; padding:0px">xsrfCookieName: <span class="string" style="margin:0px; padding:0px">'XSRF-TOKEN', <span class="comment" style="margin:0px; padding:0px">// default</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `xsrfHeaderName`是携带xsrf令牌值的http头的名称</span></div>
<div class="line" style="margin:0px; padding:0px">xsrfHeaderName: <span class="string" style="margin:0px; padding:0px">'X-XSRF-TOKEN', <span class="comment" style="margin:0px; padding:0px">// default</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `onUploadProgress`允许处理上传的进度事件</span></div>
<div class="line" style="margin:0px; padding:0px">onUploadProgress: <span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">progressEvent) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 使用本地 progress 事件做任何你想要做的</span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `onDownloadProgress`允许处理下载的进度事件</span></div>
<div class="line" style="margin:0px; padding:0px">onDownloadProgress: <span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">progressEvent)
{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// Do whatever you want with the native progress event</span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `maxContentLength`定义允许的http响应内容的最大大小</span></div>
<div class="line" style="margin:0px; padding:0px">maxContentLength: <span class="number" style="margin:0px; padding:0px">2000,</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `validateStatus`定义是否解析或拒绝给定的promise</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">// 拒绝。</span></div>
<div class="line" style="margin:0px; padding:0px">validateStatus: <span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">status) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">return status >= <span class="number" style="margin:0px; padding:0px">200 && status < <span class="number" style="margin:0px; padding:0px">300; <span class="comment" style="margin:0px; padding:0px">//
default</span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `maxRedirects`定义在node.js中要遵循的重定向的最大数量。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 如果设置为0，则不会遵循重定向。</span></div>
<div class="line" style="margin:0px; padding:0px">maxRedirects: <span class="number" style="margin:0px; padding:0px">5, <span class="comment" style="margin:0px; padding:0px">// 默认</span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 允许配置类似`keepAlive`的选项，</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 默认情况下不启用。</span></div>
<div class="line" style="margin:0px; padding:0px">httpAgent: <span class="keyword" style="margin:0px; padding:0px">new http.Agent({ <span class="attr" style="margin:0px; padding:0px">keepAlive: <span class="literal" style="margin:0px; padding:0px">true }),</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">httpsAgent: <span class="keyword" style="margin:0px; padding:0px">new https.Agent({ <span class="attr" style="margin:0px; padding:0px">keepAlive: <span class="literal" style="margin:0px; padding:0px">true
}),</span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 'proxy'定义代理服务器的主机名和端口</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。</span></div>
<div class="line" style="margin:0px; padding:0px">proxy: {</div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">host: <span class="string" style="margin:0px; padding:0px">'127.0.0.1',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">port: <span class="number" style="margin:0px; padding:0px">9000,</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">auth: : {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">username: <span class="string" style="margin:0px; padding:0px">'mikeymike',</span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">password: <span class="string" style="margin:0px; padding:0px">'rapunz3l'</span></span></div>
<div class="line" style="margin:0px; padding:0px">}</div>
<div class="line" style="margin:0px; padding:0px">},</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// “cancelToken”指定可用于取消请求的取消令牌</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// (see Cancellation section below for details)</span></div>
<div class="line" style="margin:0px; padding:0px">cancelToken: <span class="keyword" style="margin:0px; padding:0px">new CancelToken(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">cancel)
{</span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px">})</div>
<div class="line" style="margin:0px; padding:0px">}</div>
</td>
</tr>
</tbody>
</table>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
使用 then 时，您将收到如下响应：</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">axios.get(<span class="string" style="margin:0px; padding:0px">'/user/12345')</span></div>
<div class="line" style="margin:0px; padding:0px">.then(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function(<span class="params" style="margin:0px; padding:0px">response) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response.data);</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response.status);</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response.statusText);</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response.headers);</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(response.config);</span></div>
<div class="line" style="margin:0px; padding:0px">});</div>
</td>
</tr>
</tbody>
</table>
<h2 id="配置默认值" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t15" target="_blank"></a>
配置默认值</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
您可以指定将应用于每个请求的配置默认值。</p>
<h3 id="全局axios默认值" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t16" target="_blank"></a>
全局axios默认值</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">axios.defaults.baseURL = <span class="string" style="margin:0px; padding:0px">'https://api.example.com';</span></div>
<div class="line" style="margin:0px; padding:0px">axios.defaults.headers.common[<span class="string" style="margin:0px; padding:0px">'Authorization'] = AUTH_TOKEN;</span></div>
<div class="line" style="margin:0px; padding:0px">axios.defaults.headers.post[<span class="string" style="margin:0px; padding:0px">'Content-Type'] = <span class="string" style="margin:0px; padding:0px">'application/x-www-form-urlencoded';</span></span></div>
</td>
</tr>
</tbody>
</table>
<h3 id="自定义实例默认值" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t17" target="_blank"></a>
自定义实例默认值</h3>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//在创建实例时设置配置默认值</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var instance = axios.create（{</span></div>
<div class="line" style="margin:0px; padding:0px"> baseURL：<span class="string" style="margin:0px; padding:0px">'https://api.example.com'</span></div>
<div class="line" style="margin:0px; padding:0px">}）;</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//在实例创建后改变默认值</span></div>
<div class="line" style="margin:0px; padding:0px">instance.defaults.headers.common [<span class="string" style="margin:0px; padding:0px">'Authorization'] = AUTH_TOKEN;</span></div>
</td>
</tr>
</tbody>
</table>
<h3 id="配置优先级顺序" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t18" target="_blank"></a>
配置优先级顺序</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
配置将与优先顺序合并。 顺序是lib / defaults.<a href="http://lib.csdn.net/base/javascript" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">js</a>中的库默认值，然后是实例的defaults属性，最后是请求的config参数。 后者将优先于前者。 这里有一个例子。</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//使用库提供的配置默认值创建实例</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//此时，超时配置值为`0`，这是库的默认值</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var instance = axios.create（）;</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//覆盖库的超时默认值</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//现在所有请求将在超时前等待2.5秒</span></div>
<div class="line" style="margin:0px; padding:0px">instance.defaults.timeout = <span class="number" style="margin:0px; padding:0px">2500;</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//覆盖此请求的超时，因为它知道需要很长时间</span></div>
<div class="line" style="margin:0px; padding:0px">instance.get（<span class="string" style="margin:0px; padding:0px">'/ longRequest'，{</span></div>
<div class="line" style="margin:0px; padding:0px"> timeout：<span class="number" style="margin:0px; padding:0px">5000</span></div>
<div class="line" style="margin:0px; padding:0px">}）;</div>
</td>
</tr>
</tbody>
</table>
<h2 id="拦截器" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t19" target="_blank"></a>
拦截器</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
你可以截取请求或响应在被 then 或者 catch 处理之前</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
<div class="line" style="margin:0px; padding:0px">13</div>
<div class="line" style="margin:0px; padding:0px">14</div>
<div class="line" style="margin:0px; padding:0px">15</div>
<div class="line" style="margin:0px; padding:0px">16</div>
<div class="line" style="margin:0px; padding:0px">17</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//添加请求拦截器</span></div>
<div class="line" style="margin:0px; padding:0px">axios.interceptors.request.use（<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function（<span class="title" style="margin:0px; padding:0px">config）{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//在发送请求之前做某事</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="keyword" style="margin:0px; padding:0px">return config;</span></div>
<div class="line" style="margin:0px; padding:0px"> }，<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function（<span class="title" style="margin:0px; padding:0px">error）{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//请求错误时做些事</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="keyword" style="margin:0px; padding:0px">return <span class="built_in" style="margin:0px; padding:0px">Promise.reject（error）;</span></span></div>
<div class="line" style="margin:0px; padding:0px"> }）;</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//添加响应拦截器</span></div>
<div class="line" style="margin:0px; padding:0px">axios.interceptors.response.use（<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function（<span class="title" style="margin:0px; padding:0px">response）{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//对响应数据做些事</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="keyword" style="margin:0px; padding:0px">return response;</span></div>
<div class="line" style="margin:0px; padding:0px"> }，<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function（<span class="title" style="margin:0px; padding:0px">error）{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//请求错误时做些事</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="keyword" style="margin:0px; padding:0px">return <span class="built_in" style="margin:0px; padding:0px">Promise.reject（error）;</span></span></div>
<div class="line" style="margin:0px; padding:0px"> }）;</div>
</td>
</tr>
</tbody>
</table>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
如果你以后可能需要删除拦截器。</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var myInterceptor = axios.interceptors.request.use(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function
(<span class="params" style="margin:0px; padding:0px">) {<span class="comment" style="margin:0px; padding:0px">/*...*/});</span></span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px">axios.interceptors.request.eject(myInterceptor);</div>
</td>
</tr>
</tbody>
</table>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
你可以将拦截器添加到axios的自定义实例。</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var instance = axios.create();</span></div>
<div class="line" style="margin:0px; padding:0px">instance.interceptors.request.use(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function (<span class="params" style="margin:0px; padding:0px">)
{<span class="comment" style="margin:0px; padding:0px">/*...*/});</span></span></span></span></div>
</td>
</tr>
</tbody>
</table>
<h2 id="处理错误" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t20" target="_blank"></a>
处理错误</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
<div class="line" style="margin:0px; padding:0px">13</div>
<div class="line" style="margin:0px; padding:0px">14</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">axios.get（<span class="string" style="margin:0px; padding:0px">'/ user / 12345'）</span></div>
<div class="line" style="margin:0px; padding:0px"> .catch（<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function（<span class="title" style="margin:0px; padding:0px">error）{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="keyword" style="margin:0px; padding:0px">if（error.response）{</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//请求已发出，但服务器使用状态代码进行响应</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//落在2xx的范围之外</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="built_in" style="margin:0px; padding:0px">console.log（error.response.data）;</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="built_in" style="margin:0px; padding:0px">console.log（error.response.status）;</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="built_in" style="margin:0px; padding:0px">console.log（error.response.headers）;</span></div>
<div class="line" style="margin:0px; padding:0px"> } <span class="keyword" style="margin:0px; padding:0px">else {</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//在设置触发错误的请求时发生了错误</span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="built_in" style="margin:0px; padding:0px">console.log（<span class="string" style="margin:0px; padding:0px">'Error'，error.message）;</span></span></div>
<div class="line" style="margin:0px; padding:0px"> }}</div>
<div class="line" style="margin:0px; padding:0px"> <span class="built_in" style="margin:0px; padding:0px">console.log（error.config）;</span></div>
<div class="line" style="margin:0px; padding:0px"> }）;</div>
</td>
</tr>
</tbody>
</table>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">axios.get（<span class="string" style="margin:0px; padding:0px">'/ user / 12345'，{</span></div>
<div class="line" style="margin:0px; padding:0px"> validateStatus：<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function（<span class="title" style="margin:0px; padding:0px">status）{</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="keyword" style="margin:0px; padding:0px">return status < <span class="number" style="margin:0px; padding:0px">500; <span class="comment" style="margin:0px; padding:0px">//仅当状态代码大于或等于500时拒绝</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> }}</div>
<div class="line" style="margin:0px; padding:0px">}）</div>
</td>
</tr>
</tbody>
</table>
<h2 id="消除" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t21" target="_blank"></a>
消除</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
您可以使用取消令牌取消请求。</p>
<blockquote style="margin:0px; padding:5px 10px; border-top:none; border-right:none; border-bottom:none; border-left:5px solid rgb(221,221,221); color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(119,119,119)">
axios cancel token API基于可取消的promise提议，目前处于阶段1。</p>
</blockquote>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
您可以使用CancelToken.source工厂创建一个取消令牌，如下所示：</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
<div class="line" style="margin:0px; padding:0px">13</div>
<div class="line" style="margin:0px; padding:0px">14</div>
<div class="line" style="margin:0px; padding:0px">15</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var CancelToken = axios.CancelToken;</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var source = CancelToken.source（）;</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px">axios.get(<span class="string" style="margin:0px; padding:0px">'/user/12345', {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="attr" style="margin:0px; padding:0px">cancelToken: source.token</span></div>
<div class="line" style="margin:0px; padding:0px">}).catch(<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function(<span class="params" style="margin:0px; padding:0px">thrown) {</span></span></span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">if (axios.isCancel(thrown)) {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="built_in" style="margin:0px; padding:0px">console.log(<span class="string" style="margin:0px; padding:0px">'Request canceled', thrown.message);</span></span></div>
<div class="line" style="margin:0px; padding:0px">} <span class="keyword" style="margin:0px; padding:0px">else {</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 处理错误</span></div>
<div class="line" style="margin:0px; padding:0px">}</div>
<div class="line" style="margin:0px; padding:0px">});</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">//取消请求（消息参数是可选的）</span></div>
<div class="line" style="margin:0px; padding:0px">source.cancel（<span class="string" style="margin:0px; padding:0px">'操作被用户取消。'）;</span></div>
</td>
</tr>
</tbody>
</table>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌：</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
<div class="line" style="margin:0px; padding:0px">5</div>
<div class="line" style="margin:0px; padding:0px">6</div>
<div class="line" style="margin:0px; padding:0px">7</div>
<div class="line" style="margin:0px; padding:0px">8</div>
<div class="line" style="margin:0px; padding:0px">9</div>
<div class="line" style="margin:0px; padding:0px">10</div>
<div class="line" style="margin:0px; padding:0px">11</div>
<div class="line" style="margin:0px; padding:0px">12</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var CancelToken = axios.CancelToken;</span></div>
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var cancel;</span></div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px">axios.get（<span class="string" style="margin:0px; padding:0px">'/ user / 12345'，{</span></div>
<div class="line" style="margin:0px; padding:0px"> cancelToken：<span class="keyword" style="margin:0px; padding:0px">new CancelToken（<span class="function" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">function <span class="title" style="margin:0px; padding:0px">executor（<span class="title" style="margin:0px; padding:0px">c）{</span></span></span></span></span></div>
<div class="line" style="margin:0px; padding:0px"> <span class="comment" style="margin:0px; padding:0px">//一个执行器函数接收一个取消函数作为参数</span></div>
<div class="line" style="margin:0px; padding:0px"> cancel = c;</div>
<div class="line" style="margin:0px; padding:0px"> }）</div>
<div class="line" style="margin:0px; padding:0px">}）;</div>
<div class="line" style="margin:0px; padding:0px"> </div>
<div class="line" style="margin:0px; padding:0px"><span class="comment" style="margin:0px; padding:0px">// 取消请求</span></div>
<div class="line" style="margin:0px; padding:0px">clear();</div>
</td>
</tr>
</tbody>
</table>
<blockquote style="margin:0px; padding:5px 10px; border-top:none; border-right:none; border-bottom:none; border-left:5px solid rgb(221,221,221); color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(119,119,119)">
注意：您可以使用相同的取消令牌取消几个请求。</p>
</blockquote>
<h2 id="使用application-x-www-form-urlencoded格式" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t22" target="_blank"></a>
使用application / x-www-form-urlencoded格式</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
默认情况下，axios将<a href="http://lib.csdn.net/base/javascript" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">JavaScript</a>对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。</p>
<h3 id="浏览器" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t23" target="_blank"></a>
浏览器</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
在浏览器中，您可以使用URLSearchParams API，如下所示：</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
<div class="line" style="margin:0px; padding:0px">3</div>
<div class="line" style="margin:0px; padding:0px">4</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var params = <span class="keyword" style="margin:0px; padding:0px">new URLSearchParams();</span></span></div>
<div class="line" style="margin:0px; padding:0px">params.append(<span class="string" style="margin:0px; padding:0px">'param1', <span class="string" style="margin:0px; padding:0px">'value1');</span></span></div>
<div class="line" style="margin:0px; padding:0px">params.append(<span class="string" style="margin:0px; padding:0px">'param2', <span class="string" style="margin:0px; padding:0px">'value2');</span></span></div>
<div class="line" style="margin:0px; padding:0px">axios.post(<span class="string" style="margin:0px; padding:0px">'/foo', params);</span></div>
</td>
</tr>
</tbody>
</table>
<blockquote style="margin:0px; padding:5px 10px; border-top:none; border-right:none; border-bottom:none; border-left:5px solid rgb(221,221,221); color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(119,119,119)">
请注意，所有浏览器都不支持URLSearchParams，但是有一个polyfill可用（确保polyfill全局环境）。</p>
</blockquote>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
或者，您可以使用qs库对数据进行编码：</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var qs = <span class="built_in" style="margin:0px; padding:0px">require(<span class="string" style="margin:0px; padding:0px">'qs');</span></span></span></div>
<div class="line" style="margin:0px; padding:0px">axios.post(<span class="string" style="margin:0px; padding:0px">'/foo', qs.stringify({ <span class="string" style="margin:0px; padding:0px">'bar': <span class="number" style="margin:0px; padding:0px">123 });</span></span></span></div>
</td>
</tr>
</tbody>
</table>
<h3 id="Node-js" style="margin:10px 0px; padding:0px; font-size:16px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t24" target="_blank"></a>
Node.js</h3>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
在<a href="http://lib.csdn.net/base/nodejs" class="replace_word" title="Node.js知识库" target="_blank" style="color:#df3434; font-weight:bold;">Node.js</a>中，可以使用querystring模块，如下所示：</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">var querystring = <span class="built_in" style="margin:0px; padding:0px">require(<span class="string" style="margin:0px; padding:0px">'querystring');</span></span></span></div>
<div class="line" style="margin:0px; padding:0px">axios.post(<span class="string" style="margin:0px; padding:0px">'http://something.com/', querystring.stringify({ <span class="attr" style="margin:0px; padding:0px">foo: <span class="string" style="margin:0px; padding:0px">'bar'
});</span></span></span></div>
</td>
</tr>
</tbody>
</table>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
你也可以使用qs库。</p>
<h2 id="Promise" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t25" target="_blank"></a>
Promise</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
axios 依赖本机要支持ES6 Promise实现。 如果您的环境不支持ES6 Promises，您可以使用polyfill。</p>
<h2 id="TypeScript" style="margin:20px 0px; padding:0px; font-size:21px; line-height:1.5; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif"><a name="t26" target="_blank"></a>
TypeScript</h2>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
axios包括TypeScript定义。</p>
<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; max-width:850px; border:1px solid silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<tbody style="margin:0px; padding:0px">
<tr style="margin:0px; padding:0px">
<td class="gutter" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px">1</div>
<div class="line" style="margin:0px; padding:0px">2</div>
</td>
<td class="code" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">
<div class="line" style="margin:0px; padding:0px"><span class="keyword" style="margin:0px; padding:0px">import axios <span class="keyword" style="margin:0px; padding:0px">from <span class="string" style="margin:0px; padding:0px">'axios';</span></span></span></div>
<div class="line" style="margin:0px; padding:0px">axios.get(<span class="string" style="margin:0px; padding:0px">'/user?ID=12345');</span></div>
</td>
</tr>
</tbody>
</table>
<hr style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
axios在很大程度上受到Angular提供的$http服务的启发。 最终，axios努力提供一个在Angular外使用的独立的$http-like服务。</p>
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px">
<span style="color:#ff0000">转载：http://www.cnblogs.com/libin-1/p/6445356.html</span></p>
</div>
<!-- Baidu Button BEGIN -->
<div class="bdsharebuttonbox tracking-ad bdshare-button-style0-16" style="float: right;" data-mod="popu_172" data-bd-bind="1502435898674">
<a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important" target="_blank"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important" target="_blank"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important" target="_blank"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important" target="_blank"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important" target="_blank"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important" target="_blank"></a>
</div>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
<!-- Baidu Button END -->
<!--172.16.140.15-->
<!-- Baidu Button BEGIN -->
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=417344"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->
<div id="digg" articleid="71079745">
<dl id="btnDigg" class="digg digg_enable" οnclick="btndigga();">
<dt>顶</dt>
<dd>1</dd>
</dl>
<dl id="btnBury" class="digg digg_enable" οnclick="btnburya();">
<dt>踩</dt>
<dd>0</dd>
</dl>
</div>
<div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a> </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div>
<script type="text/javascript">
function btndigga() {
$(".tracking-ad[data-mod='popu_222'] a").click();
}
function btnburya() {
$(".tracking-ad[data-mod='popu_223'] a").click();
}
</script>
<ul class="article_next_prev">
<li class="prev_article"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian']);location.href='http://blog.csdn.net/hsany330/article/details/70755735';">上一篇</span><a href="http://blog.csdn.net/hsany330/article/details/70755735" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">axios – 基于 Promise 的 HTTP 异步请求库</a></li>
<li class="next_article"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian']);location.href='http://blog.csdn.net/hsany330/article/details/71081976';">下一篇</span><a href="http://blog.csdn.net/hsany330/article/details/71081976" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">一个项目学会前端实现登录拦截</a></li>
</ul>
<div style="clear:both; height:10px;"></div>
<div class="similar_article">
<h4></h4>
<div class="similar_c" style="margin:20px 0px 0px 0px">
<div class="similar_c_t">
相关文章推荐
</div>
<div class="similar_wrap tracking-ad" data-mod="popu_36">
<ul class="similar_list fl">
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/75581716" title="Vue.js 中，7种定义组件模板的方法 | Codementor" strategy="BlogCommendFromBaidu" target="_blank">Vue.js 中，7种定义组件模板的方法 | Codementor</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/64124600" title="Webpack 配置中的一股清流" strategy="BlogCommendFromBaidu" target="_blank">Webpack 配置中的一股清流</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/75950356" title="Vue官方文档梳理-全局配置" strategy="BlogCommendFromBaidu" target="_blank">Vue官方文档梳理-全局配置</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/67008175" title="Webpack2.0中文文档" strategy="BlogCommendFromBaidu" target="_blank">Webpack2.0中文文档</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/Generon/article/details/72848158" title="vue开发：vue+axios实现登录拦截" strategy="BlogCommendFromBaidu" target="_blank">vue开发：vue+axios实现登录拦截</a>
</li>
</ul>
<ul class="similar_list fr">
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/61924901" title="Webpack入门之遇到的那些坑，系列示例Demo" strategy="BlogCommendFromBaidu" target="_blank">Webpack入门之遇到的那些坑，系列示例Demo</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/75227873" title="vuex初探" strategy="BlogCommendFromBaidu" target="_blank">vuex初探</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/69371946" title="原创超清的 Webpack2 视频教程" strategy="BlogCommendFromBaidu" target="_blank">原创超清的 Webpack2 视频教程</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/sinat_17775997/article/details/69367204" title="axios在vue中的简单配置与使用" strategy="BlogCommendFromBaidu" target="_blank">axios在vue中的简单配置与使用</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/binginsist/article/details/65630547" title="vue2.0之axios使用详解(一)" strategy="BlogCommendFromBaidu" target="_blank">vue2.0之axios使用详解(一)</a>
</li>
</ul>
</div>
</div>
</div>
</div>
08-31
2万+
2万+
06-23
2496
2496
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
