react fetch如何請求數據

React Fetch 如何請求數據

在現代 Web 開發中，前端與后端的數據交互是至關重要的。React 流行的前端庫，提供了多種方式來處理數據請求。其中，fetch API 是一種常用的方法，用于從服務器獲取數據或向服務器發送數據。本文將詳細介紹如何在 React 中使用 fetch 進行數據請求，包括基本用法、錯誤處理、異步操作、以及一些高級技巧。

1. 什么是 Fetch API？

fetch 是一個現代的網絡請求 API，用于替代傳統的 XMLHttpRequest。它提供了一個簡單、強大的接口，用于發送 HTTP 請求并處理響應。fetch 返回一個 Promise，這使得它在處理異步操作時非常方便。

1.1 Fetch 的基本用法

fetch 的基本語法如下：

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• url: 請求的 URL。
• options: 可選的配置對象，用于指定請求方法、請求頭、請求體等。

1.2 Fetch 的返回值

fetch 返回一個 Promise，該 Promise 在請求成功時解析為一個 Response 對象。Response 對象包含了響應的狀態、頭信息以及響應體等。

2. 在 React 中使用 Fetch

在 React 中，通常會在組件的生命周期方法或 useEffect 鉤子中使用 fetch 來請求數據。以下是一個簡單的例子，展示了如何在 React 組件中使用 fetch 獲取數據并更新狀態。

2.1 使用 Class 組件

import React, { Component } from 'react';

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

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        this.setState({ data, loading: false });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  }

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

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

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

    return (
      <div>
        <h1>Data from API</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }
}

export default FetchExample;

2.2 使用函數組件和 useEffect

在函數組件中，可以使用 useEffect 鉤子來處理數據請求。

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

function FetchExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

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

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

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchExample;

3. 處理 Fetch 請求中的錯誤

在實際應用中，網絡請求可能會失敗，因此處理錯誤是非常重要的。fetch 不會自動拋出網絡錯誤（如 404 或 500），因此需要手動檢查 response.ok 屬性。

3.1 檢查響應狀態

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('Error:', error));

3.2 處理網絡錯誤

fetch 的 catch 塊會捕獲網絡錯誤（如 DNS 解析失敗、網絡中斷等），但不會捕獲 HTTP 錯誤（如 404 或 500）。因此，需要在 then 塊中手動檢查 response.ok。

4. 使用 Fetch 發送 POST 請求

除了獲取數據，fetch 還可以用于發送數據。以下是一個使用 fetch 發送 POST 請求的例子。

4.1 發送 JSON 數據

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com',
  }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

4.2 發送表單數據

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'john@example.com');

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

5. 處理 Fetch 請求的取消

在某些情況下，可能需要取消正在進行的 fetch 請求。例如，當用戶離開頁面或組件卸載時，取消請求可以避免不必要的網絡流量和潛在的錯誤。

5.1 使用 AbortController

AbortController 是一個用于取消 fetch 請求的 API。以下是一個使用 AbortController 的例子。

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

function FetchExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    fetch('https://api.example.com/data', { signal })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
          setLoading(false);
        }
      });

    return () => {
      abortController.abort();
    };
  }, []);

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

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

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchExample;

6. 使用 Fetch 進行并發請求

在某些情況下，可能需要同時發送多個請求并等待所有請求完成?？梢允褂?Promise.all 來實現并發請求。

6.1 并發請求示例

const fetchData1 = fetch('https://api.example.com/data1').then(response => response.json());
const fetchData2 = fetch('https://api.example.com/data2').then(response => response.json());

Promise.all([fetchData1, fetchData2])
  .then(([data1, data2]) => {
    console.log('Data 1:', data1);
    console.log('Data 2:', data2);
  })
  .catch(error => console.error('Error:', error));

7. 使用 Fetch 進行分頁請求

在處理分頁數據時，通常需要多次請求數據并合并結果。以下是一個使用 fetch 進行分頁請求的例子。

7.1 分頁請求示例

async function fetchPaginatedData(url, page = 1, allData = []) {
  const response = await fetch(`${url}?page=${page}`);
  const data = await response.json();

  if (data.length > 0) {
    allData = allData.concat(data);
    return fetchPaginatedData(url, page + 1, allData);
  }

  return allData;
}

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

8. 使用 Fetch 進行身份驗證

在需要身份驗證的 API 中，通常需要在請求頭中添加認證信息（如 JWT 令牌）。以下是一個使用 fetch 進行身份驗證的例子。

8.1 添加認證信息

const token = 'your_jwt_token_here';

