前端如何将API请求独立出来做成公共组件

在React应用中，将Ajax请求独立出来通常是为了提高代码的可维护性和可测试性。通常，您可以创建一个单独的模块或文件，专门用于处理Ajax请求，然后在组件中引入和使用这个模块。以下是一种常见的方法：

1. 创建一个独立的Ajax请求模块

首先，您可以创建一个单独的模块，例如api.js，用于处理所有的Ajax请求。这个模块可以包含所有与数据获取和处理相关的函数。

// api.js

export const fetchData = async () => {
  try {
    const response = await fetch("https://api.example.com/data");
    if (response.ok) {
      const data = await response.json();
      return data;
    } else {
      throw new Error("请求失败：" + response.status);
    }
  } catch (error) {
    throw error;
  }
};

这个模块中的fetchData函数用于发起Ajax请求并处理响应。它使用async/await来进行异步操作，并处理成功和失败的情况。

2. 在React组件中引入Ajax请求模块

接下来，在您的React组件中引入刚刚创建的Ajax请求模块，并使用它来获取数据。例如：

import React, { Component } from 'react';
import { fetchData } from './api'; // 引入Ajax请求模块

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      error: null,
    };
  }

  componentDidMount() {
    // 在组件加载时发起Ajax请求
    fetchData()
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        this.setState({ error: error.message });
      });
  }

  render() {
    const { data, error } = this.state;

    if (error) {
      return <div>Error: {error}</div>;
    }

    if (!data) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {/* 显示数据 */}
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }
}

export default MyComponent;

在上面的示例中，我们引入了fetchData函数，并在组件的componentDidMount生命周期方法中发起Ajax请求。在请求成功时，我们将数据存储在组件的状态中，以便渲染数据。在请求失败时，我们捕获错误并将其显示在UI中。

通过将Ajax请求逻辑独立到单独的模块中，您可以更容易地重用请求逻辑、测试和维护代码。这种模块化的方法有助于保持React组件的简洁性和可读性。