axios中文文档（完全中文翻译）

由于使用网上一些翻译文档时发现，内容多被广告隔离成小块。用起来有点不方便同时夹杂部分英文。于是索性把 axios 自己翻译了一遍，贡献给大家便查。

原文档地址—— 官方github地址：https://github.com/axios/axios

本译文地址：https://blog.csdn.net/qq_28550263/article/details/122537980

---

基于 Promise 的用于浏览器和 node.js 的 HTTP 客户端

目录

• 1. 特征
• 2. 浏览器支持
• 3. 安装
• 4. 例子
• 5. Axios API
  • 5.1. 请求方法别名
  • 5.2. 并发 (弃用)
  • 5.3. 创建一个实例
  • 5.4. 实例方法
• 6. 请求配置
• 7. 响应结构
• 8. 配置默认值
  • 12.1 axios 全局默认值
  • 12.2 用户实例默认值
  • 12.3 配置优先顺序
• 9. 拦截器
  • 9.1 多个拦截器
• 10. 错误处理
• 11. 取消
• 12. 请求体编码
  • 12.1 浏览器
  • 12.2 Node.js
    • 12.2.1 Query 字符串
    • 12.2.2 Form 数据
• 13. 语义化
• 14. Promises
• 15. TypeScript
• 16. 资源
• 17. Credits
• 18. 许可证

---

1. 特征

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

2. 浏览器支持

最新 ✔	最新 ✔	最新 ✔	最新 ✔	最新 ✔	11 ✔

3. 安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

使用 jsDelivr CDN:

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

使用 unpkg CDN:

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

4. 例子

注意： CommonJS 用法

为了在使用带有 require() 的CommonJS导入时获得TypeScript类型(用于intellisense /自动完成)，请使用以下方法:

const axios = require('axios').default;// axios. will now provide autocomplete and parameter typings

发起一个 GET 请求：

const axios = require('axios');// 向具有给定“ID”的用户发起请求axios.get('/user?ID=12345')  .then(function (response) {    // 处理成功    console.log(response);  })  .catch(function (error) {    // 处理错误    console.log(error);  })  .then(function () {    // 始终执行  });// 可选地，上述请求也可以按如下方式完成:axios.get('/user', {    params: {      ID: 12345    }  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  })  .then(function () {    // 始终执行  });  // 想使用 async/await 吗？ 添加 `async` 关键字到你的函数/方法外部async function getUser() {  try {    const response = await axios.get('/user?ID=12345');    console.log(response);  } catch (error) {    console.error(error);  }}

注意: async/await 是 ECMAScript 2017 的一部分，在 Internet Explorer 和较旧的浏览器中不支持，因此请谨慎使用。

发起一个 POST 请求：

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];  });

5. axios API

可以通过向 axios 传递相关配置来创建请求

axios(config)

// 发送 POST 请求axios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});// 在 node.js 中使用 GET 请求远程图片axios({  method: 'get',  url: 'http://bit.ly/2mTM3nY',  responseType: 'stream'})  .then(function (response) {    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))  });

axios(url[, config])

// 发起一个 GET 请求（默认方法）axios('/user/12345');

5.1 请求方法别名

为了方便起见，已经为所有支持的请求方法提供了别名：

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

注意

使用别名方法时，不需要在配置中指定 url, method,和 data 属性。

5.2 并发 (弃用)

请使用 Promise.all来替换一下函数

处理并发请求的助手函数。

axios.all(iterable) axios.spread(callback)

5.3 创建一个实例

你可以使用自定义配置创建 axios 的新实例。

axios.create([config])

const instance = axios.create({  baseURL: 'https://some-domain.com/api/',  timeout: 1000,  headers: {'X-Custom-Header': 'foobar'}});

5.4 实例方法

下面列出了可用的实例方法。指定的配置将与实例配置合并。

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

6. 请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

