当前位置：首页 > React

react你如何使用axios

2026-03-10 16:07:08React

使用 Axios 发送请求

在 React 中使用 Axios 发送 HTTP 请求需要先安装 Axios 库。可以通过 npm 或 yarn 进行安装：

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 请求

发送 POST 请求提交数据：

axios.post('https://api.example.com/data', { name: 'John', age: 30 })
  .then(response => {
    console.log('Data saved:', response.data);
  })
  .catch(error => {
    console.error('Error saving 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：

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

创建 Axios 实例

创建自定义 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.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 的错误处理可以通过 catch 或 try/catch 实现：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Server responded with status:', error.response.status);
    } else if (error.request) {
      console.error('No response received:', error.request);
    } else {
      console.error('Error setting up request:', error.message);
    }
  });

取消请求

使用 CancelToken 取消未完成的请求：

react你如何使用axios

const CancelToken = axios.CancelToken;
const source = 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 user.');

以上方法涵盖了在 React 中使用 Axios 的主要场景，包括发送请求、处理响应和错误、配置全局选项等。