当前位置：首页 > news >正文

JavaScript中的axios

news 2025/10/9 7:13:32

在 Web 开发中，前端与后端的数据交互几乎无处不在。从早期的 XMLHttpRequest 到如今流行的 axios，HTTP 请求技术不断演进，变得更简洁、更强大。本文将带你从 AJAX 的基础讲起，重点介绍 axios 的使用方法和最佳实践。

一. AJAX 简介

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它的核心是 XMLHttpRequest 对象，但直接使用它会比较繁琐：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user', true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}
};
xhr.send();

二. Axios 是什么？

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js。它有以下特点：

（1）支持 Promise API

（2）拦截请求和响应

（3）转换请求和响应数据

（4）自动转换 JSON 数据

（5）客户端支持防御 XSRF

三. 安装与基本使用

npm install axios
# 或
yarn add axios

1. 基本 GET 请求

import axios from 'axios';axios.get('/api/user?ID=12345').then(function (response) {console.log(response.data);}).catch(function (error) {console.log(error);});

2. 带参数的 GET 请求

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

3. POST 请求

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

四. 并发请求

Axios 提供了 axios.all 和 axios.spread 来处理并发请求：

function getUserAccount() {return axios.get('/api/user/12345');
}function getUserPermissions() {return axios.get('/api/user/12345/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求都完成了console.log(acct.data, perms.data);}));

五. 请求与响应拦截器

拦截器可以在请求发送前或响应返回后做一些统一处理：

// 请求拦截器
axios.interceptors.request.use(config => {// 在发送请求前做些什么config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;},error => {return Promise.reject(error);}
);// 响应拦截器
axios.interceptors.response.use(response => response,error => {// 对响应错误做点什么if (error.response.status === 401) {// 未授权，跳转登录页window.location.href = '/login';}return Promise.reject(error);}
);

六. 创建实例

当项目中有多个 API 地址或需要不同配置时，可以创建 axios 实例：

const instance = axios.create({baseURL: 'https://api.example.com',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});instance.get('/user').then(response => console.log(response.data));

七. 错误处理

Axios 的错误处理非常灵活：

axios.get('/api/user/12345').catch(error => {if (error.response) {// 请求已发出，服务器用状态码响应（非 2xx）console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// 请求已发出，但没有收到响应console.log(error.request);} else {// 设置请求时发生了一些事情，触发了错误console.log('Error', error.message);}console.log(error.config);});

八. 取消请求

Axios 支持取消尚未完成的请求：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/api/user/12345', {cancelToken: source.token
}).catch(thrown => {if (axios.isCancel(thrown)) {console.log('Request canceled:', thrown.message);}
});// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');