当前位置：首页 > React

react如何引用axios

2026-02-26 16:41:15React

安装 Axios

在 React 项目中安装 Axios，可以通过 npm 或 yarn 完成。打开终端并运行以下命令之一：

npm install axios

yarn add axios

导入 Axios

在需要使用 Axios 的组件或文件中，通过 import 语句引入 Axios：

import axios from 'axios';

发起 HTTP 请求

使用 Axios 发起 GET、POST、PUT、DELETE 等请求。以下是一些常见请求的示例：

GET 请求示例：

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

POST 请求示例：

react如何引用axios

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

全局配置

可以设置 Axios 的全局配置，例如默认的 baseURL 或请求头：

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

创建 Axios 实例

如果需要为不同 API 设置不同的配置，可以创建独立的 Axios 实例：

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'X-Custom-Header': 'value' }
});

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

拦截器

Axios 支持请求和响应拦截器，可以在请求发送前或响应返回后添加逻辑：

react如何引用axios

请求拦截器：

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

取消请求

通过 Axios 的 CancelToken 可以取消未完成的请求：

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 the user.');