mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-08 22:51:25 +08:00
325 lines
162 KiB
HTML
325 lines
162 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
|
||
<title>README</title><link href='vue/fonts.css' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
|
||
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
|
||
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
|
||
iframe { margin: auto; }
|
||
a.url { word-break: break-all; }
|
||
a:active, a:hover { outline: 0px; }
|
||
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
|
||
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
|
||
#write.first-line-indent p { text-indent: 2em; }
|
||
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
|
||
#write.first-line-indent li { margin-left: 2em; }
|
||
.for-image #write { padding-left: 8px; padding-right: 8px; }
|
||
body.typora-export { padding-left: 30px; padding-right: 30px; }
|
||
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
|
||
@media screen and (max-width: 500px) {
|
||
body.typora-export { padding-left: 0px; padding-right: 0px; }
|
||
#write { padding-left: 20px; padding-right: 20px; }
|
||
.CodeMirror-sizer { margin-left: 0px !important; }
|
||
.CodeMirror-gutters { display: none !important; }
|
||
}
|
||
#write li > figure:last-child { margin-bottom: 0.5rem; }
|
||
#write ol, #write ul { position: relative; }
|
||
img { max-width: 100%; vertical-align: middle; }
|
||
button, input, select, textarea { color: inherit; font: inherit; }
|
||
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
|
||
*, ::after, ::before { box-sizing: border-box; }
|
||
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
|
||
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
|
||
p { line-height: inherit; }
|
||
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
|
||
p { orphans: 4; }
|
||
h1 { font-size: 2rem; }
|
||
h2 { font-size: 1.8rem; }
|
||
h3 { font-size: 1.6rem; }
|
||
h4 { font-size: 1.4rem; }
|
||
h5 { font-size: 1.2rem; }
|
||
h6 { font-size: 1rem; }
|
||
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
|
||
.hidden { display: none; }
|
||
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
|
||
a { cursor: pointer; }
|
||
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
|
||
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
|
||
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
|
||
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
|
||
figure > table { margin: 0px !important; }
|
||
tr { break-inside: avoid; break-after: auto; }
|
||
thead { display: table-header-group; }
|
||
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
|
||
table.md-table td { min-width: 32px; }
|
||
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
|
||
.CodeMirror-linenumber { user-select: none; }
|
||
.CodeMirror { text-align: left; }
|
||
.CodeMirror-placeholder { opacity: 0.3; }
|
||
.CodeMirror pre { padding: 0px 4px; }
|
||
.CodeMirror-lines { padding: 0px; }
|
||
div.hr:focus { cursor: none; }
|
||
#write pre { white-space: pre-wrap; }
|
||
#write.fences-no-line-wrapping pre { white-space: pre; }
|
||
#write pre.ty-contain-cm { white-space: normal; }
|
||
.CodeMirror-gutters { margin-right: 4px; }
|
||
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
|
||
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
|
||
#write .md-fences.mock-cm { white-space: pre-wrap; }
|
||
.md-fences.md-fences-with-lineno { padding-left: 0px; }
|
||
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
|
||
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
|
||
.CodeMirror-line, twitterwidget { break-inside: avoid; }
|
||
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
|
||
.footnotes + .footnotes { margin-top: 0px; }
|
||
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
|
||
li div { padding-top: 0px; }
|
||
blockquote { margin: 1rem 0px; }
|
||
li .mathjax-block, li p { margin: 0.5rem 0px; }
|
||
li { margin: 0px; position: relative; }
|
||
blockquote > :last-child { margin-bottom: 0px; }
|
||
blockquote > :first-child, li > :first-child { margin-top: 0px; }
|
||
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
|
||
#write .footnote-line { white-space: pre-wrap; }
|
||
@media print {
|
||
body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
|
||
#write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
|
||
.typora-export * { -webkit-print-color-adjust: exact; }
|
||
html.blink-to-pdf { font-size: 13px; }
|
||
.typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
|
||
.typora-export #write::after { height: 0px; }
|
||
}
|
||
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
|
||
a img, img a { cursor: pointer; }
|
||
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
|
||
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
|
||
p > .md-image:only-child { display: inline-block; width: 100%; }
|
||
#write .MathJax_Display { margin: 0.8em 0px 0px; }
|
||
.md-math-block { width: 100%; }
|
||
.md-math-block:not(:empty)::after { display: none; }
|
||
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
|
||
.md-task-list-item { position: relative; list-style-type: none; }
|
||
.task-list-item.md-task-list-item { padding-left: 0px; }
|
||
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
|
||
.math { font-size: 1rem; }
|
||
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
|
||
.md-toc-content { position: relative; margin-left: 0px; }
|
||
.md-toc-content::after, .md-toc::after { display: none; }
|
||
.md-toc-item { display: block; color: rgb(65, 131, 196); }
|
||
.md-toc-item a { text-decoration: none; }
|
||
.md-toc-inner:hover { text-decoration: underline; }
|
||
.md-toc-inner { display: inline-block; cursor: pointer; }
|
||
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
|
||
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
|
||
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
|
||
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
|
||
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
|
||
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
|
||
@media screen and (max-width: 48em) {
|
||
.md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
|
||
.md-toc-h4 .md-toc-inner { margin-left: 5em; }
|
||
.md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
|
||
.md-toc-h6 .md-toc-inner { margin-left: 8em; }
|
||
}
|
||
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
|
||
.footnote-line a:not(.reversefootnote) { color: inherit; }
|
||
.md-attr { display: none; }
|
||
.md-fn-count::after { content: "."; }
|
||
code, pre, samp, tt { font-family: var(--monospace); }
|
||
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
|
||
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
|
||
code { text-align: left; vertical-align: initial; }
|
||
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
|
||
.md-inline-math .MathJax_SVG .noError { display: none !important; }
|
||
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
|
||
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
|
||
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
|
||
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
|
||
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
|
||
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
|
||
.MathJax_SVG * { transition: none 0s ease 0s; }
|
||
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
|
||
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
|
||
.md-diagram-panel > svg { max-width: 100%; }
|
||
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
|
||
[lang="mermaid"] .node text { font-size: 1rem; }
|
||
table tr th { border-bottom: 0px; }
|
||
video { max-width: 100%; display: block; margin: 0px auto; }
|
||
iframe { max-width: 100%; width: 100%; border: none; }
|
||
.highlight td, .highlight tr { border: 0px; }
|
||
svg[id^="mermaidChart"] { line-height: 1em; }
|
||
|
||
|
||
.CodeMirror { height: auto; }
|
||
.CodeMirror.cm-s-inner { background: inherit; }
|
||
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
|
||
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
|
||
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
|
||
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
|
||
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
|
||
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
|
||
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
|
||
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
|
||
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
|
||
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
|
||
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
|
||
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
|
||
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
|
||
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
|
||
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
|
||
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
|
||
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
|
||
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
|
||
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
|
||
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
|
||
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
|
||
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
|
||
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
|
||
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
|
||
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
|
||
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
|
||
.cm-negative { color: rgb(221, 68, 68); }
|
||
.cm-positive { color: rgb(34, 153, 34); }
|
||
.cm-header, .cm-strong { font-weight: 700; }
|
||
.cm-del { text-decoration: line-through; }
|
||
.cm-em { font-style: italic; }
|
||
.cm-link { text-decoration: underline; }
|
||
.cm-error { color: red; }
|
||
.cm-invalidchar { color: red; }
|
||
.cm-constant { color: rgb(38, 139, 210); }
|
||
.cm-defined { color: rgb(181, 137, 0); }
|
||
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
|
||
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
|
||
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
|
||
.CodeMirror { position: relative; overflow: hidden; }
|
||
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
|
||
.CodeMirror-sizer { position: relative; }
|
||
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
|
||
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
|
||
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
|
||
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
|
||
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
|
||
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
|
||
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
|
||
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
|
||
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
|
||
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
|
||
.CodeMirror-lines { cursor: text; }
|
||
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
|
||
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
|
||
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
|
||
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
|
||
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
|
||
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
|
||
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
|
||
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
|
||
.CodeMirror-measure pre { position: static; }
|
||
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
|
||
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
|
||
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
|
||
.cm-searching { background: rgba(255, 255, 0, 0.4); }
|
||
@media print {
|
||
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
|
||
}
|
||
|
||
|
||
|
||
|
||
:root { --side-bar-bg-color: #fff; --control-text-color: #777; --font-sans-serif: "Ubuntu", "Source Sans Pro", sans-serif !important; --font-monospace: "Fira Code", "Roboto Mono", monospace !important; }
|
||
html { font-size: 16px; }
|
||
body { font-family: var(--font-sans-serif); color: rgb(52, 73, 94); -webkit-font-smoothing: antialiased; line-height: 1.6rem; letter-spacing: 0px; margin: 0px; overflow-x: hidden; }
|
||
#write { max-width: 860px; margin: 0px auto; padding: 20px 30px 100px; }
|
||
#write p { line-height: 1.6rem; word-spacing: 0.05rem; }
|
||
#write ol li { padding-left: 0.5rem; }
|
||
#write > ul:first-child, #write > ol:first-child { margin-top: 30px; }
|
||
body > :first-child { margin-top: 0px !important; }
|
||
body > :last-child { margin-bottom: 0px !important; }
|
||
a { color: rgb(66, 185, 131); font-weight: 600; padding: 0px 2px; text-decoration: none; }
|
||
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }
|
||
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
|
||
h1 tt, h1 code { font-size: inherit !important; }
|
||
h2 tt, h2 code { font-size: inherit !important; }
|
||
h3 tt, h3 code { font-size: inherit !important; }
|
||
h4 tt, h4 code { font-size: inherit !important; }
|
||
h5 tt, h5 code { font-size: inherit !important; }
|
||
h6 tt, h6 code { font-size: inherit !important; }
|
||
h2 a, h3 a { color: rgb(52, 73, 94); }
|
||
h1 { padding-bottom: 0.4rem; font-size: 2.2rem; line-height: 1.3; }
|
||
h2 { font-size: 1.75rem; line-height: 1.225; margin: 35px 0px 15px; padding-bottom: 0.5em; border-bottom: 1px solid rgb(221, 221, 221); }
|
||
h3 { font-size: 1.4rem; line-height: 1.43; margin: 20px 0px 7px; }
|
||
h4 { font-size: 1.2rem; }
|
||
h5 { font-size: 1rem; }
|
||
h6 { font-size: 1rem; color: rgb(119, 119, 119); }
|
||
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
|
||
li > ol, li > ul { margin: 0px; }
|
||
hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }
|
||
body > h2:first-child { margin-top: 0px; padding-top: 0px; }
|
||
body > h1:first-child { margin-top: 0px; padding-top: 0px; }
|
||
body > h1:first-child + h2 { margin-top: 0px; padding-top: 0px; }
|
||
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { margin-top: 0px; padding-top: 0px; }
|
||
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0px; padding-top: 0px; }
|
||
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0px; }
|
||
li p.first { display: inline-block; }
|
||
ul, ol { padding-left: 30px; }
|
||
ul:first-child, ol:first-child { margin-top: 0px; }
|
||
ul:last-child, ol:last-child { margin-bottom: 0px; }
|
||
blockquote { border-left: 4px solid rgb(66, 185, 131); padding: 10px 15px; color: rgb(119, 119, 119); background-color: rgba(66, 185, 131, 0.1); }
|
||
table { padding: 0px; word-break: initial; }
|
||
table tr { border-top: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }
|
||
table tr:nth-child(2n), thead { background-color: rgb(250, 250, 250); }
|
||
table tr th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; text-align: left; margin: 0px; padding: 6px 13px; }
|
||
table tr td { border: 1px solid rgb(223, 226, 229); text-align: left; margin: 0px; padding: 6px 13px; }
|
||
table tr th:first-child, table tr td:first-child { margin-top: 0px; }
|
||
table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }
|
||
#write strong { padding: 0px 1px; }
|
||
#write em { padding: 0px 5px 0px 2px; }
|
||
#write table thead th { background-color: rgb(242, 242, 242); }
|
||
#write .CodeMirror-gutters { border-right: none; }
|
||
#write .md-fences { border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; font-family: var(--font-monospace); font-size: 0.85rem; overflow-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0px !important; background-color: rgb(248, 248, 248) !important; }
|
||
#write .CodeMirror-wrap .CodeMirror-code pre { padding-left: 12px; }
|
||
#write code, tt { padding: 2px 4px; border-radius: 2px; font-family: var(--font-monospace); font-size: 0.92rem; color: rgb(233, 105, 0); background-color: rgb(248, 248, 248); }
|
||
tt { margin: 0px 2px; }
|
||
#write .md-footnote { background-color: rgb(248, 248, 248); color: rgb(233, 105, 0); }
|
||
#write mark { background-color: rgb(235, 255, 235); border-radius: 2px; padding: 2px 4px; margin: 0px 2px; color: rgb(34, 34, 34); font-weight: 500; }
|
||
#write del { padding: 1px 2px; }
|
||
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(34, 162, 201); }
|
||
.cm-s-inner .cm-string { color: rgb(34, 162, 201); }
|
||
.md-task-list-item > input { margin-left: -1.3em; }
|
||
@media print {
|
||
html { font-size: 13px; }
|
||
table, pre { break-inside: avoid; }
|
||
pre { overflow-wrap: break-word; }
|
||
}
|
||
.md-fences { background-color: rgb(248, 248, 248); }
|
||
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; }
|
||
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
|
||
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
|
||
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
|
||
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
|
||
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
|
||
.md-image > .md-meta { border-radius: 3px; font-family: var(--font-monospace); padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }
|
||
.md-tag { color: inherit; }
|
||
.md-toc { margin-top: 20px; padding-bottom: 20px; }
|
||
.sidebar-tabs { border-bottom: none; }
|
||
#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }
|
||
#typora-quick-open-item { background-color: rgb(250, 250, 250); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }
|
||
#md-notification::before { top: 10px; }
|
||
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }
|
||
header, .context-menu, .megamenu-content, footer { font-family: var(--font-sans-serif); }
|
||
.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }
|
||
.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }
|
||
.md-lang { color: rgb(180, 101, 77); }
|
||
.html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; }
|
||
|
||
.typora-export li, .typora-export p, .typora-export, .footnote-line {white-space: normal;}
|
||
</style>
|
||
</head>
|
||
<body class='typora-export os-windows' >
|
||
<div id='write' class = 'is-node'><div class='md-toc' mdtype='toc'><p class="md-toc-content" role="list"><span role="listitem" class="md-toc-item md-toc-h1" data-ref="n169"><a class="md-toc-inner" href="#axios">axios</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n4"><a class="md-toc-inner" href="#特性">特性</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n22"><a class="md-toc-inner" href="#浏览器支持">浏览器支持</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n41"><a class="md-toc-inner" href="#安装">安装</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n48"><a class="md-toc-inner" href="#案例">案例</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n55"><a class="md-toc-inner" href="#axios-api">axios API</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n57"><a class="md-toc-inner" href="#axiosconfig">axios(config)</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n60"><a class="md-toc-inner" href="#axiosurl-config">axios(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n62"><a class="md-toc-inner" href="#请求方法的别名">请求方法的别名</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n64"><a class="md-toc-inner" href="#axiosrequestconfig">axios.request(config)</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n65"><a class="md-toc-inner" href="#axiosgeturl-config">axios.get(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n66"><a class="md-toc-inner" href="#axiosdeleteurl-config">axios.delete(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n67"><a class="md-toc-inner" href="#axiosheadurl-config">axios.head(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n68"><a class="md-toc-inner" href="#axiosoptionsurl-config">axios.options(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n69"><a class="md-toc-inner" href="#axiosposturl-data-config">axios.post(url[, data[, config]])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n70"><a class="md-toc-inner" href="#axiosputurl-data-config">axios.put(url[, data[, config]])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n71"><a class="md-toc-inner" href="#axiospatchurl-data-config">axios.patch(url[, data[, config]])</a></span><span role="listitem" class="md-toc-item md-toc-h6" data-ref="n72"><a class="md-toc-inner" href="#注意">注意</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n74"><a class="md-toc-inner" href="#并发">并发</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n76"><a class="md-toc-inner" href="#axiosalliterable">axios.all(iterable)</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n77"><a class="md-toc-inner" href="#axiosspreadcallback">axios.spread(callback)</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n78"><a class="md-toc-inner" href="#创建实例">创建实例</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n80"><a class="md-toc-inner" href="#axioscreateconfig">axios.create([config])</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n82"><a class="md-toc-inner" href="#实例方法">实例方法</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n84"><a class="md-toc-inner" href="#axiosrequestconfig-n84">axios#request(config)</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n85"><a class="md-toc-inner" href="#axiosgeturl-config-n85">axios#get(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n86"><a class="md-toc-inner" href="#axiosdeleteurl-config-n86">axios#delete(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n87"><a class="md-toc-inner" href="#axiosheadurl-config-n87">axios#head(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n88"><a class="md-toc-inner" href="#axiosoptionsurl-config-n88">axios#options(url[, config])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n89"><a class="md-toc-inner" href="#axiosposturl-data-config-n89">axios#post(url[, data[, config]])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n90"><a class="md-toc-inner" href="#axiosputurl-data-config-n90">axios#put(url[, data[, config]])</a></span><span role="listitem" class="md-toc-item md-toc-h5" data-ref="n91"><a class="md-toc-inner" href="#axiospatchurl-data-config-n91">axios#patch(url[, data[, config]])</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n92"><a class="md-toc-inner" href="#请求配置">请求配置</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n95"><a class="md-toc-inner" href="#响应结构">响应结构</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n101"><a class="md-toc-inner" href="#配置默认值">配置默认值</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n103"><a class="md-toc-inner" href="#全局的-axios-默认值">全局的 axios 默认值</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n105"><a class="md-toc-inner" href="#自定义实例默认值">自定义实例默认值</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n107"><a class="md-toc-inner" href="#配置的优先顺序">配置的优先顺序</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n110"><a class="md-toc-inner" href="#拦截器">拦截器</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n117"><a class="md-toc-inner" href="#错误处理">错误处理</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n121"><a class="md-toc-inner" href="#取消">取消</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n131"><a class="md-toc-inner" href="#使用-applicationx-www-form-urlencoded-format">使用 application/x-www-form-urlencoded format</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n133"><a class="md-toc-inner" href="#浏览器">浏览器</a></span><span role="listitem" class="md-toc-item md-toc-h3" data-ref="n142"><a class="md-toc-inner" href="#nodejs">Node.js</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n146"><a class="md-toc-inner" href="#semver">Semver</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n148"><a class="md-toc-inner" href="#promises">Promises</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n150"><a class="md-toc-inner" href="#typescript">TypeScript</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n153"><a class="md-toc-inner" href="#资源">资源</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n165"><a class="md-toc-inner" href="#credits">Credits</a></span><span role="listitem" class="md-toc-item md-toc-h2" data-ref="n167"><a class="md-toc-inner" href="#协议">协议</a></span></p></div><p> </p><h1><a name="axios" class="md-header-anchor"></a><span>axios</span></h1><p><a href='https://www.npmjs.org/package/axios'><img src="https://img.shields.io/npm/v/axios.svg?style=flat-square" referrerpolicy="no-referrer" alt="npm version"></a>
|
||
<a href='https://travis-ci.org/axios/axios'><img src="https://img.shields.io/travis/axios/axios.svg?style=flat-square" referrerpolicy="no-referrer" alt="build status"></a>
|
||
<a href='https://coveralls.io/r/mzabriskie/axios'><img src="https://img.shields.io/coveralls/mzabriskie/axios.svg?style=flat-square" referrerpolicy="no-referrer" alt="code coverage"></a>
|
||
<a href='http://npm-stat.com/charts.html?package=axios'><img src="https://img.shields.io/npm/dm/axios.svg?style=flat-square" referrerpolicy="no-referrer" alt="npm downloads"></a>
|
||
<a href='https://gitter.im/mzabriskie/axios'><img src="https://img.shields.io/gitter/room/mzabriskie/axios.svg?style=flat-square" referrerpolicy="no-referrer" alt="gitter chat"></a>
|
||
<a href='https://www.codetriage.com/axios/axios'><img src="https://www.codetriage.com/axios/axios/badges/users.svg" referrerpolicy="no-referrer" alt="code helpers"></a></p><p><span>Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 </span></p><h2><a name="特性" class="md-header-anchor"></a><span>特性</span></h2><ul><li><span>从浏览器中创建 </span><a href='https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest'><span>XMLHttpRequests</span></a></li><li><span>从 node.js 创建 </span><a href='http://nodejs.org/api/http.html'><span>http</span></a><span> 请求</span></li><li><span>支持 </span><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise'><span>Promise</span></a><span> API</span></li><li><span>拦截请求和响应</span></li><li><span>转换请求数据和响应数据</span></li><li><span>取消请求</span></li><li><span>自动转换 JSON 数据</span></li><li><span>客户端支持防御 </span><a href='http://en.wikipedia.org/wiki/Cross-site_request_forgery'><span>XSRF</span></a></li></ul><h2><a name="浏览器支持" class="md-header-anchor"></a><span>浏览器支持</span></h2><figure><table><thead><tr><th><img src="https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" referrerpolicy="no-referrer" alt="Chrome"></th><th><img src="https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" referrerpolicy="no-referrer" alt="Firefox"></th><th><img src="https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png" referrerpolicy="no-referrer" alt="Safari"></th><th><img src="https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png" referrerpolicy="no-referrer" alt="Opera"></th><th><img src="https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png" referrerpolicy="no-referrer" alt="Edge"></th><th><img src="https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" referrerpolicy="no-referrer" alt="IE"></th><th> </th></tr></thead><tbody><tr><td><span>Latest ✔</span></td><td><span>Latest ✔</span></td><td><span>Latest ✔</span></td><td><span>Latest ✔</span></td><td><span>Latest ✔</span></td><td><span>8+ ✔</span></td><td> </td></tr></tbody></table></figure><p><a href='https://saucelabs.com/u/axios'><img src="https://saucelabs.com/open_sauce/build_matrix/axios.svg" referrerpolicy="no-referrer" alt="Browser Matrix"></a></p><h2><a name="安装" class="md-header-anchor"></a><span>安装</span></h2><p><span>使用 npm: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-def">$ npm</span> install axios</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 22px;"></div><div class="CodeMirror-gutters" style="display: none; height: 22px;"></div></div></div></pre><p><span>使用 bower: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-def">$ bower</span> install axios</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 22px;"></div><div class="CodeMirror-gutters" style="display: none; height: 22px;"></div></div></div></pre><p><span>使用 cdn: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://unpkg.com/axios/dist/axios.min.js"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 22px;"></div><div class="CodeMirror-gutters" style="display: none; height: 22px;"></div></div></div></pre><h2><a name="案例" class="md-header-anchor"></a><span>案例</span></h2><p><span>执行 </span><code>GET</code><span> 请求 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span></span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 为给定 ID 的 user 创建请求</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user?ID=12345'</span>)</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">then</span>(<span class="cm-keyword">function</span> (<span class="cm-def">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">catch</span>(<span class="cm-keyword">function</span> (<span class="cm-def">error</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 上面的请求也可以这样做</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user'</span>, {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">params</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">ID</span>: <span class="cm-number">12345</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">then</span>(<span class="cm-keyword">function</span> (<span class="cm-def">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">catch</span>(<span class="cm-keyword">function</span> (<span class="cm-def">error</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 462px;"></div><div class="CodeMirror-gutters" style="display: none; height: 462px;"></div></div></div></pre><p><span>执行 </span><code>POST</code><span> 请求 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">post</span>(<span class="cm-string">'/user'</span>, {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">firstName</span>: <span class="cm-string">'Fred'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">lastName</span>: <span class="cm-string">'Flintstone'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">then</span>(<span class="cm-keyword">function</span> (<span class="cm-def">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">catch</span>(<span class="cm-keyword">function</span> (<span class="cm-def">error</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 220px;"></div><div class="CodeMirror-gutters" style="display: none; height: 220px;"></div></div></div></pre><p><span>执行多个并发请求 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">getUserAccount</span>() {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">getUserPermissions</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345/permissions'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">all</span>([<span class="cm-variable">getUserAccount</span>(), <span class="cm-variable">getUserPermissions</span>()])</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">then</span>(<span class="cm-variable">axios</span>.<span class="cm-property">spread</span>(<span class="cm-keyword">function</span> (<span class="cm-def">acct</span>, <span class="cm-def">perms</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 两个请求现在都执行完成</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }));</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 264px;"></div><div class="CodeMirror-gutters" style="display: none; height: 264px;"></div></div></div></pre><h2><a name="axios-api" class="md-header-anchor"></a><span>axios API</span></h2><p><span>可以通过向 </span><code>axios</code><span> 传递相关配置来创建请求</span></p><h5><a name="axiosconfig" class="md-header-anchor"></a><span>axios(config)</span></h5><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 发送 POST 请求</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">method</span>: <span class="cm-string">'post'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">url</span>: <span class="cm-string">'/user/12345'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">data</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">firstName</span>: <span class="cm-string">'Fred'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">lastName</span>: <span class="cm-string">'Flintstone'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 198px;"></div><div class="CodeMirror-gutters" style="display: none; height: 198px;"></div></div></div></pre><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 获取远端图片</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">method</span>:<span class="cm-string">'get'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">url</span>:<span class="cm-string">'http://bit.ly/2mTM3nY'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">responseType</span>:<span class="cm-string">'stream'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">})</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">then</span>(<span class="cm-keyword">function</span>(<span class="cm-def">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable-2">response</span>.<span class="cm-property">data</span>.<span class="cm-property">pipe</span>(<span class="cm-variable">fs</span>.<span class="cm-property">createWriteStream</span>(<span class="cm-string">'ada_lovelace.jpg'</span>))</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 198px;"></div><div class="CodeMirror-gutters" style="display: none; height: 198px;"></div></div></div></pre><h5><a name="axiosurl-config" class="md-header-anchor"></a><span>axios(url[, config])</span></h5><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 发送 GET 请求(默认的方法)</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>(<span class="cm-string">'/user/12345'</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 44px;"></div><div class="CodeMirror-gutters" style="display: none; height: 44px;"></div></div></div></pre><h3><a name="请求方法的别名" class="md-header-anchor"></a><span>请求方法的别名</span></h3><p><span>为方便起见,为所有支持的请求方法提供了别名 </span></p><h5><a name="axiosrequestconfig" class="md-header-anchor"></a><span>axios.request(config)</span></h5><h5><a name="axiosgeturl-config" class="md-header-anchor"></a><span>axios.get(url[, config])</span></h5><h5><a name="axiosdeleteurl-config" class="md-header-anchor"></a><span>axios.delete(url[, config])</span></h5><h5><a name="axiosheadurl-config" class="md-header-anchor"></a><span>axios.head(url[, config])</span></h5><h5><a name="axiosoptionsurl-config" class="md-header-anchor"></a><span>axios.options(url[, config])</span></h5><h5><a name="axiosposturl-data-config" class="md-header-anchor"></a><span>axios.post(url[, data[, config]])</span></h5><h5><a name="axiosputurl-data-config" class="md-header-anchor"></a><span>axios.put(url[, data[, config]])</span></h5><h5><a name="axiospatchurl-data-config" class="md-header-anchor"></a><span>axios.patch(url[, data[, config]])</span></h5><h6><a name="注意" class="md-header-anchor"></a><span>注意</span></h6><p><span>在使用别名方法时, </span><code>url</code><span>、</span><code>method</code><span>、</span><code>data</code><span> 这些属性都不必在配置中指定。 </span></p><h3><a name="并发" class="md-header-anchor"></a><span>并发</span></h3><p><span>处理并发请求的助手函数 </span></p><h5><a name="axiosalliterable" class="md-header-anchor"></a><span>axios.all(iterable)</span></h5><h5><a name="axiosspreadcallback" class="md-header-anchor"></a><span>axios.spread(callback)</span></h5><h3><a name="创建实例" class="md-header-anchor"></a><span>创建实例</span></h3><p><span>可以使用自定义配置新建一个 axios 实例 </span></p><h5><a name="axioscreateconfig" class="md-header-anchor"></a><span>axios.create([config])</span></h5><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">instance</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">create</span>({</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">baseURL</span>: <span class="cm-string">'https://some-domain.com/api/'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">timeout</span>: <span class="cm-number">1000</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">headers</span>: {<span class="cm-string cm-property">'X-Custom-Header'</span>: <span class="cm-string">'foobar'</span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 110px;"></div><div class="CodeMirror-gutters" style="display: none; height: 110px;"></div></div></div></pre><h3><a name="实例方法" class="md-header-anchor"></a><span>实例方法</span></h3><p><span>以下是可用的实例方法。指定的配置将与实例的配置合并。</span></p><h5><a name="axiosrequestconfig-n84" class="md-header-anchor"></a><span>axios#request(config)</span></h5><h5><a name="axiosgeturl-config-n85" class="md-header-anchor"></a><span>axios#get(url[, config])</span></h5><h5><a name="axiosdeleteurl-config-n86" class="md-header-anchor"></a><span>axios#delete(url[, config])</span></h5><h5><a name="axiosheadurl-config-n87" class="md-header-anchor"></a><span>axios#head(url[, config])</span></h5><h5><a name="axiosoptionsurl-config-n88" class="md-header-anchor"></a><span>axios#options(url[, config])</span></h5><h5><a name="axiosposturl-data-config-n89" class="md-header-anchor"></a><span>axios#post(url[, data[, config]])</span></h5><h5><a name="axiosputurl-data-config-n90" class="md-header-anchor"></a><span>axios#put(url[, data[, config]])</span></h5><h5><a name="axiospatchurl-data-config-n91" class="md-header-anchor"></a><span>axios#patch(url[, data[, config]])</span></h5><h2><a name="请求配置" class="md-header-anchor"></a><span>请求配置</span></h2><p><span>这些是创建请求时可以用的配置选项。只有 </span><code>url</code><span> 是必需的。如果没有指定 </span><code>method</code><span>,请求将默认使用 </span><code>get</code><span> 方法。 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `url` 是用于请求的服务器 URL</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">url</span>: <span class="cm-string">'/user'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `method` 是创建请求时使用的方法</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">method</span>: <span class="cm-string">'get'</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">baseURL</span>: <span class="cm-string">'https://some-domain.com/api/'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `transformRequest` 允许在向服务器发送前,修改请求数据</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">transformRequest</span>: [<span class="cm-keyword">function</span> (<span class="cm-def">data</span>, <span class="cm-def">headers</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 对 data 进行任意转换处理</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">data</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }],</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `transformResponse` 在传递给 then/catch 前,允许修改响应数据</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">transformResponse</span>: [<span class="cm-keyword">function</span> (<span class="cm-def">data</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 对 data 进行任意转换处理</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">data</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }],</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `headers` 是即将被发送的自定义请求头</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">headers</span>: {<span class="cm-string">'X-Requested-With'</span>: <span class="cm-string">'XMLHttpRequest'</span>},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `params` 是即将与请求一起发送的 URL 参数</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 必须是一个无格式对象(plain object)或 URLSearchParams 对象</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">params</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">ID</span>: <span class="cm-number">12345</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `paramsSerializer` 是一个负责 `params` 序列化的函数</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">paramsSerializer</span>: <span class="cm-keyword">function</span>(<span class="cm-def">params</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">Qs</span>.<span class="cm-property">stringify</span>(<span class="cm-variable-2">params</span>, {<span class="cm-property">arrayFormat</span>: <span class="cm-string">'brackets'</span>})</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `data` 是作为请求主体被发送的数据</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 在没有设置 `transformRequest` 时,必须是以下类型之一:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// - 浏览器专属:FormData, File, Blob</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// - Node 专属: Stream</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">data</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">firstName</span>: <span class="cm-string">'Fred'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 如果请求话费了超过 `timeout` 的时间,请求将被中断</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">timeout</span>: <span class="cm-number">1000</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `withCredentials` 表示跨域请求时是否需要使用凭证</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">withCredentials</span>: <span class="cm-atom">false</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `adapter` 允许自定义处理请求,以使测试更轻松</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">adapter</span>: <span class="cm-keyword">function</span> (<span class="cm-def">config</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">/* ... */</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `auth` 表示应该使用 HTTP 基础验证,并提供凭据</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">auth</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">username</span>: <span class="cm-string">'janedoe'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">password</span>: <span class="cm-string">'s00pers3cret'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">responseType</span>: <span class="cm-string">'json'</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `responseEncoding` indicates encoding to use for decoding responses</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// Note: Ignored for `responseType` of 'stream' or client-side requests</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">responseEncoding</span>: <span class="cm-string">'utf8'</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">xsrfCookieName</span>: <span class="cm-string">'XSRF-TOKEN'</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `xsrfHeaderName` is the name of the http header that carries the xsrf token value</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">xsrfHeaderName</span>: <span class="cm-string">'X-XSRF-TOKEN'</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `onUploadProgress` 允许为上传处理进度事件</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">onUploadProgress</span>: <span class="cm-keyword">function</span> (<span class="cm-def">progressEvent</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// Do whatever you want with the native progress event</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `onDownloadProgress` 允许为下载处理进度事件</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">onDownloadProgress</span>: <span class="cm-keyword">function</span> (<span class="cm-def">progressEvent</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 对原生进度事件的处理</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `maxContentLength` 定义允许的响应内容的最大尺寸</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">maxContentLength</span>: <span class="cm-number">2000</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">validateStatus</span>: <span class="cm-keyword">function</span> (<span class="cm-def">status</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">status</span> <span class="cm-operator">>=</span> <span class="cm-number">200</span> <span class="cm-operator">&&</span> <span class="cm-variable-2">status</span> <span class="cm-operator"><</span> <span class="cm-number">300</span>; <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 如果设置为0,将不会 follow 任何重定向</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">maxRedirects</span>: <span class="cm-number">5</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `socketPath` defines a UNIX Socket to be used in node.js.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// e.g. '/var/run/docker.sock' to send requests to the docker daemon.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// Only either `socketPath` or `proxy` can be specified.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// If both are specified, `socketPath` is used.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">socketPath</span>: <span class="cm-atom">null</span>, <span class="cm-comment">// default</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `keepAlive` 默认没有启用</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">httpAgent</span>: <span class="cm-keyword">new</span> <span class="cm-variable">http</span>.<span class="cm-property">Agent</span>({ <span class="cm-property">keepAlive</span>: <span class="cm-atom">true</span> }),</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">httpsAgent</span>: <span class="cm-keyword">new</span> <span class="cm-variable">https</span>.<span class="cm-property">Agent</span>({ <span class="cm-property">keepAlive</span>: <span class="cm-atom">true</span> }),</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 'proxy' 定义代理服务器的主机名称和端口</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">proxy</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">host</span>: <span class="cm-string">'127.0.0.1'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">port</span>: <span class="cm-number">9000</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">auth</span>: {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">username</span>: <span class="cm-string">'mikeymike'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">password</span>: <span class="cm-string">'rapunz3l'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `cancelToken` 指定用于取消请求的 cancel token</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// (查看后面的 Cancellation 这节了解更多)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">cancelToken</span>: <span class="cm-keyword">new</span> <span class="cm-variable">CancelToken</span>(<span class="cm-keyword">function</span> (<span class="cm-def">cancel</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 3036px;"></div><div class="CodeMirror-gutters" style="display: none; height: 3036px;"></div></div></div></pre><h2><a name="响应结构" class="md-header-anchor"></a><span>响应结构</span></h2><p><span>某个请求的响应包含以下信息 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `data` 由服务器提供的响应</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">data</span>: {},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `status` 来自服务器响应的 HTTP 状态码</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">status</span>: <span class="cm-number">200</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `statusText` 来自服务器响应的 HTTP 状态信息</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">statusText</span>: <span class="cm-string">'OK'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `headers` 服务器响应的头</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">headers</span>: {},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `config` 是为请求提供的配置信息</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">config</span>: {},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 'request'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `request` is the request that generated this response</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// It is the last ClientRequest instance in node.js (in redirects)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// and an XMLHttpRequest instance the browser</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">request</span>: {}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 462px;"></div><div class="CodeMirror-gutters" style="display: none; height: 462px;"></div></div></div></pre><p><span>使用 </span><code>then</code><span> 时,你将接收下面这样的响应 :</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345'</span>)</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">then</span>(<span class="cm-keyword">function</span>(<span class="cm-def">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>.<span class="cm-property">data</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>.<span class="cm-property">status</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>.<span class="cm-property">statusText</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>.<span class="cm-property">headers</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">response</span>.<span class="cm-property">config</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 176px;"></div><div class="CodeMirror-gutters" style="display: none; height: 176px;"></div></div></div></pre><p><span>在使用 </span><code>catch</code><span> 时,或传递 </span><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then'><span>rejection callback</span></a><span> 作为 </span><code>then</code><span> 的第二个参数时,响应可以通过 </span><code>error</code><span> 对象可被使用,正如在</span><a href='https://www.kancloud.cn/yunye/axios/234845#handling-errors'><span>错误处理</span></a><span>这一节所讲。 </span></p><h2><a name="配置默认值" class="md-header-anchor"></a><span>配置默认值</span></h2><p><span>你可以指定将被用在各个请求的配置默认值 </span></p><h3><a name="全局的-axios-默认值" class="md-header-anchor"></a><span>全局的 axios 默认值</span></h3><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">defaults</span>.<span class="cm-property">baseURL</span> <span class="cm-operator">=</span> <span class="cm-string">'https://api.example.com'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">defaults</span>.<span class="cm-property">headers</span>.<span class="cm-property">common</span>[<span class="cm-string">'Authorization'</span>] <span class="cm-operator">=</span> <span class="cm-variable">AUTH_TOKEN</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">defaults</span>.<span class="cm-property">headers</span>.<span class="cm-property">post</span>[<span class="cm-string">'Content-Type'</span>] <span class="cm-operator">=</span> <span class="cm-string">'application/x-www-form-urlencoded'</span>;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 66px;"></div><div class="CodeMirror-gutters" style="display: none; height: 66px;"></div></div></div></pre><h3><a name="自定义实例默认值" class="md-header-anchor"></a><span>自定义实例默认值</span></h3><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Set config defaults when creating the instance</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">instance</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">create</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">baseURL</span>: <span class="cm-string">'https://api.example.com'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Alter defaults after instance has been created</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">instance</span>.<span class="cm-property">defaults</span>.<span class="cm-property">headers</span>.<span class="cm-property">common</span>[<span class="cm-string">'Authorization'</span>] <span class="cm-operator">=</span> <span class="cm-variable">AUTH_TOKEN</span>;</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 154px;"></div><div class="CodeMirror-gutters" style="display: none; height: 154px;"></div></div></div></pre><h3><a name="配置的优先顺序" class="md-header-anchor"></a><span>配置的优先顺序</span></h3><p><span>配置会以一个优先顺序进行合并。这个顺序是:在 </span><code>lib/defaults.js</code><span> 找到的库的默认值,然后是实例的 </span><code>defaults</code><span> 属性,最后是请求的 </span><code>config</code><span> 参数。后者将优先于前者。这里是一个例子: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 使用由库提供的配置的默认值来创建实例</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 此时超时配置的默认值是 `0`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">var</span> <span class="cm-def">instance</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">create</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 覆写库的超时默认值</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 现在,在超时前,所有请求都会等待 2.5 秒</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">instance</span>.<span class="cm-property">defaults</span>.<span class="cm-property">timeout</span> <span class="cm-operator">=</span> <span class="cm-number">2500</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 为已知需要花费很长时间的请求覆写超时设置</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">instance</span>.<span class="cm-property">get</span>(<span class="cm-string">'/longRequest'</span>, {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">timeout</span>: <span class="cm-number">5000</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 264px;"></div><div class="CodeMirror-gutters" style="display: none; height: 264px;"></div></div></div></pre><h2><a name="拦截器" class="md-header-anchor"></a><span>拦截器</span></h2><p><span>在请求或响应被 </span><code>then</code><span> 或 </span><code>catch</code><span> 处理前拦截它们。 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 添加请求拦截器</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">interceptors</span>.<span class="cm-property">request</span>.<span class="cm-property">use</span>(<span class="cm-keyword">function</span> (<span class="cm-def">config</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 在发送请求之前做些什么</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">config</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }, <span class="cm-keyword">function</span> (<span class="cm-def">error</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 对请求错误做些什么</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">Promise</span>.<span class="cm-property">reject</span>(<span class="cm-variable-2">error</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 添加响应拦截器</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">interceptors</span>.<span class="cm-property">response</span>.<span class="cm-property">use</span>(<span class="cm-keyword">function</span> (<span class="cm-def">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 对响应数据做点什么</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">response</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }, <span class="cm-keyword">function</span> (<span class="cm-def">error</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 对响应错误做点什么</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">Promise</span>.<span class="cm-property">reject</span>(<span class="cm-variable-2">error</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 374px;"></div><div class="CodeMirror-gutters" style="display: none; height: 374px;"></div></div></div></pre><p><span>如果你想在稍后移除拦截器,可以这样: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">myInterceptor</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">interceptors</span>.<span class="cm-property">request</span>.<span class="cm-property">use</span>(<span class="cm-keyword">function</span> () {<span class="cm-comment">/*...*/</span>});</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">interceptors</span>.<span class="cm-property">request</span>.<span class="cm-property">eject</span>(<span class="cm-variable">myInterceptor</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 44px;"></div><div class="CodeMirror-gutters" style="display: none; height: 44px;"></div></div></div></pre><p><span>可以为自定义 axios 实例添加拦截器 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">instance</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">create</span>();</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">instance</span>.<span class="cm-property">interceptors</span>.<span class="cm-property">request</span>.<span class="cm-property">use</span>(<span class="cm-keyword">function</span> () {<span class="cm-comment">/*...*/</span>});</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 44px;"></div><div class="CodeMirror-gutters" style="display: none; height: 44px;"></div></div></div></pre><h2><a name="错误处理" class="md-header-anchor"></a><span>错误处理</span></h2><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345'</span>)</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> .<span class="cm-property">catch</span>(<span class="cm-keyword">function</span> (<span class="cm-def">error</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">if</span> (<span class="cm-variable-2">error</span>.<span class="cm-property">response</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// The request was made and the server responded with a status code</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// that falls out of the range of 2xx</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>.<span class="cm-property">response</span>.<span class="cm-property">data</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>.<span class="cm-property">response</span>.<span class="cm-property">status</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>.<span class="cm-property">response</span>.<span class="cm-property">headers</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> } <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable-2">error</span>.<span class="cm-property">request</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// The request was made but no response was received</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// `error.request` is an instance of XMLHttpRequest in the browser and an instance of</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// http.ClientRequest in node.js</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>.<span class="cm-property">request</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> } <span class="cm-keyword">else</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// Something happened in setting up the request that triggered an Error</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">'Error'</span>, <span class="cm-variable-2">error</span>.<span class="cm-property">message</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable-2">error</span>.<span class="cm-property">config</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> });</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 418px;"></div><div class="CodeMirror-gutters" style="display: none; height: 418px;"></div></div></div></pre><p><span>Y可以使用 </span><code>validateStatus</code><span> 配置选项定义一个自定义 HTTP 状态码的错误范围。 </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345'</span>, {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">validateStatus</span>: <span class="cm-keyword">function</span> (<span class="cm-def">status</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable-2">status</span> <span class="cm-operator"><</span> <span class="cm-number">500</span>; <span class="cm-comment">// Reject only if the status code is greater than or equal to 500</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">})</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 110px;"></div><div class="CodeMirror-gutters" style="display: none; height: 110px;"></div></div></div></pre><h2><a name="取消" class="md-header-anchor"></a><span>取消</span></h2><p><span>使用 </span><em><span>cancel token</span></em><span> 取消请求</span></p><blockquote><p><span>Axios 的 cancel token API 基于</span><a href='https://github.com/tc39/proposal-cancelable-promises'><span>cancelable promises proposal</span></a><span>,它还处于第一阶段。 </span></p></blockquote><p><span>可以使用 </span><code>CancelToken.source</code><span> 工厂方法创建 cancel token,像这样: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">CancelToken</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">CancelToken</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">source</span> <span class="cm-operator">=</span> <span class="cm-variable">CancelToken</span>.<span class="cm-property">source</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345'</span>, {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">cancelToken</span>: <span class="cm-variable">source</span>.<span class="cm-property">token</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}).<span class="cm-property">catch</span>(<span class="cm-keyword">function</span>(<span class="cm-def">thrown</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">if</span> (<span class="cm-variable">axios</span>.<span class="cm-property">isCancel</span>(<span class="cm-variable-2">thrown</span>)) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">'Request canceled'</span>, <span class="cm-variable-2">thrown</span>.<span class="cm-property">message</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> } <span class="cm-keyword">else</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// 处理错误</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">post</span>(<span class="cm-string">'/user/12345'</span>, {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">name</span>: <span class="cm-string">'new name'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}, {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">cancelToken</span>: <span class="cm-variable">source</span>.<span class="cm-property">token</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">})</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 取消请求(message 参数是可选的)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">source</span>.<span class="cm-property">cancel</span>(<span class="cm-string">'Operation canceled by the user.'</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 462px;"></div><div class="CodeMirror-gutters" style="display: none; height: 462px;"></div></div></div></pre><p><span>还可以通过传递一个 executor 函数到 </span><code>CancelToken</code><span> 的构造函数来创建 cancel token: </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">CancelToken</span> <span class="cm-operator">=</span> <span class="cm-variable">axios</span>.<span class="cm-property">CancelToken</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">cancel</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user/12345'</span>, {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">cancelToken</span>: <span class="cm-keyword">new</span> <span class="cm-variable">CancelToken</span>(<span class="cm-keyword">function</span> <span class="cm-def">executor</span>(<span class="cm-def">c</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// executor 函数接收一个 cancel 函数作为参数</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">cancel</span> <span class="cm-operator">=</span> <span class="cm-variable-2">c</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> })</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// cancel the request</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">cancel</span>();</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 264px;"></div><div class="CodeMirror-gutters" style="display: none; height: 264px;"></div></div></div></pre><blockquote><p><span>注意: 可以使用同一个 cancel token 取消多个请求 </span></p></blockquote><h2><a name="使用-applicationx-www-form-urlencoded-format" class="md-header-anchor"></a><span>使用 application/x-www-form-urlencoded format</span></h2><p><span>默认情况下,axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。</span></p><h3><a name="浏览器" class="md-header-anchor"></a><span>浏览器</span></h3><p><span>在浏览器中,您可以使用URLSearchParams API,如下所示:</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">params</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URLSearchParams</span>();</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">params</span>.<span class="cm-property">append</span>(<span class="cm-string">'param1'</span>, <span class="cm-string">'value1'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">params</span>.<span class="cm-property">append</span>(<span class="cm-string">'param2'</span>, <span class="cm-string">'value2'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">post</span>(<span class="cm-string">'/foo'</span>, <span class="cm-variable">params</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 88px;"></div><div class="CodeMirror-gutters" style="display: none; height: 88px;"></div></div></div></pre><blockquote><p><span>请注意,所有浏览器都不支持URLSearchParams(请参阅caniuse.com),但可以使用polyfill(确保填充全局环境)。</span></p></blockquote><p><span>或者,您可以使用qs库编码数据:</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">qs</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>(<span class="cm-string">'qs'</span>);</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">post</span>(<span class="cm-string">'/foo'</span>, <span class="cm-variable">qs</span>.<span class="cm-property">stringify</span>({ <span class="cm-string cm-property">'bar'</span>: <span class="cm-number">123</span> }));</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 44px;"></div><div class="CodeMirror-gutters" style="display: none; height: 44px;"></div></div></div></pre><p><span>或者以另一种方式(ES6),</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> <span class="cm-def">qs</span> <span class="cm-keyword">from</span> <span class="cm-string">'qs'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">data</span> <span class="cm-operator">=</span> { <span class="cm-string cm-property">'bar'</span>: <span class="cm-number">123</span> };</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">options</span> <span class="cm-operator">=</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">method</span>: <span class="cm-string">'POST'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">headers</span>: { <span class="cm-string cm-property">'content-type'</span>: <span class="cm-string">'application/x-www-form-urlencoded'</span> },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">data</span>: <span class="cm-variable">qs</span>.<span class="cm-property">stringify</span>(<span class="cm-variable">data</span>),</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">url</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">};</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>(<span class="cm-variable">options</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 198px;"></div><div class="CodeMirror-gutters" style="display: none; height: 198px;"></div></div></div></pre><h3><a name="nodejs" class="md-header-anchor"></a><span>Node.js</span></h3><p><span>在node.js中,您可以使用querystring模块,如下所示:</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="js"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">querystring</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>(<span class="cm-string">'querystring'</span>);</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">post</span>(<span class="cm-string">'http://something.com/'</span>, <span class="cm-variable">querystring</span>.<span class="cm-property">stringify</span>({ <span class="cm-property">foo</span>: <span class="cm-string">'bar'</span> }));</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 44px;"></div><div class="CodeMirror-gutters" style="display: none; height: 44px;"></div></div></div></pre><p><span>您也可以使用qs库。</span></p><h2><a name="semver" class="md-header-anchor"></a><span>Semver</span></h2><p><span>在axios达到1.0版本之前,破坏性更改将以新的次要版本发布。 例如0.5.1和0.5.4将具有相同的API,但0.6.0将具有重大变化。</span></p><h2><a name="promises" class="md-header-anchor"></a><span>Promises</span></h2><p><span>axios 依赖原生的 ES6 Promise 实现而</span><a href='http://caniuse.com/promises'><span>被支持</span></a><span>. 如果你的环境不支持 ES6 Promise,你可以使用 </span><a href='https://github.com/jakearchibald/es6-promise'><span>polyfill</span></a><span>. </span></p><h2><a name="typescript" class="md-header-anchor"></a><span>TypeScript</span></h2><p><span>axios包括TypeScript定义。</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="typescript"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="typescript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 12px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> <span class="cm-def">axios</span> <span class="cm-keyword">from</span> <span class="cm-string">'axios'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">axios</span>.<span class="cm-property">get</span>(<span class="cm-string">'/user?ID=12345'</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 44px;"></div><div class="CodeMirror-gutters" style="display: none; height: 44px;"></div></div></div></pre><h2><a name="资源" class="md-header-anchor"></a><span>资源</span></h2><ul><li><a href='https://github.com/axios/axios/blob/master/CHANGELOG.md'><span>Changelog</span></a></li><li><a href='https://github.com/axios/axios/blob/master/UPGRADE_GUIDE.md'><span>Upgrade Guide</span></a></li><li><a href='https://github.com/axios/axios/blob/master/ECOSYSTEM.md'><span>Ecosystem</span></a></li><li><a href='https://github.com/axios/axios/blob/master/CONTRIBUTING.md'><span>Contributing Guide</span></a></li><li><a href='https://github.com/axios/axios/blob/master/CODE_OF_CONDUCT.md'><span>Code of Conduct</span></a></li></ul><h2><a name="credits" class="md-header-anchor"></a><span>Credits</span></h2><p><span>axios深受Angular提供的、</span><span>$</span><span>http服务的启发。 最终,axios是为了在Angular之外使用而提供独立的类似</span><span>$</span><span>http服的务。</span></p><h2><a name="协议" class="md-header-anchor"></a><span>协议</span></h2><p><span>MIT</span></p></div>
|
||
</body>
|
||
</html> |