一、官网地址

cnodejs.org/api

二、实际使用

import React, { useState, useEffect } from 'react'
import './index.less'

const Home = () => {
  const [list, setList] = useState([])
  const [detail, setDetail] = useState({})
  const [page, setPage] = useState(1)

  const getList = async () => {
    const url = `https://cnodejs.org/api/v1/topics/?page=${page}&limit=10`
    const { success, data } = await (await fetch(url, { method: 'get' })).json()
    if (success) setList(data)
  }

  const handleDetail = async (item) => {
    const { success, data } = await (
      await fetch('https://cnodejs.org/api/v1/topic/' + item.id)
    ).json()
    if (success) setDetail(data)
  }

  useEffect(() => {
    getList()
  }, [page])

  if (!list.length) return <>loading</>
  return (
    <>
      <button onClick={() => setPage(page - 1)} disabled={page === 1}>
        上一页
      </button>
      <button onClick={() => setPage(page + 1)}>下一页</button>
      <div className="wrapper">
        <ul>
          {list.map((item) => (
            <li key={item.id} onClick={() => handleDetail(item)}>
              {item.title}
            </li>
          ))}
        </ul>
        <div dangerouslySetInnerHTML={{ __html: detail.content }}></div>
      </div>
    </>
  )
}

export default Home

三、其他开放API

中国天气网