前端开发最怕的不是 Bug，是忘了用 Axios！前端开发最怕的不是 Bug，是忘了用 Axios！在现代 Web 开

前端开发最怕的不是 Bug，是忘了用 Axios！

在现代 Web 开发中，前端应用与后端服务之间的通信是至关重要的。无论是构建单页应用（SPA）、微服务架构中的前端组件，还是 Node.js 后端服务，开发者都需要一个强大、灵活、易于使用的 HTTP 客户端来处理网络请求。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。它支持异步请求，并提供了对 HTTP 方法（如 GET、POST、PUT、DELETE 等）的全面支持。Axios 的核心优势在于其简洁的 API、强大的功能以及良好的兼容性，使其成为开发者构建现代 Web 应用的首选工具之一。

一、Axios 的基本使用

安装

npm install axios

发送 GET 请求

axios.get('/user', {
  params: {
    ID: 123
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

发送 POST 请求

axios.post('/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

并发请求

axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
])
.then(axios.spread((response1, response2) => {
  console.log(response1.data, response2.data);
}))
.catch(error => console.error(error));

错误处理

Axios 提供了详细的错误对象，开发者可以根据不同的错误类型进行处理：

axios.get('/user/123')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 服务器响应了，但状态码不是 2xx
      console.log('服务器响应错误:', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log('没有收到响应:', error.request);
    } else {
      // 其他错误
      console.log('其他错误:', error.message);
    }
  });

二、Axios的特性

基于 Promise 的 API

Axios 使用 Promise 风格的 API，使得异步请求更加直观和易于管理。相比传统的回调函数方式，Promise 提供了更好的错误处理机制和链式调用能力。
```
axios.get('/user', {
  params: {
    ID: 123
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
```
自动转换 JSON 数据

Axios 会自动将请求和响应数据转换为 JSON 格式，无需手动调用 JSON.parse() 或 JSON.stringify()。
支持创建自定义的axios实例

axios支持创建自定义的实例，并为其配置默认的请求参数，适用于多个请求共享相同配置的场景。
- baseURL 是请求的基地址，所有使用该实例发起的请求都会自动加上这个前缀。例如：instance.get('/user') 会请求 http://localhost:5173/api/user
- timeout表示请求的最大耗时，若请求超过了这个时间则中断请求
- headers是设置默认请求头，这里设置了 Content-Type: application/json表示数据类型是json格式
```
const instance = axios.create({
  baseURL: "http://localhost:5173/api",
  timeout: 1000,
  headers: {
    "Content-Type": "application/json",
  },
});
```

拦截器（Interceptors）

Axios 提供了强大的拦截器功能，允许在请求发送前或响应返回后执行自定义逻辑。例如，可以统一添加请求头、处理认证、记录日志等。下面的请求拦截器的作用是给每个请求添加token，实现jwt认证。

// 请求拦截器
instance.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers["authorization"] = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
instance.interceptors.response.use(response => {
	return response.data
});

取消请求

Axios 支持通过 CancelToken 来取消正在进行的请求，这在用户导航或需要提前终止请求时非常有用。

const source = axios.CancelToken.source();

axios.get('/user/123', {
  cancelToken: source.token
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  }
});

source.cancel('操作取消');

自动重试机制（需插件）

虽然 Axios 本身不直接支持自动重试，但可以通过拦截器或第三方库（如 axios-retry）轻松实现请求重试功能。