{  // `url` 是用于请求的服务器 URL  url: '/user',  // `method` 是创建请求时使用的方法  method: 'get', // 默认值  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL  baseURL: 'https://some-domain.com/api/',  // `transformRequest` 允许在向服务器发送前，修改请求数据  // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream  // 你可以修改请求头。  transformRequest: [function (data, headers) {    // 对发送的 data 进行任意转换处理    return data;  }],  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据  transformResponse: [function (data) {    // 对接收的 data 进行任意转换处理    return data;  }],  // 自定义请求头  headers: {'X-Requested-With': 'XMLHttpRequest'},  // `params` 是与请求一起发送的 URL 参数  // 必须是一个简单对象或 URLSearchParams 对象  params: {    ID: 12345  },  // `paramsSerializer`是可选方法，主要用于序列化`params`  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)  paramsSerializer: function (params) {    return Qs.stringify(params, {arrayFormat: 'brackets'})  },  // `data` 是作为请求体被发送的数据  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams  // - 浏览器专属: FormData, File, Blob  // - Node 专属: Stream, Buffer  data: {    firstName: 'Fred'  },    // 发送请求体数据的可选语法  // 请求方式 post  // 只有 value 会被发送，key 则不会  data: 'Country=Brasil&City=Belo Horizonte',  // `timeout` 指定请求超时的毫秒数。  // 如果请求时间超过 `timeout` 的值，则请求会被中断  timeout: 1000, // 默认值是 `0` (永不超时)  // `withCredentials` 表示跨域请求时是否需要使用凭证  withCredentials: false, // default  // `adapter` 允许自定义处理请求，这使测试更加容易。  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。  adapter: function (config) {    /* ... */  },  // `auth` HTTP Basic Auth (参考 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Authentication )  auth: {    username: 'janedoe',    password: 's00pers3cret'  },  // `responseType` 表示浏览器将要响应的数据类型  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'  // 浏览器专属：'blob'  responseType: 'json', // 默认值  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)  // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求  // Note: Ignored for `responseType` of 'stream' or client-side requests  responseEncoding: 'utf8', // 默认值  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称  xsrfCookieName: 'XSRF-TOKEN', // 默认值  // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值  // `onUploadProgress` 允许为上传处理进度事件  // 浏览器专属  onUploadProgress: function (progressEvent) {    // 处理原生进度事件  },  // `onDownloadProgress` 允许为下载处理进度事件  // 浏览器专属  onDownloadProgress: function (progressEvent) {    // 处理原生进度事件  },  // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数  maxContentLength: 2000,  // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数  maxBodyLength: 2000,  // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，  // 则promise 将会 resolved，否则是 rejected。  validateStatus: function (status) {    return status >= 200 && status < 300; // 默认值  },  // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。  // 如果设置为0，则不会进行重定向  maxRedirects: 5, // 默认值  // `socketPath` 定义了在node.js中使用的UNIX套接字。  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。  // 只能指定 `socketPath` 或 `proxy` 。  // 若都指定，这使用 `socketPath` 。  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` 定义了代理服务器的主机名，端口和协议。  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。  // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。  // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。  // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`  proxy: {    protocol: 'https',    host: '127.0.0.1',    port: 9000,    auth: {      username: 'mikeymike',      password: 'rapunz3l'    }  },  // see https://axios-http.com/zh/docs/cancellation  cancelToken: new CancelToken(function (cancel) {  }),  // `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 // 默认值}

7. 响应结构

请求的响应包含以下信息。

{  // `data` 由服务器提供的响应  data: {},  // `status` 来自服务器响应的 HTTP 状态码  status: 200,  // `statusText` 来自服务器响应的 HTTP 状态信息  statusText: 'OK',  // `headers` 是服务器响应头  // 所有的 header 名称都是小写，而且可以使用方括号语法访问  // 例如: `response.headers['content-type']`  headers: {},  // `config` 是 `axios` 请求的配置信息  config: {},  // `request` 是生成此响应的请求  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，  // 在浏览器中则是 XMLHttpRequest 实例  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 作为 then 的第二个参数，如错误处理 部分中所述，可以通过“错误”对象获得响应

8. 配置默认值

你可以指定将应用于每个请求的配置默认值。

axios 全局默认值

axios.defaults.baseURL = 'https://api.example.com';// 重要：如果axios与多个域一起使用，AUTH_TOKEN将被发送到所有域。// 请看下面的例子使用用户实例默认值axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

用户实例默认值

// 创建实例时配置默认值const instance = axios.create({  baseURL: 'https://api.example.com'});// 创建实例后修改默认值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置优先顺序

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子。

// 使用库提供的默认配置创建实例// 此时超时配置的默认值是 `0`const instance = axios.create();// 重写库的超时默认值// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时instance.defaults.timeout = 2500;// 重写此请求的超时时间，因为该请求需要很长时间instance.get('/longRequest', {  timeout: 5000});

9. 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器axios.interceptors.request.use(function (config) {    // 在发送请求之前做些什么    return config;  }, function (error) {    // 对请求错误做些什么    return Promise.reject(error);  });// 添加响应拦截器axios.interceptors.response.use(function (response) {    // 2xx 范围内的状态码都会触发该函数。    // 对响应数据做点什么    return response;  }, function (error) {    // 超出 2xx 范围的状态码都会触发该函数。    // 对响应错误做点什么    return Promise.reject(error);  });

如果你以后需要移除拦截器，你可以。

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});axios.interceptors.request.eject(myInterceptor);

可以给自定义的 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时，才会执行拦截器。该函数将与 config 对象一起调用(不要忘记，您也可以将自己的参数绑定到它。)当您有一个只需要在特定时间运行的异步请求拦截器时，这可能会很方便。

function onGetCall(config) {  return config.method === 'get';}axios.interceptors.request.use(function (config) {  config.headers.test = 'special get headers';  return config;}, null, { runWhen: onGetCall });

多个拦截器

假设您添加了多个响应拦截器，并且当响应完成时：

• 然后执行每个拦截器
• 然后按照添加的顺序执行
• 那么只返回最后一个拦截器的结果
• 然后每个拦截器都会收到它的前一个拦截器的结果
• 当实现拦截器抛出：
  • 则不调用下面的实现拦截器
  • 然后调用下面的拒绝拦截器
  • 一旦被捕获，就会再次调用另一个后续的complex-interceptor(就像在一个承诺链中一样)。

阅读the interceptor tests，查看代码中的所有内容。

10. 错误处理

axios.get('/user/12345')  .catch(function (error) {    if (error.response) {      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围      console.log(error.response.data);      console.log(error.response.status);      console.log(error.response.headers);    } else if (error.request) {      // 请求已经成功发起，但没有收到响应      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，      // 而在node.js中是 http.ClientRequest 的实例      console.log(error.request);    } else {      // 发送请求时出了点问题      console.log('Error', error.message);    }    console.log(error.config);  });

使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。

axios.get('/user/12345', {  validateStatus: function (status) {    return status < 500; // 处理状态码小于500的情况  }})

使用 toJSON 可以获取更多关于HTTP错误的信息。

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

11. 取消

使用 cancel token 取消一个请求。

Axios 的 cancel token API 是基于 可取消的 Promises 提案。

可以使用 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 {    // 处理错误  }});axios.post('/user/12345', {  name: 'new name'}, {  cancelToken: source.token})// 取消请求（message 参数是可选的）source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;let cancel;axios.get('/user/12345', {  cancelToken: new CancelToken(function executor(c) {    //executor 函数接收一个 cancel 函数作为参数    cancel = c;  })});// 取消请求cancel();

注意: 可以使用同一个 cancel token 取消多个请求。

Axios支持 AbortController以 fetch API 的方式中止请求:

const controller = new AbortController();axios.get('/foo/bar', {   signal: controller.signal}).then(function(response) {   //...});// 取消请求controller.abort()

注意： 您可以使用同一个取消 token/abort 控制器取消多个请求。如果取消令牌在启动Axios请求时已经被取消，则该请求会立即被取消，而不会尝试进行任何真正的请求。

12. 请求体编码

默认情况下，axios将 JavaScript 对象序列化为 JSON 。 要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

浏览器

在浏览器中，可以使用URLSearchParams API，如下所示：

const params = new URLSearchParams();params.append('param1', 'value1');params.append('param2', 'value2');axios.post('/foo', params);

请注意，不是所有的浏览器(参见 caniuse.com)都支持 URLSearchParams ，但是可以使用polyfill (确保 polyfill 全局环境)

或者, 您可以使用qs 库编码数据:

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

或使用另一种·方法 (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

Query 字符串

在 node.js 中， 可以使用 querystring 模块，如下所示:

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

或者从’url module’中使用’URLSearchParams’，如下所示:

const url = require('url');const params = new url.URLSearchParams({ foo: 'bar' });axios.post('http://something.com/', params.toString());

您也可以使用 qs 库。

注意

如果需要对嵌套对象进行字符串化处理，则最好使用 qs 库，因为 querystring 方法在该用例中存在已知问题(https://github.com/nodejs/node-v0.x-archive/issues/1665)。

Form 数据

在 node.js, 您可以使用 form-data 库，如下所示:

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, { headers: form.getHeaders() })

或者，用一个拦截器（interceptor）:

axios.interceptors.request.use(config => {  if (config.data instanceof FormData) {    Object.assign(config.headers, config.data.getHeaders());  }  return config;});

13. 语义化

在axios达到 1.0 版本之前，破坏性更改将以新的次要版本发布。 例如 0.5.1 和 0.5.4 将具有相同的 API，但 0.6.0 将具有重大变化。

14. Promises

axios 依赖于一个原生 ES6 Promise。如果的环境不支持 ES6 Promises, 可以使用 polyfill.

15. TypeScript

axios 包含 TypeScript 定义与一个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);  }}

16. 资源

• 变更日志
• 升级指南
• 生态系统
• 贡献指南
• 行为准则

17. Credits

axios 深受 Angular 提供的 $http service 的启发。 最终，axios提供了一个独立的类似于 $http 的服务，以便在Angular之外使用。

18. 许可证

MIT