Axios使用手册

简介

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

安装Axios

npm

npm install axios

导入axios

javascript

import axios from "axios";

基本用法

promise形式

javascript


// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

promise-带参数形式

javascript

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

发送post请求

javascript

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

async/await形式

javascript

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

请求方式别名

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.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])

创建请求实体

以自定义配置新建一个实例，之后的请求都会沿用自定义的配置。

javascript

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

Axios请求配置请求配置

可以在创建axios实例时设置config参数，也可以通过全局axios设置config参数。

javascript

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

配置优先级：

单个请求上的config参数
axios实例上的config参数
axios库的默认config参数

Axios请求配置属性集合

基本配置:

url: 请求的服务器 URL。
method: 请求方法，如 GET、POST，默认值是 GET。
baseURL: 基础 URL，会自动加在 url 前，方便处理相对 URL。
headers: 自定义 HTTP 请求头。

请求和响应转换:

transformRequest: 请求数据在发送前的转换，通常用于 PUT、POST 和 PATCH 方法。
transformResponse: 在 then/catch 前对响应数据进行转换处理。

请求数据:

params: 作为 URL 参数发送的数据，可以是简单对象或 URLSearchParams 对象。
paramsSerializer: 用于序列化 params 的方法。
data: 请求体中的数据，适用于 PUT、POST、DELETE 和 PATCH 方法。

超时与凭证:

timeout: 请求超时的时间，单位为毫秒。
withCredentials: 是否在跨域请求中使用凭证（如 cookies）。

请求适配器:

adapter: 自定义处理请求的函数，返回一个 Promise 并提供有效的响应。

认证:

auth: HTTP 基本认证信息（用户名和密码）。

响应配置:

responseType: 响应的数据类型，如 json、text、blob 等。
responseEncoding: 用于解码响应的编码（Node.js 专属）。

安全性:

xsrfCookieName: 用于跨站请求伪造 (XSRF) 的 cookie 名称。
xsrfHeaderName: 在请求头中发送的 XSRF 令牌名称。

进度处理:

onUploadProgress: 上传时的进度事件处理。
onDownloadProgress: 下载时的进度事件处理。

内容限制:

maxContentLength: HTTP 响应内容的最大字节数。
maxBodyLength: HTTP 请求体的最大字节数（Node.js 专属）。

状态和重定向:

validateStatus: 自定义 HTTP 状态码的验证方法，决定是否 resolve 或 reject Promise。
maxRedirects: 最大重定向次数（Node.js 专属）。

代理与套接字:

socketPath: UNIX 套接字路径（Node.js 专属）。
proxy: 配置代理服务器的主机名、端口和协议。

取消请求:

cancelToken: 用于取消请求的令牌。此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。
signal：用于取消请求。从v0.22.0开始启用。

响应解压:

decompress: 是否自动解压响应体（Node.js 专属）。

Axios响应体结构

javascript

{
  // `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: {}
}

拦截器

拦截器分为两种：请求拦截器和响应拦截器。

请求拦截器

在请求发送之前执行。你可以在这里执行一些操作，例如：

添加认证信息：在每个请求的头部添加Token或其他认证信息。
修改请求参数：对请求的URL、参数等进行动态调整。
处理请求日志：记录或显示每个请求的详细信息。

javascript

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器

响应拦截器在接收到响应后但在处理响应数据之前执行。常见的用途包括：

全局错误处理：统一处理所有响应错误，如未授权、服务器错误等。
数据格式化：在返回数据给组件之前，统一处理或格式化响应数据。
重定向：根据响应状态码，自动重定向用户到登录页面或其他页面。

javascript

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

取消拦截器

使用eject取消拦截器

javascript

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

错误处理

javascript

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.toJSON())
    }
    console.log(error.config);
  });

取消请求

axios支持AbortController的方式取消请求。

为每个请求new一个AbortController对象controller。
获取controller的signal属性，配置给请求的signal属性，将请求与controller关联起来。
使用abort方法，取消请求。

javascript

const controller = new AbortController();

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

multipart/form-data类型发起post请求

当请求头中的 Content-Type 是 multipart/form-data 时，Axios 支持自动地将普通对象序列化成一个 FormData 对象。

javascript

import axios from 'axios';

axios.post('https://httpbin.org/post', {
  user: {
    name: 'Dmitriy'
  },
  file: fs.createReadStream('/foo/bar.jpg')
}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(({data})=> console.log(data));

也可以使用FormData API组合FormData对象

javascript

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob([1,2,3]));
form.append('my_file', fileInput.files[0]);

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

或使用别名函数，postForm，putForm，patchForm，这些函数头部默认就是multipart/form-data，会将数据自动序列化。

服务调用

服务发现

服务容错

链路跟踪

全局事务

网关

Axios使用手册

简介

基本用法

请求方式别名

创建请求实体

Axios请求配置请求配置

Axios请求配置属性集合

Axios响应体结构

拦截器

请求拦截器

响应拦截器

取消拦截器

错误处理

取消请求

multipart/form-data类型发起post请求

Axios使用手册 ​

简介 ​

基本用法 ​

请求方式别名 ​

创建请求实体 ​

Axios请求配置请求配置 ​

Axios请求配置属性集合 ​

Axios响应体结构 ​

拦截器 ​

请求拦截器 ​

响应拦截器 ​

取消拦截器 ​

错误处理 ​

取消请求 ​

multipart/form-data类型发起post请求 ​

Axios使用手册

简介

基本用法

请求方式别名

创建请求实体

Axios请求配置请求配置

Axios请求配置属性集合

Axios响应体结构

拦截器

请求拦截器

响应拦截器

取消拦截器

错误处理

取消请求

multipart/form-data类型发起post请求