本文共 2465 字，大约阅读时间需要 8 分钟。

Axios技术文档

Axios 是一款基于 Promise 的异步请求库，支持在浏览器和 Node.js 中发送 HTTP 请求。它主要基于 XMLHttpRequest（XHR）封装，通过支持 Promise API 提供更简便的异步操作接口。Axios 的核心特点是支持拦截器（interceptors），可以自定义请求和响应的处理逻辑，同时支持多请求发起，以及取消请求功能。

1. Axios 请求方式

Axios 提供多种方法来发起 HTTP 请求，包括 GET、POST、PUT、DELETE、PATCH 和 HEAD 等。无论是通过直接调用还是通过配置选项发起，开发者都可以灵活设置请求参数。

• axios(config)：可以直接传递一个配置对象来发起请求。
• axios.request(config)：与 axios(config) 功能相同，但主要是为了区分自定义实现。
• axios.get(url [, config])：用于 GET 请求。
• axios.post(url [, data [, config]])：用于 POST 请求。
• axios.put(url [, data [, config]])：用于 PUT 请求。
• axios.delete(url [, config])：用于 DELETE 请求。
• axios.patch(url [, data [, config]])：用于 PATCH 请求。
• axios.head(url [, config])：用于 HEAD 请求，不会返回 body 数据。

2. Axios 示例

import axios from 'axios'//_browser commentary_// 示例 1：GET 请求axios.get('/user?ID=12345')// 示例 2： POST 请求axios.post('/user', { firstName: 'simon', lastName: 'li' })// 示例 3：并发请求const get1 = axios.get('/user/12345')const get2 = axios.get('/user/12345/permission')axios.all([get1, get2])  .then((results) => console.log(results))  .catch(err => console.log(err))

3. Axios 配置选项

Axios支持通过配置对象或者实例化后续对调请求，主要配置选项包括：

• method：指定请求方法，默认为 GET。
• url：请求 URL，若非绝对 URL，可自动补上 baseURL。
• baseURL：指定请求的基准 URL，若无 URL，会拼接到 baseURL。
• transformRequest：用于对请求数据进行预处理，仅适用于 PUT、POST、PATCH 请求。
• transformResponse：用于对响应数据进行处理。
• headers：自定义请求头部信息。
• params：请求参数，需为纯对象。
• data：请求体数据，适用于 PUT、POST、PATCH 请求。
• timeout：请求超时时间，默认为 30000ms。
• withCredentials：指定是否携带凭证（如 cookie）。
• auth：用于 HTTP 认证，提供 username 和 password。
• responseType：指定响应类型，如 'json'、'formdata' 等。

4. Axios 实例化

通过 axios.create 创建一个新的实例，支持自定义默认设置：

const instance = axios.create({  baseURL: 'http://localhost:3000/api',  timeout: 2000,  headers: {    'X-Custom-Header': 'foobar'  }})// 使用实例发起请求instance.get('/user', {  params: {    ID: 12345  }})

5. Axios 拦截器

Axios 提供请求拦截器和响应拦截器，用于在请求/响应处理前后自定义逻辑。

请求拦截器

axios.interceptors.request.use(config => {  // 做一些预处理逻辑  return config}, err => {  // 处理请求错误  return Promise.reject(err)})

响应拦截器

axios.intercepts.response.use(response => {  // 处理响应数据  return response}, err => {  // 处理响应错误  return Promise.reject(err)})

6. 错误处理

通过 validateStatus 选项可以自定义处理 HTTP 状态码：

axios.get('/user/12345', {  validateStatus: status => status < 500 // 只处理状态码小于 500 的错误})

取消请求

const CancelToken = axios.CancelToken// 创建取消 tokenconst source = CancelToken.source()// 发起请求并传递 cancelTokenaxios.get('/user/12345', {  cancelToken: source}).catch(err => {  if (axios.isCancel(err)) {    console.log('请求被取消')  }  // 处理其他错误})

7. 参考文档

如需更详细的功能介绍，可参考 Axios 官方文档。

转载地址：http://uyrmz.baihongyu.com/