浏览器支持

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 浏览器模块)：

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

使用解包的 CDN：

<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

例子

提示

为了在使用带有 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<string, any>, 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 < 300; // default
  },

  // `maxRedirects` defines the maximum number of redirects to follow in node.js.
  // If set to 0, no redirects will be followed.
  maxRedirects: 21, // default

  // `beforeRedirect` defines a function that will be called before redirect.
  // Use this to adjust the request options upon redirecting,
  // to inspect the latest response headers,
  // or to cancel the request by throwing an error
  // If maxRedirects is set to 0, `beforeRedirect` is not used.
  beforeRedirect: (options, { headers }) => {
    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 responses

axios 的新实例可以通过以下方式添加拦截器：

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 < 500; // Resolve only if the status code is less than 500
  }
})

使用 toJSON 可以得到一个对象，其中包含有关 HTTP 错误的更多信息。

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

取消请求

AbortController

从 v0.22.0 版本开始，Axios 支持通过 AbortController 来取消请求:

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

CancelToken 👎deprecated

当然，你也可以继续使用 CancelToken 的方式来取消请求.

axios cancel token API 是基于 withdrawn cancellable promises proposal (opens new window) 实现的。

这个API已经在 v0.22.0 版本被标记为过期，最好不要在新项目中使用该API。

你可以使用 CancelToken.source 工厂来创建一个 cancel token，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

你也可以使用 new 的方式通过 CancelToken 的构造函数来创建一个 cancel token:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

提示

你可以使用同一个 cancel token 来取消多个请求。

如果 cancel token 在发起请求前已经被标记为取消状态，那么请求不会被真正发起。

在过渡期间，你可以同时使用这两种方法来取消请求。

使用 application/x-www-form-urlencoded 格式

URLSearchParams

默认情况下，axios 将会把 JavaScript 对象序列化成 JSON 格式。 如果想要使用 application/x-www-form-urlencoded 格式 (opens new window) 发送数据，您可以使用 URLSearchParams (opens new window) API，大部分浏览器都支持这种请求方式。而在 Node 环境中，则从 v10 版本开始支持（发布于2018年）。

const params = new URLSearchParams({ foo: 'bar' });
params.append('extraparam', 'value');
axios.post('/foo', params);

Query string (老版本浏览器)

为了与非常老的浏览器进行兼容，有一个 polyfill (opens new window) 可用（确保对全局环境进行 polyfill）。

或者，您可以使用 qs (opens new window) 库对数据进行编码：

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

老版本 Node.js

老版本的 Node.js 引擎中, 你可以使用 querystring (opens new window) 模块，如下所示:

const querystring = require('querystring');
axios.post('https://something.com/', querystring.stringify({ foo: 'bar' }));

你也可以使用 qs (opens new window) 库.

提示

如果您需要对嵌套对象进行字符串化，则最好使用 qs 库，因为 querystring 方法有一些已知的问题 (opens new window)。

🆕 自动序列化为 URLSearchParams

如果 content-type header 设置为“application/x-www-form-urlencoded”，axios 会自动将数据对象序列化为 urlencoded 格式。

const data = {
  x: 1,
  arr: [1, 2, 3],
  arr2: [1, [2], 3],
  users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
};

await axios.postForm('https://postman-echo.com/post', data,
  {headers: {'content-type': 'application/x-www-form-urlencoded'}}
);

服务端将会收到一下格式的数据：

  {
    x: '1',
    'arr[]': [ '1', '2', '3' ],
    'arr2[0]': '1',
    'arr2[1][0]': '2',
    'arr2[2]': '3',
    'arr3[]': [ '1', '2', '3' ],
    'users[0][name]': 'Peter',
    'users[0][surname]': 'griffin',
    'users[1][name]': 'Thomas',
    'users[1][surname]': 'Anderson'
  }

如果你的后端 body-parser（比如 express.js 的 body-parser）支持嵌套对象解码，你将在服务器端自动获得相同的对象：

  var app = express();

  app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies

  app.post('/', function (req, res, next) {
     // echo body as JSON
     res.send(JSON.stringify(req.body));
  });

  server = app.listen(3000);

使用 multipart/form-data 格式

FormData

要将数据作为 multipart/formdata 发送，您需要将 formData 实例作为有效payload传递过去。不需要设置Content-Type标头，因为 Axios 会根据 payload 类型进行自动判断。

const formData = new FormData();
formData.append('foo', 'bar');

axios.post('https://httpbin.org/post', formData);

在 Node.js 中, 你可以使用 form-data (opens new window) 库，如下所示：

const FormData = require('form-data');

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form)

🆕 自动序列化成 FormData

从 v0.27.0 开始，如果请求的 Content-Type 头设置为 multipart/form-data，Axios 支持自动将对象序列化为 FormData 对象。

以下请求将以 FormData 格式（浏览器和 Node.js）提交数据：

import axios from 'axios';

axios.post('https://httpbin.org/post', {x: 1}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(({data}) => 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'
  }
})

例如：

<form id="form">
  <input type="text" name="foo" value="1">
  <input type="text" name="deep.prop" value="2">
  <input type="text" name="deep prop spaced" value="3">
  <input type="text" name="baz" value="4">
  <input type="text" name="baz" value="5">

  <select name="user.age">
    <option value="value1">Value 1</option>
    <option value="value2" selected>Value 2</option>
    <option value="value3">Value 3</option>
  </select>

  <input type="submit" value="Save">
</form>

将作为以下 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 将会出现差异。

Promises

axios 依赖于 支持 (opens new window) 的原生 ES6 Promise 实现。 如果您的环境不支持 ES6 Promises，您可以 polyfill (opens new window)。

TypeScript

axios 包括 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（开源免费）来在线贡献或运行示例。

(opens new window)

资源

• Changelog (opens new window)
• Ecosystem (opens new window)
• Contributing Guide (opens new window)
• Code of Conduct (opens new window)

感谢

axios 项目深受 AngularJS (opens new window) 中提供的 $http 服务 (opens new window) 的启发。

最终，axios 致力于提供一个独立的类似于 $http 的服务，以便在 AngularJS 之外使用。

许可

MIT