当前位置：首页 > React

react中如何使用axios

2026-01-24 22:42:27React

安装 axios

在项目中安装 axios 依赖：

npm install axios
# 或使用 yarn
yarn add axios

引入 axios

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

import axios from 'axios';

发起 GET 请求

使用 axios.get 发起 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 发起 POST 请求：

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

配置全局默认值

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

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

创建实例

通过 axios.create 创建自定义实例：

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

instance.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.all 和 axios.spread 处理并发请求：

axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
])
.then(axios.spread((response1, response2) => {
  console.log(response1.data, response2.data);
}));

取消请求

使用 CancelToken 取消请求：

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

错误处理

统一处理错误：

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

react中如何使用axios