React.js如何与后端API交互

发布时间：2025-05-04 21:45:02 作者：小樊
来源：亿速云阅读：99

在React.js中，与后端API进行交互通常是通过使用HTTP客户端库（如Axios或Fetch API）来实现的。以下是使用Axios和Fetch API与后端API进行交互的基本步骤：

使用Axios

安装Axios：
```
npm install axios
```

发送请求：

import axios from 'axios';

// 发送GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

// 发送POST请求
axios.post('https://api.example.com/data', {
  key: 'value'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('There was an error!', error);
});

// 发送PUT请求
axios.put('https://api.example.com/data/1', {
  key: 'new value'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('There was an error!', error);
});

// 发送DELETE请求
axios.delete('https://api.example.com/data/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

使用Fetch API

发送GET请求：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

发送POST请求：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was an error!', error);
});

发送PUT请求：

fetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'new value'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was an error!', error);
});

发送DELETE请求：

fetch('https://api.example.com/data/1', {
  method: 'DELETE'
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was an error!', error);
});

在React组件中使用

你可以在React组件的生命周期方法（如componentDidMount）或使用Hooks（如useEffect）来调用这些API请求。

使用类组件

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  state = {
    data: null,
    error: null
  };

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

  render() {
    const { data, error } = this.state;
    return (
      <div>
        {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
        {error && <div>Error: {error}</div>}
      </div>
    );
  }
}

export default MyComponent;

使用函数组件和Hooks

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

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

  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
    </div>
  );
}

export default MyComponent;

通过这些步骤，你可以在React.js应用中轻松地与后端API进行交互。