当前位置：首页 > React

react你如何使用axios

2026-01-24 07:59:32React

安装 axios

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

npm install axios

或

yarn add axios

引入 axios

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

import axios from 'axios';

发起 GET 请求

使用 axios 发起 GET 请求获取数据：

react你如何使用axios

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);
  });

使用 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 fetching data:', error);
  }
}

全局配置

可以设置 axios 的全局配置，例如 baseURL 或 headers：

react你如何使用axios

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

创建实例

可以创建自定义的 axios 实例，用于不同的 API 端点：

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

api.get('/data')
  .then(response => {
    console.log(response.data);
  });

拦截请求和响应

可以使用拦截器在请求或响应被处理前进行统一操作：

axios.interceptors.request.use(config => {
  console.log('Request sent:', config);
  return config;
});

axios.interceptors.response.use(response => {
  console.log('Response received:', response);
  return response;
});

取消请求

可以使用 CancelToken 取消正在进行的请求：

const source = axios.CancelToken.source();

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

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