fetch('https://api.example.com/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

9. 使用 Fetch 進行文件上傳

fetch 也可以用于上傳文件。以下是一個使用 fetch 上傳文件的例子。

9.1 文件上傳示例

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData,
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

10. 使用 Fetch 進行跨域請求

在跨域請求中，服務器需要配置 CORS（跨域資源共享）策略。fetch 默認會發送跨域請求，但需要服務器支持 CORS。

10.1 跨域請求示例

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

11. 使用 Fetch 進行緩存控制

fetch 提供了多種緩存控制選項，可以通過 cache 屬性來配置。

11.1 緩存控制示例

fetch('https://api.example.com/data', {
  method: 'GET',
  cache: 'no-cache', // 不使用緩存
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

12. 使用 Fetch 進行超時控制

fetch 本身不支持超時控制，但可以通過 Promise.race 和 AbortController 來實現超時控制。

12.1 超時控制示例

const timeout = (ms) => new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms));

const fetchWithTimeout = (url, options, timeoutMs) => {
  const abortController = new AbortController();
  const signal = abortController.signal;

  return Promise.race([
    fetch(url, { ...options, signal }),
    timeout(timeoutMs),
  ]).finally(() => abortController.abort());
};

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

13. 使用 Fetch 進行重試機制

在網絡不穩定的情況下，可能需要重試失敗的請求。以下是一個使用 fetch 實現重試機制的例子。

13.1 重試機制示例

const fetchWithRetry = (url, options, retries = 3) => {
  return fetch(url, options)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .catch(error => {
      if (retries > 0) {
        return fetchWithRetry(url, options, retries - 1);
      }
      throw error;
    });
};

fetchWithRetry('https://api.example.com/data', {})
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

14. 使用 Fetch 進行請求攔截

在某些情況下，可能需要在請求發送前或響應返回后進行一些處理?？梢允褂弥虚g件或自定義函數來實現請求攔截。

14.1 請求攔截示例

const fetchWithInterceptor = (url, options) => {
  // 請求前的處理
  console.log('Request:', url, options);

  return fetch(url, options)
    .then(response => {
      // 響應后的處理
      console.log('Response:', response);
      return response.json();
    })
    .catch(error => {
      console.error('Error:', error);
      throw error;
    });
};

fetchWithInterceptor('https://api.example.com/data', {})
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

15. 使用 Fetch 進行請求隊列

在某些情況下，可能需要限制同時進行的請求數量?？梢允褂谜埱箨犃衼韺崿F這一點。

15.1 請求隊列示例

class RequestQueue {
  constructor(maxConcurrent = 5) {
    this.maxConcurrent = maxConcurrent;
    this.queue = [];
    this.active = 0;
  }

  add(request) {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject });
      this.next();
    });
  }

  next() {
    if (this.active >= this.maxConcurrent || this.queue.length === 0) {
      return;
    }

    const { request, resolve, reject } = this.queue.shift();
    this.active++;

    fetch(request.url, request.options)
      .then(response => response.json())
      .then(data => {
        resolve(data);
        this.active--;
        this.next();
      })
      .catch(error => {
        reject(error);
        this.active--;
        this.next();
      });
  }
}

const queue = new RequestQueue(2);

queue.add({ url: 'https://api.example.com/data1', options: {} })
  .then(data => console.log('Data 1:', data))
  .catch(error => console.error('Error:', error));

queue.add({ url: 'https://api.example.com/data2', options: {} })
  .then(data => console.log('Data 2:', data))
  .catch(error => console.error('Error:', error));

queue.add({ url: 'https://api.example.com/data3', options: {} })
  .then(data => console.log('Data 3:', data))
  .catch(error => console.error('Error:', error));

16. 使用 Fetch 進行請求緩存

在某些情況下，可能需要緩存請求結果以避免重復請求?？梢允褂?localStorage 或 sessionStorage 來實現請求緩存。

16.1 請求緩存示例

const fetchWithCache = (url, options) => {
  const cacheKey = `cache_${url}`;
  const cachedData = localStorage.getItem(cacheKey);

  if (cachedData) {
    return Promise.resolve(JSON.parse(cachedData));
  }

  return fetch(url, options)
    .then(response => response.json())
    .then(data => {
      localStorage.setItem(cacheKey, JSON.stringify(data));
      return data;
    })
    .catch(error => {
      console.error('Error:', error);
      throw error;
    });
};

fetchWithCache('https://api.example.com/data', {})
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

17. 使用 Fetch 進行請求日志

在某些情況下，可能需要記錄請求的詳細信息以便調試?？梢允褂米远x函數來實現請求日志。

17.1 請求日志示例

const fetchWithLog = (url, options) => {
  console.log('Request:', url, options);

  return fetch(url, options)
    .then(response => {
      console.log('Response:', response);
      return response.json();
    })
    .catch(error => {
      console.error('Error:', error);
      throw error;
    });
};

fetchWithLog('https://api.example.com/data', {})
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

18. 使用 Fetch 進行請求模擬

在開發過程中，可能需要模擬請求以便在沒有后端服務的情況下進行測試?？梢允褂?mock-fetch 或 fetch-mock 等庫來實現請求模擬。

18.1 請求模擬示例

import fetchMock from 'fetch-mock';

fetchMock.mock('https://api.example.com/data', {
  status: 200,
  body: { message: 'Mocked response' },
});

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

19. 使用 Fetch 進行請求代理

在某些情況下，可能需要通過代理服務器發送請求以避免跨域問題?？梢允褂?http-proxy-middleware 或 http-proxy 等庫來實現請求代理。

19.1 請求代理示例

const proxy = require('http-proxy-middleware');

app.use('/api', proxy({ target: 'https://api.example.com', changeOrigin: true }));

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

20. 使用 Fetch 進行請求壓縮

在某些情況下，可能需要壓縮請求體以減少網絡流量?？梢允褂?pako 或 zlib 等庫來實現請求壓縮。

20.1 請求