当前位置：首页 > React

react如何引用axios

2026-01-24 02:45:44React

安装 axios

在 React 项目中安装 axios 依赖：

npm install axios

或使用 yarn：

yarn add axios

导入 axios

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

import axios from 'axios';

发起 HTTP 请求

使用 axios 发起 GET 请求：

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

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

全局配置 axios

可以设置默认配置，如 baseURL 或 headers：

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

创建 axios 实例

如果需要多个不同配置的实例：

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

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

拦截器

添加请求或响应拦截器：

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