当前位置：首页 > React

react你如何使用axios

2026-03-31 15:33:57React

安装axios

在React项目中使用axios前，需先安装axios库。通过npm或yarn安装：

npm install axios
# 或
yarn add axios

引入axios

在需要发送HTTP请求的组件中引入axios：

import axios from 'axios';

发送GET请求

通过axios.get()方法获取数据，通常结合useEffect和useState处理异步数据：

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data))
      .catch(error => console.error('Error:', error));
  }, []);

  return <div>{/* 渲染数据 */}</div>;
}

发送POST请求

使用axios.post()提交数据，通常用于表单提交：

const handleSubmit = async (formData) => {
  try {
    const response = await axios.post('https://api.example.com/submit', formData);
    console.log('Response:', response.data);
  } catch (error) {
    console.error('Error:', error);
  }
};

配置全局默认值

可设置axios的全局配置（如基础URL、请求头）：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

拦截请求与响应

通过拦截器统一处理请求或响应（如添加Token、错误处理）：

// 请求拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

// 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理未授权错误
    }
    return Promise.reject(error);
  }
);

取消请求

使用CancelToken取消未完成的请求（如组件卸载时）：

const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', { cancelToken: source.token })
  .then(response => console.log(response.data))
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled:', thrown.message);
    }
  });

// 取消请求
source.cancel('Operation canceled by user.');

处理并发请求

通过axios.all()同时发送多个请求：

react你如何使用axios

axios.all([
  axios.get('https://api.example.com/users'),
  axios.get('https://api.example.com/posts')
])
.then(axios.spread((usersResponse, postsResponse) => {
  console.log('Users:', usersResponse.data);
  console.log('Posts:', postsResponse.data);
}));