// 浏览器 API —— 浏览器暴露给 JS 的能力
document.querySelector('.title')           // DOM API
localStorage.setItem('token', 'abc123')    // 存储 API
fetch('/api/users')                         // 网络 API
 
// 库 API —— React 暴露给使用者的能力
import { useState, useEffect } from 'react'
const [count, setCount] = useState(0)

const res = await fetch('https://api.github.com/users/coyafky')
const user = await res.json()
console.log(user.name)      // 输出什么？
console.log(user.public_repos)  // 输出什么？

// ❌ 错误：data 是 Response 对象，不是 JSON
const data = await fetch('https://api.github.com/users/coyafky')
console.log(data.name)  // undefined
 
// ✅ 正确：先 .json() 解析
const res = await fetch('https://api.github.com/users/coyafky')
const data = await res.json()
console.log(data.name)  // "coyafky"

// 404 不会抛异常！res.ok 才是判断标准
const res = await fetch('https://api.github.com/users/不存在的用户')
// res.status === 404，res.ok === false
// 但代码不会进 catch
 
// ✅ 正确做法：手动检查
if (!res.ok) {
    throw new Error(`请求失败: ${res.status}`)
}
const data = await res.json()

POST https://api.example.com/articles
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
User-Agent: Mozilla/5.0
 
{"title":"API从0-1","content":"正文...","tags":["api","web"]}

HTTP/1.1 201 Created
Content-Type: application/json
Location: /articles/456
 
{"id":456,"title":"API从0-1","createdAt":"2026-07-09T10:30:00Z"}

# ✅ 好：URL 是名词，方法表达动作
GET  /articles/123
POST /articles
DELETE /articles/123
 
# ❌ 坏：URL 暴露了内部实现
GET  /api/getArticles?id=123
POST /api/doCreateArticle
GET  /api/deleteUser

// server.js —— 一个不到 30 行的 API 服务器
import http from 'node:http'
 
const articles = [
    { id: 1, title: 'Hello World', content: '第一篇内容' },
    { id: 2, title: 'API从0-1', content: '从调接口到自己写接口' },
]
 
const server = http.createServer((req, res) => {
    // 设置 CORS，允许前端跨域调用
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Content-Type', 'application/json')
 
    // 路由：根据方法和路径分发
    if (req.method === 'GET' && req.url === '/api/articles') {
        res.writeHead(200)
        res.end(JSON.stringify(articles))
    } else if (req.method === 'GET' && req.url?.startsWith('/api/articles/')) {
        const id = Number(req.url.split('/').pop())
        const article = articles.find(a => a.id === id)
        if (article) {
            res.writeHead(200)
            res.end(JSON.stringify(article))
        } else {
            res.writeHead(404)
            res.end(JSON.stringify({ error: '文章不存在' }))
        }
    } else {
        res.writeHead(404)
        res.end(JSON.stringify({ error: '接口不存在' }))
    }
})
 
server.listen(3001, () => {
    console.log('API 服务器跑在 http://localhost:3001')
})

node server.js
# 输出: API 服务器跑在 http://localhost:3001

# 获取所有文章
curl http://localhost:3001/api/articles
# → [{"id":1,"title":"Hello World",...},{"id":2,"title":"API从0-1",...}]
 
# 获取单篇文章
curl http://localhost:3001/api/articles/1
# → {"id":1,"title":"Hello World","content":"第一篇内容"}
 
# 不存在的文章
curl http://localhost:3001/api/articles/999
# → {"error":"文章不存在"}

const res = await fetch('http://localhost:3001/api/articles')
const articles = await res.json()
console.table(articles)

// 登录 → 服务器返回 token
const loginRes = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email: 'coya@example.com', password: '...' })
})
const { token } = await loginRes.json()
 
// 之后每次请求带上 token
const res = await fetch('https://api.example.com/me', {
    headers: { 'Authorization': `Bearer ${token}` }
})
const user = await res.json()

// 在 createServer 回调最前面加上
const TOKEN = 'secret-token-123'
 
// 简单的 Bearer Token 验证
const authHeader = req.headers['authorization']
if (!authHeader || authHeader !== `Bearer ${TOKEN}`) {
    res.writeHead(401)
    res.end(JSON.stringify({ error: '未授权，请提供有效的 token' }))
    return
}

# ❌ 不带 token
curl http://localhost:3001/api/articles
# → {"error":"未授权，请提供有效的 token"}
 
# ✅ 带 token
curl -H "Authorization: Bearer secret-token-123" \
     http://localhost:3001/api/articles
# → [{"id":1,...}]

# GET（最简单）
curl https://api.github.com/users/coyafky
 
# 只看响应头
curl -I https://api.github.com
 
# POST + JSON body
curl -X POST http://localhost:3001/api/articles \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer secret-token-123" \
  -d '{"title":"新文章","content":"正文"}'
 
# 看完整调试信息（查问题神器）
curl -v https://api.github.com/users/coyafky

# 查用户信息
curl https://api.github.com/users/coyafky
 
# 查仓库列表
curl https://api.github.com/users/coyafky/repos
 
# 查某个仓库
curl https://api.github.com/repos/coyafky/PersonWebsite
 
# 查仓库的 README（返回 base64 编码的 markdown）
curl https://api.github.com/repos/coyafky/PersonWebsite/readme

import { useState, useEffect } from 'react'
 
function GitHubUser({ username }) {
    const [user, setUser] = useState(null)
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(null)
 
    useEffect(() => {
        let cancelled = false
        async function load() {
            try {
                setLoading(true)
                setError(null)
                const res = await fetch(`https://api.github.com/users/${username}`)
                if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`)
                const data = await res.json()
                if (!cancelled) setUser(data)
            } catch (err) {
                if (!cancelled) setError(err)
            } finally {
                if (!cancelled) setLoading(false)
            }
        }
        load()
        return () => { cancelled = true }
    }, [username])
 
    if (loading) return <p>加载中...</p>
    if (error) return <p>出错了: {error.message}</p>
    if (!user) return null
 
    return (
        <div>
            <img src={user.avatar_url} width={80} alt={user.login} />
            <h2>{user.name || user.login}</h2>
            <p>{user.bio}</p>
            <p>粉丝: {user.followers} · 仓库: {user.public_repos}</p>
        </div>
    )
}