当前位置：首页 > React

react如何调接口

2026-03-30 20:42:35React

在React中调用接口的常用方法

使用fetch进行API调用
fetch是浏览器原生支持的API，适用于简单的数据请求。基本用法如下：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

使用axios库调用接口

安装axios

npm install axios

基本请求示例

import axios from 'axios';

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

POST请求示例

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

在React组件中集成API调用

类组件中使用生命周期

componentDidMount() {
  axios.get('https://api.example.com/data')
    .then(response => this.setState({ data: response.data }));
}

函数组件中使用useEffect

import { useState, useEffect } from 'react';

function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data));
  }, []);
}

处理异步请求的高级模式

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

自定义hook封装

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get(url)
      .then(response => {
        setData(response.data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

错误处理和状态管理

添加错误状态

const [error, setError] = useState(null);

useEffect(() => {
  axios.get(url)
    .then(response => setData(response.data))
    .catch(err => setError(err.message))
    .finally(() => setLoading(false));
}, [url]);

使用AbortController取消请求

react如何调接口

useEffect(() => {
  const controller = new AbortController();

  axios.get(url, { signal: controller.signal })
    .then(response => setData(response.data));

  return () => controller.abort();
}, [url]);