当前位置：首页 > React

react如何使用axios

2026-02-12 01:12:37React

使用 Axios 在 React 中发送 HTTP 请求

安装 Axios 包通过 npm 或 yarn 安装 axios：

npm install axios
# 或
yarn add axios

引入 Axios 在组件文件中导入 axios：

import axios from 'axios';

发送 GET 请求使用 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 方法提交数据：

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

使用 async/await 语法在异步函数中使用 await 处理 axios 请求：

react如何使用axios

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

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

处理响应数据 axios 响应对象包含以下主要属性：

data: 服务器返回的数据
status: HTTP 状态码
headers: 响应头信息

处理错误捕获请求过程中可能出现的错误：

react如何使用axios

axios.get('https://api.example.com/data')
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了非2xx状态码
      console.log(error.response.status);
    } else if (error.request) {
      // 请求已发出但无响应
      console.log('No response received');
    } else {
      // 设置请求时出错
      console.log('Error', error.message);
    }
  });

取消请求使用取消令牌取消正在进行的请求：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

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

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

全局配置可以设置 axios 的全局默认值：

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

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

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

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