概述：

本文展示瞭如何使用React編寫一個批量請求QQ域名API的示例，檢查多個QQ域名是否被封禁。我們將請求接口 https://api.52an.fun/qq/api.php?url= 並根據返回的status值，判斷域名是否正常。status為1時表示域名正常，status為0時表示域名被封禁。

目標：

通過React創建一個界面，可以批量輸入多個QQ域名，發送請求並顯示它們的狀態。

環境要求：

• React開發環境。
• axios庫用於發送HTTP請求。

React代碼示例：

1. 安裝依賴：

首先，確保你已經安裝了axios庫，使用以下命令安裝：

npm install axios

2. 創建React組件代碼：

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

function App() {
  const [urls, setUrls] = useState([]);
  const [results, setResults] = useState([]);

  // 處理輸入框的變更
  const handleUrlChange = (event) => {
    setUrls(event.target.value.split('\n').map((line) => line.trim()));
  };

  // 批量請求QQ域名狀態
  const checkStatus = async () => {
    const result = [];

    for (const url of urls) {
      try {
        const response = await axios.get(`https://api.52an.fun/qq/api.php?url=${url}`);
        const { status, message } = response.data;

        result.push({
          url: url,
          status: status === '1' ? '正常' : `被封禁，原因: ${message}`,
        });
      } catch (error) {
        result.push({
          url: url,
          status: '請求失敗，請檢查URL',
        });
      }
    }

    setResults(result);
  };

  return (
    <div className="App">
      <h1>QQ域名封禁檢查</h1>

      <textarea
        rows="10"
        cols="30"
        placeholder="請輸入多個QQ域名，每個域名一行"
        onChange={handleUrlChange}
      ></textarea>

      <br />
      <button onClick={checkStatus}>檢查狀態</button>

      <div>
        <h3>檢查結果:</h3>
        {results.length > 0 && (
          <ul>
            {results.map((result, index) => (
              <li key={index}>
                <strong>{result.url}</strong>: {result.status}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default App;

代碼解析：

1. 狀態管理：

   • urls：存儲用户輸入的QQ域名列表。
   • results：存儲檢查結果，顯示每個域名的狀態。
2. handleUrlChange：該函數處理輸入框中的內容，將用户輸入的多個域名按行分隔並存儲在urls中。

3. checkStatus：該函數負責發送批量請求。我們使用axios.get逐個請求每個域名的狀態，並根據返回的status值判斷域名的狀態：

   • status為1時表示域名正常。
   • status為0時表示域名被封禁，返回封禁的原因。

4. 結果展示：

   • 通過results數組，將每個域名及其封禁狀態顯示在頁面上。

示例操作：

1. 用户在文本框中輸入多個QQ域名，每個域名單獨一行。
2. 點擊“檢查狀態”按鈕後，系統會依次請求每個域名的狀態，並顯示結果。
3. 顯示的結果包括每個域名的狀態。

依賴安裝：

如果沒有安裝React開發環境，可以使用create-react-app工具來創建一個新的React應用：

npx create-react-app check-qq-status
cd check-qq-status
npm install axios

編譯與運行：

1. 運行React開發環境：

   npm start

2. 打開瀏覽器，進入http://localhost:3000，就可以看到界面，輸入域名並查看狀態。

結果示例：

如果輸入了多個QQ域名，例：

www.qq.com
m.qq.com
www.qq.org

結果可能會顯示：

檢查結果:
- www.qq.com: 正常
- m.qq.com: 被封禁，原因: 域名被封禁
- www.qq.org: 被封禁，原因: 域名被屏蔽

總結：

通過React和axios，我們可以批量檢查多個QQ域名是否被封禁。用户只需要在輸入框中輸入多個域名，點擊按鈕即可批量查詢，並看到每個域名的狀態。這種方法不僅方便，還可以快速查看多個域名的狀態，有助於管理和監控QQ域名的封禁情況。