axios教程：轻松掌握HTTP请求、拦截器、错误处理与取消请求
axios.get('https://jsonplaceholder.typicode.com/users') .then(response => {
console.log('用户数据来了:', response.data); // 数据在 response.data 里
}) .catch(error => {
console.log('哎呀出错了:', error.message);
});
axios.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) config.headers.Authorization = Bearer ${token};
return config;
});
function UserProfile() { const [user, setUser] = useState(null);
useEffect(() => {
api.get('/users/me')
.then(response => setUser(response.data))
.catch(error => console.error('加载失败', error));
}, []);
return
{user?.name}
;
}
// 错误响应体标准 { "error": {
"code": "INVALID_TOKEN",
"message": "身份验证令牌已过期",
"details": "建议重新登录获取新令牌"
} }
const CancelToken = axios.CancelToken; const source = CancelToken.source();
useEffect(() => { api.get('/user/data', { cancelToken: source.token })
return () => {
source.cancel('组件卸载取消请求'); // 清理函数取消请求
}; }, []);