当前位置：首页 > React

react中如何使用axios

2026-03-11 07:32:45React

安装 axios

在项目中安装 axios 依赖，通过 npm 或 yarn 执行以下命令：

npm install axios

或

yarn add axios

引入 axios

在需要使用 axios 的组件或文件中引入：

import axios from 'axios';

发起 GET 请求

通过 axios.get 方法获取数据，使用 then 处理成功响应，catch 处理错误：

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

发起 POST 请求

通过 axios.post 发送数据，第二个参数为请求体：

axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

配置全局默认值

设置全局基础 URL 或请求头，避免重复配置：

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

使用 async/await

结合 async/await 简化异步请求处理：

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

拦截请求和响应

通过拦截器在请求或响应前统一处理逻辑：

// 请求拦截器
axios.interceptors.request.use(config => {
  console.log('Request sent:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  console.log('Response received:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

取消请求

使用 CancelToken 取消未完成的请求：

react中如何使用axios

const source = axios.CancelToken.source();

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

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