正文

学会React中优雅中断请求的5种实用技巧

/0 浏览量
0517

在React中，处理异步请求是常见的需求，比如从服务器获取数据。然而，在组件卸载或者请求不再需要时，如何优雅地中断这些请求，避免不必要的资源浪费和潜在的错误，是一个值得探讨的话题。以下是在React中优雅中断请求的5种实用技巧：

技巧一：使用AbortController

AbortController 是一个 Web API，允许你通过 abort 方法中断一个或多个 Web API 请求。在 React 中，你可以结合 fetch API 使用它来优雅地中断请求。

import { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);
  const [controller, setController] = useState(new AbortController());

  useEffect(() => {
    const { signal } = controller;
    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))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      });

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

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

技巧二：使用axios取消请求

如果你使用的是 axios 库，可以利用其取消请求的功能。axios 提供了一个取消令牌（CancelToken），可以与 axios 实例一起使用。

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

function FetchDataWithAxios() {
  const [data, setData] = useState(null);
  const cancelTokenSource = axios.CancelToken.source();

  useEffect(() => {
    axios.get('https://api.example.com/data', {
      cancelToken: cancelTokenSource.token
    })
      .then(response => setData(response.data))
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled', error.message);
        } else {
          console.error('Fetch error:', error);
        }
      });

    return () => {
      cancelTokenSource.cancel('Component is unmounted, request canceled.');
    };
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

技巧三：使用Promise.all和AbortController

当你需要同时发送多个请求时，可以使用 Promise.all 和 AbortController 来确保所有请求都能被优雅地中断。

import { useState, useEffect } from 'react';
import { fetch } from 'cross-fetch';

function FetchMultipleData() {
  const [data, setData] = useState({});

  useEffect(() => {
    const controller = new AbortController();
    const fetchPromises = [
      fetch('https://api.example.com/data1', { signal: controller.signal }),
      fetch('https://api.example.com/data2', { signal: controller.signal })
    ];

    Promise.all(fetchPromises)
      .then(responses => {
        return Promise.all(responses.map(response => response.json()));
      })
      .then(data => setData(data))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      });

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

  return (
    <div>
      {Object.keys(data).length > 0 && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

技巧四：使用async/await和AbortController

使用 async/await 可以让你的异步代码更加简洁易读。结合 AbortController，你可以轻松地中断异步请求。

import { useState, useEffect } from 'react';
import { fetch } from 'cross-fetch';

async function fetchData() {
  const controller = new AbortController();
  try {
    const response = await fetch('https://api.example.com/data', { signal: controller.signal });
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  }
}

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

  useEffect(() => {
    const controller = new AbortController();
    fetchData(controller.signal)
      .then(data => setData(data))
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      });

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

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

技巧五：使用第三方库如axios取消请求

除了 axios 自带的取消功能，还有一些第三方库可以帮助你更方便地取消请求。例如，axios-cancellation 是一个基于 axios 的取消库，可以让你通过取消令牌来取消请求。

import axios from 'axios';
import axiosCancellation from 'axios-cancellation';

const cancellation = axiosCancellation(axios.create());

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

  useEffect(() => {
    cancellation.get('https://api.example.com/data')
      .then(response => setData(response.data))
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled', error.message);
        } else {
          console.error('Fetch error:', error);
        }
      });

    return () => {
      cancellation.cancel('Component is unmounted, request canceled.');
    };
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

通过以上五种技巧，你可以在React中优雅地中断请求，避免不必要的资源浪费和潜在的错误。希望这些技巧能够帮助你更好地管理你的React应用程序中的异步请求。

-- 展开阅读全文 --