当前位置：首页 > React

react 如何使用axios

2026-02-11 22:38:50React

安装 axios

在 React 项目中安装 axios 可以通过 npm 或 yarn 完成。打开终端并运行以下命令：

npm install axios
# 或
yarn add axios

引入 axios

在需要使用 axios 的组件中，通过 import 语句引入 axios：

import axios from 'axios';

发起 GET 请求

使用 axios 发起 GET 请求可以通过 axios.get 方法。以下是一个简单的示例：

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

发起 POST 请求

发起 POST 请求可以通过 axios.post 方法，并传递数据作为第二个参数：

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

使用 async/await

为了简化异步操作，可以使用 async/await 语法：

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

配置全局默认值

可以设置 axios 的全局默认值，例如 baseURL 或 headers：

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

创建 axios 实例

如果需要为不同的 API 端点创建不同的配置，可以创建 axios 实例：

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

api.get('/posts')
  .then(response => {
    console.log(response.data);
  });

拦截请求和响应

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

取消请求

使用 CancelToken 可以取消正在进行的请求：

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

axios.get('https://jsonplaceholder.typicode.com/posts', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled:', thrown.message);
    } else {
      console.error('Error:', thrown);
    }
  });

source.cancel('Operation canceled by the user.');

处理错误

axios 的错误处理可以通过 catch 块或 try/catch 语法实现：

react 如何使用axios

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .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);
    }
  });