当前位置：首页 > React

react如何引用axios

2026-03-31 10:07:37React

在React中引用Axios的方法

安装Axios依赖在项目根目录下运行以下命令安装Axios：

npm install axios
# 或
yarn add axios

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

import axios from 'axios';

基本GET请求示例

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

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实例可以创建自定义配置的实例：

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

拦截器配置添加请求和响应拦截器：

// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

在React组件中使用

react如何引用axios

import React, { useEffect } from 'react';

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

  return <div>Component Content</div>;
}