Axios 使用说明 |
您所在的位置：网站首页 › axios取消响应 › Axios 使用说明 |
Axios 使用说明
# 浏览器支持       Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔ # 安装 # 包管理 使用 npm： $ npm install axios使用 bower： $ bower install axios使用 yarn： $ yarn add axios使用 pnpm： $ pnpm add axios安装成功后，你可以使用 import 和 require 引入包： import axios, {isCancel, AxiosError} from 'axios';你也可以通过默认导出，因为命名导出只是从 Axios 工厂重新导出： import axios from 'axios'; console.log(axios.isCancel('something'));如果你使用 require 的方式导入，只需要确保 default export 是可用的： const axios = require('axios'); console.log(axios.isCancel('something'));对于在尝试将模块导入自定义或传统环境时出现问题的情况，您可以尝试直接导入模块包： const axios = require('axios/dist/browser/axios.cjs'); // browser commonJS bundle (ES2017) // const axios = require('axios/dist/node/axios.cjs'); // node commonJS bundle (ES2017) # CDN使用 jsDelivr CDN (ES5 UMD 浏览器模块)： 使用解包的 CDN： # 例子提示 为了在使用带有 require() 的 CommonJS 导入时获得 TypeScript 类型（用于开发工具的代码补全），请使用以下方法： import axios from 'axios'; //const axios = require('axios'); // legacy way // Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { // always executed }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .finally(function () { // always executed }); // Want to use async/await? Add the `async` keyword to your outer function/method. async function getUser() { try { const response = await axios.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); } }注意 async/await 是 ECMAScript 2017 的一部分，在 IE 和旧版浏览器中不受支持，因此请谨慎使用。 Performing a POST request axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });执行多个并发请求 function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } Promise.all([getUserAccount(), getUserPermissions()]) .then(function (results) { const acct = results[0]; const perm = results[1]; }); # axios API可以通过配置axios来发出请求。 # axios(config) // Send a POST request axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); // GET request for remote image in node.js axios({ method: 'get', url: 'https://bit.ly/2mTM3nY', responseType: 'stream' }) .then(function (response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) }); # axios(url[, config]) // Send a GET request (default method) axios('/user/12345'); # 请求别名为方便起见，为所有常见请求方法提供了别名。 # axios.request(config) # axios.get(url[, config]) # axios.delete(url[, config]) # axios.head(url[, config]) # axios.options(url[, config]) # axios.post(url[, data[, config]]) # axios.put(url[, data[, config]]) # axios.patch(url[, data[, config]])提示 使用别名的时候，不需要在 config 中指定 url 、 method 以及 data。 # 并发（已弃用）请使用 Promise.all 替换以下用于处理并发请求的辅助函数。 axios.all（可迭代） axios.spread（回调） # 创建实例您可以使用自定义配置创建一个新的 axios 实例。 # axios.create([config]) const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); # 实例方法下面列出了可用的实例方法，特殊配置将与实例配置合并。 # axios#request(config) # axios#get(url[, config]) # axios#delete(url[, config]) # axios#head(url[, config]) # axios#options(url[, config]) # axios#post(url[, data[, config]]) # axios#put(url[, data[, config]]) # axios#patch(url[, data[, config]]) # axios#getUri([config]) # 请求(Request)配置这些是用于发出请求的可用配置选项。 其中，只有 url 是必需的，如果没有明确指定 method 请求方式，那么默认是 GET 请求。 { // `url` is the server URL that will be used for the request url: '/user', // `method` is the request method to be used when making the request method: 'get', // default // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs // to methods of that instance. baseURL: 'https://some-domain.com/api/', // `transformRequest` allows changes to the request data before it is sent to the server // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE' // The last function in the array must return a string or an instance of Buffer, ArrayBuffer, // FormData or Stream // You may modify the headers object. transformRequest: [function (data, headers) { // Do whatever you want to transform the data return data; }], // `transformResponse` allows changes to the response data to be made before // it is passed to then/catch transformResponse: [function (data) { // Do whatever you want to transform the data return data; }], // `headers` are custom headers to be sent headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` are the URL parameters to be sent with the request // Must be a plain object or a URLSearchParams object params: { ID: 12345 }, // `paramsSerializer` is an optional config in charge of serializing `params` paramsSerializer: { encode?: (param: string): string => { /* Do custom ops here and return transformed string */ }, // custom encoder function; sends Key/Values in an iterative fashion serialize?: (params: Record, options?: ParamsSerializerOptions ), // mimic pre 1.x behavior and send entire params object to a custom serializer func. Allows consumer to control how params are serialized. indexes: false // array indexes format (null - no brackets, false (default) - empty brackets, true - brackets with indexes) }, // `data` is the data to be sent as the request body // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH' // When no `transformRequest` is set, must be of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream, Buffer, FormData (form-data package) data: { firstName: 'Fred' }, // syntax alternative to send data into the body // method post // only the value is sent, not the key data: 'Country=Brasil&City=Belo Horizonte', // `timeout` specifies the number of milliseconds before the request times out. // If the request takes longer than `timeout`, the request will be aborted. timeout: 1000, // default is `0` (no timeout) // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default // `adapter` allows custom handling of requests which makes testing easier. // Return a promise and supply a valid response (see lib/adapters/README.md). adapter: function (config) { /* ... */ }, // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. // This will set an `Authorization` header, overwriting any existing // `Authorization` custom headers you have set using `headers`. // Please note that only HTTP Basic auth is configurable through this parameter. // For Bearer tokens and such, use `Authorization` custom headers instead. auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` indicates the type of data that the server will respond with // options are: 'arraybuffer', 'document', 'json', 'text', 'stream' // browser only: 'blob' responseType: 'json', // default // `responseEncoding` indicates encoding to use for decoding responses (Node.js only) // Note: Ignored for `responseType` of 'stream' or client-side requests responseEncoding: 'utf8', // default // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress` allows handling of progress events for uploads // browser & node.js onUploadProgress: function ({loaded, total, progress, bytes, estimated, rate, upload = true}) { // Do whatever you want with the Axios progress event }, // `onDownloadProgress` allows handling of progress events for downloads // browser & node.js onDownloadProgress: function ({loaded, total, progress, bytes, estimated, rate, download = true}) { // Do whatever you want with the Axios progress event }, // `maxContentLength` defines the max size of the http response content in bytes allowed in node.js maxContentLength: 2000, // `maxBodyLength` (Node only option) defines the max size of the http request content in bytes allowed maxBodyLength: 2000, // `validateStatus` defines whether to resolve or reject the promise for a given // HTTP response status code. If `validateStatus` returns `true` (or is set to `null` // or `undefined`), the promise will be resolved; otherwise, the promise will be // rejected. validateStatus: function (status) { return status >= 200 && status { if (options.hostname === "example.com") { options.auth = "user:password"; } }, // `socketPath` defines a UNIX Socket to be used in node.js. // e.g. '/var/run/docker.sock' to send requests to the docker daemon. // Only either `socketPath` or `proxy` can be specified. // If both are specified, `socketPath` is used. socketPath: null, // default // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http // and https requests, respectively, in node.js. This allows options to be added like // `keepAlive` that are not enabled by default. httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // `proxy` defines the hostname, port, and protocol of the proxy server. // You can also define your proxy using the conventional `http_proxy` and // `https_proxy` environment variables. If you are using environment variables // for your proxy configuration, you can also define a `no_proxy` environment // variable as a comma-separated list of domains that should not be proxied. // Use `false` to disable proxies, ignoring environment variables. // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and // supplies credentials. // This will set an `Proxy-Authorization` header, overwriting any existing // `Proxy-Authorization` custom headers you have set using `headers`. // If the proxy server uses HTTPS, then you must set the protocol to `https`. proxy: { protocol: 'https', host: '127.0.0.1', // hostname: '127.0.0.1' // Takes precedence over 'host' if both are defined port: 9000, auth: { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` specifies a cancel token that can be used to cancel the request // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }), // an alternative way to cancel Axios requests using AbortController signal: new AbortController().signal, // `decompress` indicates whether or not the response body should be decompressed // automatically. If set to `true` will also remove the 'content-encoding' header // from the responses objects of all decompressed responses // - Node only (XHR cannot turn off decompression) decompress: true // default // `insecureHTTPParser` boolean. // Indicates where to use an insecure HTTP parser that accepts invalid HTTP headers. // This may allow interoperability with non-conformant HTTP implementations. // Using the insecure parser should be avoided. // see options https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http_request_url_options_callback // see also https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/#strict-http-header-parsing-none insecureHTTPParser: undefined // default // transitional options for backward compatibility that may be removed in the newer versions transitional: { // silent JSON parsing mode // `true` - ignore JSON parsing errors and set response.data to null if parsing failed (old behaviour) // `false` - throw SyntaxError if JSON parsing failed (Note: responseType must be set to 'json') silentJSONParsing: true, // default value for the current Axios version // try to parse the response string as JSON even if `responseType` is not 'json' forcedJSONParsing: true, // throw ETIMEDOUT error instead of generic ECONNABORTED on request timeouts clarifyTimeoutError: false, }, env: { // The FormData class to be used to automatically serialize the payload into a FormData object FormData: window?.FormData || global?.FormData }, formSerializer: { visitor: (value, key, path, helpers) => {}; // custom visitor function to serialize form values dots: boolean; // use dots instead of brackets format metaTokens: boolean; // keep special endings like {} in parameter key indexes: boolean; // array indexes format null - no brackets, false - empty brackets, true - brackets with indexes }, // http adapter only (node.js) maxRate: [ 100 * 1024, // 100KB/s upload limit, 100 * 1024 // 100KB/s download limit ] } # 响应(Response)结构请求的响应包含以下信息。 { // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the HTTP headers that the server responded with // All header names are lowercase and can be accessed using the bracket notation. // Example: `response.headers['content-type']` headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance in the browser request: {} }使用 then 时，您将收到如下响应： axios.get('/user/12345') .then(function (response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });当使用 catch或传递一个 rejection callback (opens new window) 作为 then 的第二个参数时， 如 错误处理 部分所述，响应将通过 error 对象提供。 # 默认配置您可以指定将应用于每个请求的配置默认值。 # 全局 axios 默认值设置 axios.defaults.baseURL = 'https://api.example.com'; // Important: If axios is used with multiple domains, the AUTH_TOKEN will be sent to all of them. // See below for an example using Custom instance defaults instead. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; # 自定义实例默认值设置 // Set config defaults when creating the instance const instance = axios.create({ baseURL: 'https://api.example.com' }); // Alter defaults after instance has been created instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; # 配置优先顺序配置将按优先顺序合并。 顺序是在 lib/defaults.js (opens new window) 中的默认值，然后是实例的defaults属性 ，最后是请求的 config 参数，后者将覆盖前者。 // Create an instance using the config defaults provided by the library // At this point the timeout config value is `0` as is the default for the library const instance = axios.create(); // Override timeout default for the library // Now all requests using this instance will wait 2.5 seconds before timing out instance.defaults.timeout = 2500; // Override timeout for this request as it's known to take a long time instance.get('/longRequest', { timeout: 5000 }); # 拦截器您可以在请求或响应被 then 或 catch 处理之前拦截它们。 // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data return response; }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error); });如果你打算在后面移除拦截器，你可以这么做： const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);你也可以通过 clear 函数移除所有的拦截器。 const instance = axios.create(); instance.interceptors.request.use(function () {/*...*/}); instance.interceptors.request.clear(); // Removes interceptors from requests instance.interceptors.response.use(function () {/*...*/}); instance.interceptors.response.clear(); // Removes interceptors from responsesaxios 的新实例可以通过以下方式添加拦截器： const instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});当您添加请求拦截器时，默认情况下它们被假定为异步的。 在主线程被阻塞时执行 axios 请求时可能会导致延迟（在后台创建了一个 promise 拦截器和您的请求被放在调用堆栈的底部）。 如果您的请求拦截器是同步的，您可以添加一个标志到 options 对象，它将告诉 axios 同步运行代码并避免请求执行中的任何延迟。 axios.interceptors.request.use(function (config) { config.headers.test = 'I am only a header!'; return config; }, null, { synchronous: true });如果你想根据运行时检查执行特定的拦截器，您可以将 runWhen 函数添加到选项中。 当且仅当返回 runWhen 的值为 false的时候，拦截器不会被执行。 当您有一个只需要在特定时间运行的异步请求拦截器，该函数将通过该配置调用（不要忘记您也可以将自己的参数绑定到它）。 function onGetCall(config) { return config.method === 'get'; } axios.interceptors.request.use(function (config) { config.headers.test = 'special get headers'; return config; }, null, { runWhen: onGetCall }); # 多拦截器假设你添加了多个响应(Response)拦截器，当响应完成之后 每个拦截器都会被指型 它们会按照添加的顺序执行 只返回最后一个拦截器的处理结果 每个拦截器都可以接收到其前一个拦截器的处理结果 and when the fulfillment-interceptor throws then the following fulfillment-interceptor is not called then the following rejection-interceptor is called once caught, another following fulfill-interceptor is called again (just like in a promise chain).查阅拦截器测试用例 来查看上面描述的内容. # 处理错误默认情况下，拒绝所有返回状态代码超出 2xx 范围的响应，并将其视为错误。 axios.get('/user/12345') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); });使用 validateStatus 配置选项，您可以覆盖默认条件（status >= 200 && status < 300）并定义应该抛出错误的 HTTP 代码。 axios.get('/user/12345', { validateStatus: function (status) { return status console.log(data));在 node.js 构建中，默认使用 (form-data (opens new window)) polyfill。 您可以通过设置 env.FormData 配置变量来重载 FormData 类， 但在大多数情况下你可能不需要它： const axios = require('axios'); var FormData = require('form-data'); axios.post('https://httpbin.org/post', {x: 1, buf: new Buffer(10)}, { headers: { 'Content-Type': 'multipart/form-data' } }).then(({data}) => console.log(data));Axios FormData 序列化器支持一些特殊的结尾来执行以下操作： {} - 使用 JSON.stringify 序列化值 [] - 将类似数组的对象解包为具有相同键的单独字段提示 unwrap/expand 操作将默认用于数组和 FileList 对象 FormData 序列化器通过 config.formSerializer: object 属性支持额外的选项来处理一些罕见的情况： visitor: Function - 将被递归调用以序列化数据对象的用户定义的访问者函数 按照自定义规则添加到 FormData 对象。 dots: boolean = false - 使用点符号而不是括号来序列化数组和对象； metaTokens: boolean = true - 在 FormData 键中添加特殊结尾（例如 user{}: '{"name": "John"}'）。 后端正文解析器可能会使用此元信息自动将值解析为 JSON。 indexes: null|false|true = false - 控制如何将索引添加到flat array-like objects 的展开键 null - 不要添加方括号（arr: 1、arr: 2、arr: 3） false（默认）- 添加空括号（arr[]: 1、arr[]: 2、arr[]: 3） true - 添加带索引的括号（arr[0]: 1、arr[1]: 2、arr[2]: 3）假设我们有这样一个对象： const obj = { x: 1, arr: [1, 2, 3], arr2: [1, [2], 3], users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}], 'obj2{}': [{x:1}] };以下步骤将由 Axios 序列化器在内部执行： const formData = new FormData(); formData.append('x', '1'); formData.append('arr[]', '1'); formData.append('arr[]', '2'); formData.append('arr[]', '3'); formData.append('arr2[0]', '1'); formData.append('arr2[1][0]', '2'); formData.append('arr2[2]', '3'); formData.append('users[0][name]', 'Peter'); formData.append('users[0][surname]', 'Griffin'); formData.append('users[1][name]', 'Thomas'); formData.append('users[1][surname]', 'Anderson'); formData.append('obj2{}', '[{"x":1}]');当 Content-Type header 预设为 multipart/form-data 的时候， Axios 支持以下快捷方法：postForm、putForm、patchForm。 # 提交文件您可以轻松提交单个文件： await axios.postForm('https://httpbin.org/post', { 'myVar' : 'foo', 'file': document.querySelector('#fileInput').files[0] });或使用 multipart/form-data 提交多个文件: await axios.postForm('https://httpbin.org/post', { 'files[]': document.querySelector('#fileInput').files });FileList 可以直接传递对象 await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)所有文件都将使用相同的字段名称发送： files[]. # 🆕 HTML 表单提交 (仅限浏览器)将 HTML 表单元素作为有效 payload 传递，以将其作为 multipart/form-data 内容提交。 await axios.postForm('https://httpbin.org/post', document.querySelector('#htmlForm'));FormData 和 HTMLForm 对象也可以通过将 Content-Type 标头显式设置为 application/json 来发送 JSON 格式的数据： await axios.post('https://httpbin.org/post', document.querySelector('#htmlForm'), { headers: { 'Content-Type': 'application/json' } })例如： Value 1 Value 2 Value 3将作为以下 JSON 对象提交： { "foo": "1", "deep": { "prop": { "spaced": "3" } }, "baz": [ "4", "5" ], "user": { "age": "value2" } }当前不支持将 Blobs/Files 作为 JSON (base64) 发送。 # 🆕 进度捕捉axios 支持浏览器和 Node 环境来捕获请求上传/下载的进度。 await axios.post(url, data, { onUploadProgress: function (axiosProgressEvent) { /*{ loaded: number; total?: number; progress?: number; // in range [0..1] bytes: number; // how many bytes have been transferred since the last trigger (delta) estimated?: number; // estimated time in seconds rate?: number; // upload speed in bytes upload: true; // upload sign }*/ }, onDownloadProgress: function (axiosProgressEvent) { /*{ loaded: number; total?: number; progress?: number; bytes: number; estimated?: number; rate?: number; // download speed in bytes download: true; // download sign }*/ } });您还可以在 node.js 中跟踪流上传/下载进度： const {data} = await axios.post(SERVER_URL, readableStream, { onUploadProgress: ({progress}) => { console.log((progress * 100).toFixed(2)); }, headers: { 'Content-Length': contentLength }, maxRedirects: 0 // avoid buffering the entire stream });提示 目前在 node.js 环境中不支持捕获 FormData 上传进度。 警告 建议通过设置 maxRedirects: 0 来禁用重定向以在 node.js 环境中上传流， 因为 follow-redirects 包将在 RAM 中缓冲整个流，而不遵循“背压”算法。 # 🆕 速度限制只能为 http 适配器（node.js）设置下载和上传速率限制： const {data} = await axios.post(LOCAL_SERVER_URL, myBuffer, { onUploadProgress: ({progress, rate}) => { console.log(`Upload [${(progress*100).toFixed(2)}%]: ${(rate / 1024).toFixed(2)}KB/s`) }, maxRate: [100 * 1024], // 100KB/s limit }); # Semver在 axios 到达 1.0 版本之前，小版本迭代和大版本迭代将会同时进行，例如 0.5.1 和 0.5.4 的API是相同的，但是 0.6.0 将会出现差异。 # Promisesaxios 依赖于 支持 (opens new window) 的原生 ES6 Promise 实现。 如果您的环境不支持 ES6 Promises，您可以 polyfill (opens new window)。 # TypeScriptaxios 包括 TypeScript (opens new window) 定义和 axios 错误的类型保护。 let user: User = null; try { const { data } = await axios.get('/user?ID=12345'); user = data.userDetails; } catch (error) { if (axios.isAxiosError(error)) { handleAxiosError(error); } else { handleUnexpectedError(error); } }因为 axios dual 使用 ESM 默认导出和 CJS module.exports 发布，所以有一些注意事项。 推荐的设置是使用"moduleResolution": "node16"（这由"module": "node16"指定）。 请注意，这需要 TypeScript 4.7 或更高版本。 如果使用 ESM，那么你的配置应该没什么问题。 如果将 TypeScript 编译为 CJS 并且不能使用 "moduleResolution": "node 16"，则必须启用 esModuleInterop。 如果您使用 TypeScript 来类型检查 CJS JavaScript 代码，你只能选择使用 "moduleResolution": "node16"。 # 在线尝试您可以使用 Gitpod —— 一个在线的 IDE（开源免费）来在线贡献或运行示例。
axios 项目深受 AngularJS (opens new window) 中提供的 $http 服务 (opens new window) 的启发。 最终，axios 致力于提供一个独立的类似于 $http 的服务，以便在 AngularJS 之外使用。 # 许可MIT |
(opens new window)【本文地址】