{"id":302,"date":"2026-03-20T22:44:04","date_gmt":"2026-03-20T14:44:04","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=302"},"modified":"2026-03-20T22:44:04","modified_gmt":"2026-03-20T14:44:04","slug":"day-29-api%e8%af%b7%e6%b1%82fetch","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=302","title":{"rendered":"Day-29-API\u8bf7\u6c42fetch"},"content":{"rendered":"<h1>Day 29: API\u8bf7\u6c42fetch<\/h1>\n<h2>\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n<ul>\n<li>\u7406\u89e3\u4ec0\u4e48\u662fAPI\u4ee5\u53caHTTP\u534f\u8bae\u57fa\u7840<\/li>\n<li>\u638c\u63e1fetch API\u7684\u57fa\u672c\u7528\u6cd5<\/li>\n<li>\u5b66\u4f1a\u5904\u7406GET\u3001POST\u7b49\u5e38\u89c1\u8bf7\u6c42<\/li>\n<li>\u4e86\u89e3\u5f02\u6b65\u6570\u636e\u83b7\u53d6\u548c\u9519\u8bef\u5904\u7406<\/li>\n<li>\u5b9e\u73b0\u771f\u5b9e\u7684\u5929\u6c14\u67e5\u8be2\u5e94\u7528<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n<h3>\u4ec0\u4e48\u662fAPI\uff1f<\/h3>\n<p><strong>API\uff08Application Programming Interface\uff0c\u5e94\u7528\u7a0b\u5e8f\u7f16\u7a0b\u63a5\u53e3\uff09<strong>\u662f\u4e0d\u540c\u8f6f\u4ef6\u7cfb\u7edf\u4e4b\u95f4\u901a\u4fe1\u7684\u6865\u6881\u3002\u5728Web\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u6700\u5e38\u7528\u7684\u662f<\/strong>Web API<\/strong>\uff0c\u5b83\u901a\u8fc7HTTP\u534f\u8bae\u4f20\u8f93\u6570\u636e\u3002<\/p>\n<p><strong>\u73b0\u5b9e\u7c7b\u6bd4<\/strong>\uff1a<\/p>\n<ul>\n<li>API\u5c31\u50cf\u9910\u5385\u7684<strong>\u670d\u52a1\u5458<\/strong><\/li>\n<li>\u4f60\uff08\u5ba2\u6237\u7aef\uff09\u544a\u8bc9\u670d\u52a1\u5458\u60f3\u8981\u4ec0\u4e48\u83dc\uff08\u8bf7\u6c42\uff09<\/li>\n<li>\u670d\u52a1\u5458\u53bb\u53a8\u623f\uff08\u670d\u52a1\u5668\uff09\u53d6\u83dc<\/li>\n<li>\u6700\u540e\u628a\u83dc\u7aef\u7ed9\u4f60\uff08\u54cd\u5e94\uff09<\/li>\n<\/ul>\n<h3>HTTP\u534f\u8bae\u57fa\u7840<\/h3>\n<p><strong>HTTP\u8bf7\u6c42\u65b9\u6cd5<\/strong>\uff1a<\/p>\n<pre><code>GET    - \u83b7\u53d6\u6570\u636e\uff08\u5b89\u5168\u3001\u5e42\u7b49\uff09\nPOST   - \u521b\u5efa\u65b0\u8d44\u6e90\nPUT    - \u66f4\u65b0\u6574\u4e2a\u8d44\u6e90\nPATCH  - \u90e8\u5206\u66f4\u65b0\u8d44\u6e90\nDELETE - \u5220\u9664\u8d44\u6e90\n<\/code><\/pre>\n<p><strong>HTTP\u72b6\u6001\u7801<\/strong>\uff1a<\/p>\n<pre><code>200 - \u6210\u529f \u2705\n201 - \u5df2\u521b\u5efa \u2705\n400 - \u9519\u8bef\u8bf7\u6c42 \u274c\n401 - \u672a\u6388\u6743 \u274c\n403 - \u7981\u6b62\u8bbf\u95ee \u274c\n404 - \u672a\u627e\u5230 \u274c\n500 - \u670d\u52a1\u5668\u9519\u8bef \u274c\n<\/code><\/pre>\n<h3>Fetch API\u662f\u4ec0\u4e48\uff1f<\/h3>\n<p><strong>Fetch API<\/strong>\u662f\u73b0\u4ee3\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684\u7f51\u7edc\u8bf7\u6c42\u63a5\u53e3\uff0c\u5b83\u57fa\u4e8ePromise\u8bbe\u8ba1\uff0c\u6bd4\u4f20\u7edf\u7684XMLHttpRequest\u66f4\u7b80\u6d01\u3001\u66f4\u5f3a\u5927\u3002<\/p>\n<p><strong>\u57fa\u672c\u8bed\u6cd5<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">fetch(url, options)\n  .then(response =&gt; response.json())  \/\/ \u89e3\u6790JSON\n  .then(data =&gt; console.log(data))    \/\/ \u5904\u7406\u6570\u636e\n  .catch(error =&gt; console.error(error)); \/\/ \u5904\u7406\u9519\u8bef\n<\/code><\/pre>\n<h2>\ud83d\udcdd Fetch API\u8be6\u89e3<\/h2>\n<h3>1. GET\u8bf7\u6c42 &#8211; \u83b7\u53d6\u6570\u636e<\/h3>\n<p><strong>\u57fa\u672c\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u83b7\u53d6\u7528\u6237\u4fe1\u606f\nfetch('https:\/\/jsonplaceholder.typicode.com\/users\/1')\n  .then(response =&gt; {\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n    return response.json();\n  })\n  .then(user =&gt; {\n    console.log('\u7528\u6237\u6570\u636e:', user);\n    displayUserInfo(user);\n  })\n  .catch(error =&gt; {\n    console.error('\u8bf7\u6c42\u5931\u8d25:', error);\n  });\n<\/code><\/pre>\n<p><strong>\u5e26\u53c2\u6570\u7684GET\u8bf7\u6c42<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u4f7f\u7528URLSearchParams\u6784\u5efa\u67e5\u8be2\u5b57\u7b26\u4e32\nconst params = new URLSearchParams({\n  userId: 1,\n  status: 'active'\n});\n\nfetch(`https:\/\/api.example.com\/users?${params}`)\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data));\n\n\/\/ \u6216\u8005\u624b\u52a8\u62fc\u63a5\nfetch('https:\/\/api.example.com\/users?userId=1&amp;status=active')\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data));\n<\/code><\/pre>\n<h3>2. POST\u8bf7\u6c42 &#8211; \u521b\u5efa\u6570\u636e<\/h3>\n<p><strong>\u53d1\u9001JSON\u6570\u636e<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">fetch('https:\/\/jsonplaceholder.typicode.com\/posts', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application\/json',\n  },\n  body: JSON.stringify({\n    title: 'foo',\n    body: 'bar',\n    userId: 1,\n  }),\n})\n  .then(response =&gt; response.json())\n  .then(data =&gt; {\n    console.log('\u6210\u529f\u521b\u5efa:', data);\n    \/\/ \u670d\u52a1\u5668\u8fd4\u56de\u7684\u65b0\u521b\u5efa\u7684\u8d44\u6e90\n    \/\/ { id: 101, title: 'foo', body: 'bar', userId: 1 }\n  });\n<\/code><\/pre>\n<p><strong>\u53d1\u9001\u8868\u5355\u6570\u636e<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">const formData = new FormData();\nformData.append('username', 'john');\nformData.append('email', 'john@example.com');\n\nfetch('https:\/\/api.example.com\/users', {\n  method: 'POST',\n  body: formData, \/\/ \u81ea\u52a8\u8bbe\u7f6eContent-Type\u4e3amultipart\/form-data\n})\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data));\n<\/code><\/pre>\n<h3>3. PUT\u8bf7\u6c42 &#8211; \u66f4\u65b0\u6570\u636e<\/h3>\n<pre><code class=\"language-javascript\">fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1', {\n  method: 'PUT',\n  headers: {\n    'Content-Type': 'application\/json',\n  },\n  body: JSON.stringify({\n    id: 1,\n    title: 'updated title',\n    body: 'updated body',\n    userId: 1,\n  }),\n})\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log('\u66f4\u65b0\u6210\u529f:', data));\n<\/code><\/pre>\n<h3>4. DELETE\u8bf7\u6c42 &#8211; \u5220\u9664\u6570\u636e<\/h3>\n<pre><code class=\"language-javascript\">fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1', {\n  method: 'DELETE',\n})\n  .then(response =&gt; {\n    if (response.ok) {\n      console.log('\u5220\u9664\u6210\u529f');\n    }\n  });\n<\/code><\/pre>\n<h3>5. \u5e38\u7528Request\u9009\u9879<\/h3>\n<pre><code class=\"language-javascript\">fetch('https:\/\/api.example.com\/data', {\n  \/\/ HTTP\u65b9\u6cd5\n  method: 'GET', \/\/ \u6216 'POST', 'PUT', 'DELETE' \u7b49\n\n  \/\/ \u8bf7\u6c42\u5934\n  headers: {\n    'Content-Type': 'application\/json',\n    'Authorization': 'Bearer YOUR_TOKEN',\n    'Accept': 'application\/json',\n  },\n\n  \/\/ \u8bf7\u6c42\u4f53\n  body: JSON.stringify({ key: 'value' }),\n\n  \/\/ \u8bf7\u6c42\u6a21\u5f0f\n  mode: 'cors', \/\/ 'cors', 'no-cors', 'same-origin'\n\n  \/\/ \u51ed\u8bc1\u6a21\u5f0f\n  credentials: 'include', \/\/ 'include', 'same-origin', 'omit'\n\n  \/\/ \u7f13\u5b58\u6a21\u5f0f\n  cache: 'default', \/\/ 'default', 'no-cache', 'reload', 'force-cache'\n\n  \/\/ \u91cd\u5b9a\u5411\u6a21\u5f0f\n  redirect: 'follow', \/\/ 'follow', 'error', 'manual'\n\n  \/\/ \u5f15\u7528\u8005\n  referrer: 'no-referrer', \/\/ 'client', 'no-referrer'\n\n  \/\/ \u4f18\u5148\u7ea7\n  priority: 'high', \/\/ 'high', 'low', 'auto'\n});\n<\/code><\/pre>\n<h2>\ud83c\udfae \u5b9e\u6218\u793a\u4f8b\uff1a\u5929\u6c14\u67e5\u8be2\u5e94\u7528<\/h2>\n<h3>\u5b8c\u6574HTML\u7ed3\u6784<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\u5929\u6c14\u67e5\u8be2\u5e94\u7528&lt;\/title&gt;\n  &lt;style&gt;\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      min-height: 100vh;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 20px;\n    }\n\n    .container {\n      background: white;\n      border-radius: 20px;\n      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n      padding: 40px;\n      max-width: 500px;\n      width: 100%;\n    }\n\n    h1 {\n      text-align: center;\n      color: #333;\n      margin-bottom: 30px;\n      font-size: 2em;\n    }\n\n    .search-box {\n      display: flex;\n      gap: 10px;\n      margin-bottom: 30px;\n    }\n\n    #cityInput {\n      flex: 1;\n      padding: 15px;\n      border: 2px solid #e0e0e0;\n      border-radius: 10px;\n      font-size: 16px;\n      transition: border-color 0.3s;\n    }\n\n    #cityInput:focus {\n      outline: none;\n      border-color: #667eea;\n    }\n\n    #searchBtn {\n      padding: 15px 30px;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      border: none;\n      border-radius: 10px;\n      font-size: 16px;\n      font-weight: bold;\n      cursor: pointer;\n      transition: transform 0.2s;\n    }\n\n    #searchBtn:hover {\n      transform: scale(1.05);\n    }\n\n    #searchBtn:active {\n      transform: scale(0.95);\n    }\n\n    .weather-info {\n      display: none;\n      text-align: center;\n    }\n\n    .weather-info.active {\n      display: block;\n    }\n\n    .weather-icon {\n      font-size: 80px;\n      margin-bottom: 20px;\n    }\n\n    .temperature {\n      font-size: 48px;\n      font-weight: bold;\n      color: #333;\n      margin-bottom: 10px;\n    }\n\n    .description {\n      font-size: 20px;\n      color: #666;\n      margin-bottom: 20px;\n      text-transform: capitalize;\n    }\n\n    .details {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 15px;\n      margin-top: 20px;\n    }\n\n    .detail-item {\n      background: #f5f5f5;\n      padding: 15px;\n      border-radius: 10px;\n    }\n\n    .detail-label {\n      font-size: 12px;\n      color: #999;\n      margin-bottom: 5px;\n    }\n\n    .detail-value {\n      font-size: 18px;\n      font-weight: bold;\n      color: #333;\n    }\n\n    .loading {\n      text-align: center;\n      padding: 20px;\n      font-size: 18px;\n      color: #666;\n    }\n\n    .error {\n      background: #ff4444;\n      color: white;\n      padding: 15px;\n      border-radius: 10px;\n      text-align: center;\n      margin-top: 20px;\n    }\n\n    .history {\n      margin-top: 30px;\n      padding-top: 20px;\n      border-top: 1px solid #e0e0e0;\n    }\n\n    .history-title {\n      font-size: 16px;\n      font-weight: bold;\n      color: #333;\n      margin-bottom: 15px;\n    }\n\n    .history-list {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n    }\n\n    .history-item {\n      background: #f0f0f0;\n      padding: 8px 15px;\n      border-radius: 20px;\n      font-size: 14px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .history-item:hover {\n      background: #e0e0e0;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;h1&gt;\ud83c\udf24\ufe0f \u5929\u6c14\u67e5\u8be2&lt;\/h1&gt;\n\n    &lt;div class=&quot;search-box&quot;&gt;\n      &lt;input\n        type=&quot;text&quot;\n        id=&quot;cityInput&quot;\n        placeholder=&quot;\u8f93\u5165\u57ce\u5e02\u540d\u79f0...&quot;\n        autocomplete=&quot;off&quot;\n      &gt;\n      &lt;button id=&quot;searchBtn&quot;&gt;\u67e5\u8be2&lt;\/button&gt;\n    &lt;\/div&gt;\n\n    &lt;div id=&quot;loading&quot; class=&quot;loading&quot; style=&quot;display: none;&quot;&gt;\n      \u52a0\u8f7d\u4e2d...\n    &lt;\/div&gt;\n\n    &lt;div id=&quot;error&quot; class=&quot;error&quot; style=&quot;display: none;&quot;&gt;&lt;\/div&gt;\n\n    &lt;div id=&quot;weatherInfo&quot; class=&quot;weather-info&quot;&gt;\n      &lt;div class=&quot;weather-icon&quot; id=&quot;weatherIcon&quot;&gt;\u2600\ufe0f&lt;\/div&gt;\n      &lt;div class=&quot;temperature&quot; id=&quot;temperature&quot;&gt;--\u00b0C&lt;\/div&gt;\n      &lt;div class=&quot;description&quot; id=&quot;description&quot;&gt;--&lt;\/div&gt;\n\n      &lt;div class=&quot;details&quot;&gt;\n        &lt;div class=&quot;detail-item&quot;&gt;\n          &lt;div class=&quot;detail-label&quot;&gt;\u6e7f\u5ea6&lt;\/div&gt;\n          &lt;div class=&quot;detail-value&quot; id=&quot;humidity&quot;&gt;--%&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;detail-item&quot;&gt;\n          &lt;div class=&quot;detail-label&quot;&gt;\u98ce\u901f&lt;\/div&gt;\n          &lt;div class=&quot;detail-value&quot; id=&quot;windSpeed&quot;&gt;-- m\/s&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;detail-item&quot;&gt;\n          &lt;div class=&quot;detail-label&quot;&gt;\u4f53\u611f\u6e29\u5ea6&lt;\/div&gt;\n          &lt;div class=&quot;detail-value&quot; id=&quot;feelsLike&quot;&gt;--\u00b0C&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;detail-item&quot;&gt;\n          &lt;div class=&quot;detail-label&quot;&gt;\u6c14\u538b&lt;\/div&gt;\n          &lt;div class=&quot;detail-value&quot; id=&quot;pressure&quot;&gt;-- hPa&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;history&quot;&gt;\n      &lt;div class=&quot;history-title&quot;&gt;\ud83d\udccd \u641c\u7d22\u5386\u53f2&lt;\/div&gt;\n      &lt;div class=&quot;history-list&quot; id=&quot;historyList&quot;&gt;\n        &lt;span style=&quot;color: #999; font-size: 14px;&quot;&gt;\u6682\u65e0\u5386\u53f2\u8bb0\u5f55&lt;\/span&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;script src=&quot;app.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>\u5b8c\u6574JavaScript\u903b\u8f91<\/h3>\n<pre><code class=\"language-javascript\">\/\/ ===== \u5e94\u7528\u72b6\u6001 =====\nlet searchHistory = [];\n\n\/\/ ===== DOM\u5143\u7d20 =====\nconst cityInput = document.getElementById('cityInput');\nconst searchBtn = document.getElementById('searchBtn');\nconst loading = document.getElementById('loading');\nconst error = document.getElementById('error');\nconst weatherInfo = document.getElementById('weatherInfo');\nconst historyList = document.getElementById('historyList');\n\n\/\/ ===== \u5929\u6c14\u56fe\u6807\u6620\u5c04 =====\nconst weatherIcons = {\n  '01d': '\u2600\ufe0f', \/\/ \u6674\u5929\n  '01n': '\ud83c\udf19',\n  '02d': '\u26c5', \/\/ \u591a\u4e91\n  '02n': '\u2601\ufe0f',\n  '03d': '\u2601\ufe0f', \/\/ \u9634\u5929\n  '03n': '\u2601\ufe0f',\n  '04d': '\u2601\ufe0f',\n  '04n': '\u2601\ufe0f',\n  '09d': '\ud83c\udf27\ufe0f', \/\/ \u5c0f\u96e8\n  '09n': '\ud83c\udf27\ufe0f',\n  '10d': '\ud83c\udf26\ufe0f', \/\/ \u96e8\u5929\n  '10n': '\ud83c\udf27\ufe0f',\n  '11d': '\u26c8\ufe0f', \/\/ \u96f7\u9635\u96e8\n  '11n': '\u26c8\ufe0f',\n  '13d': '\u2744\ufe0f', \/\/ \u96ea\n  '13n': '\u2744\ufe0f',\n  '50d': '\ud83c\udf2b\ufe0f', \/\/ \u96fe\n  '50n': '\ud83c\udf2b\ufe0f',\n};\n\n\/\/ ===== API\u914d\u7f6e =====\nconst API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY'; \/\/ \u9700\u8981\u66ff\u6362\u4e3a\u771f\u5b9eAPI\u5bc6\u94a5\nconst API_BASE = 'https:\/\/api.openweathermap.org\/data\/2.5\/weather';\n\n\/\/ ===== \u83b7\u53d6\u5929\u6c14\u6570\u636e =====\nasync function getWeather(city) {\n  \/\/ \u663e\u793a\u52a0\u8f7d\u72b6\u6001\n  loading.style.display = 'block';\n  error.style.display = 'none';\n  weatherInfo.classList.remove('active');\n\n  try {\n    \/\/ \u53d1\u9001API\u8bf7\u6c42\n    const response = await fetch(\n      `${API_BASE}?q=${encodeURIComponent(city)}&amp;units=metric&amp;lang=zh_cn&amp;appid=${API_KEY}`\n    );\n\n    \/\/ \u68c0\u67e5\u54cd\u5e94\u72b6\u6001\n    if (!response.ok) {\n      if (response.status === 404) {\n        throw new Error('\u672a\u627e\u5230\u8be5\u57ce\u5e02\uff0c\u8bf7\u68c0\u67e5\u57ce\u5e02\u540d\u79f0');\n      } else if (response.status === 401) {\n        throw new Error('API\u5bc6\u94a5\u65e0\u6548\uff0c\u8bf7\u68c0\u67e5\u914d\u7f6e');\n      } else {\n        throw new Error(`\u8bf7\u6c42\u5931\u8d25: ${response.status}`);\n      }\n    }\n\n    \/\/ \u89e3\u6790JSON\u6570\u636e\n    const data = await response.json();\n\n    \/\/ \u663e\u793a\u5929\u6c14\u4fe1\u606f\n    displayWeather(data);\n\n    \/\/ \u6dfb\u52a0\u5230\u5386\u53f2\u8bb0\u5f55\n    addToHistory(city);\n\n  } catch (err) {\n    \/\/ \u663e\u793a\u9519\u8bef\u4fe1\u606f\n    showError(err.message);\n  } finally {\n    \/\/ \u9690\u85cf\u52a0\u8f7d\u72b6\u6001\n    loading.style.display = 'none';\n  }\n}\n\n\/\/ ===== \u663e\u793a\u5929\u6c14\u4fe1\u606f =====\nfunction displayWeather(data) {\n  const { main, weather, wind, name } = data;\n\n  \/\/ \u66f4\u65b0\u5929\u6c14\u56fe\u6807\n  const iconCode = weather[0].icon;\n  document.getElementById('weatherIcon').textContent =\n    weatherIcons[iconCode] || '\ud83c\udf21\ufe0f';\n\n  \/\/ \u66f4\u65b0\u6e29\u5ea6\n  document.getElementById('temperature').textContent =\n    `${Math.round(main.temp)}\u00b0C`;\n\n  \/\/ \u66f4\u65b0\u5929\u6c14\u63cf\u8ff0\n  document.getElementById('description').textContent =\n    weather[0].description;\n\n  \/\/ \u66f4\u65b0\u8be6\u7ec6\u4fe1\u606f\n  document.getElementById('humidity').textContent = `${main.humidity}%`;\n  document.getElementById('windSpeed').textContent = `${wind.speed} m\/s`;\n  document.getElementById('feelsLike').textContent =\n    `${Math.round(main.feels_like)}\u00b0C`;\n  document.getElementById('pressure').textContent = `${main.pressure} hPa`;\n\n  \/\/ \u663e\u793a\u5929\u6c14\u4fe1\u606f\n  weatherInfo.classList.add('active');\n}\n\n\/\/ ===== \u663e\u793a\u9519\u8bef\u4fe1\u606f =====\nfunction showError(message) {\n  error.textContent = message;\n  error.style.display = 'block';\n}\n\n\/\/ ===== \u6dfb\u52a0\u5230\u5386\u53f2\u8bb0\u5f55 =====\nfunction addToHistory(city) {\n  \/\/ \u79fb\u9664\u91cd\u590d\u9879\n  searchHistory = searchHistory.filter(item =&gt; item !== city);\n\n  \/\/ \u6dfb\u52a0\u5230\u5f00\u5934\n  searchHistory.unshift(city);\n\n  \/\/ \u9650\u5236\u5386\u53f2\u8bb0\u5f55\u6570\u91cf\n  if (searchHistory.length &gt; 10) {\n    searchHistory = searchHistory.slice(0, 10);\n  }\n\n  \/\/ \u66f4\u65b0\u663e\u793a\n  updateHistoryDisplay();\n\n  \/\/ \u4fdd\u5b58\u5230\u672c\u5730\u5b58\u50a8\n  localStorage.setItem('weatherHistory', JSON.stringify(searchHistory));\n}\n\n\/\/ ===== \u66f4\u65b0\u5386\u53f2\u8bb0\u5f55\u663e\u793a =====\nfunction updateHistoryDisplay() {\n  if (searchHistory.length === 0) {\n    historyList.innerHTML =\n      '&lt;span style=&quot;color: #999; font-size: 14px;&quot;&gt;\u6682\u65e0\u5386\u53f2\u8bb0\u5f55&lt;\/span&gt;';\n    return;\n  }\n\n  historyList.innerHTML = searchHistory\n    .map(city =&gt; `&lt;div class=&quot;history-item&quot; onclick=&quot;searchCity('${city}')&quot;&gt;${city}&lt;\/div&gt;`)\n    .join('');\n}\n\n\/\/ ===== \u4ece\u5386\u53f2\u8bb0\u5f55\u641c\u7d22 =====\nfunction searchCity(city) {\n  cityInput.value = city;\n  getWeather(city);\n}\n\n\/\/ ===== \u52a0\u8f7d\u5386\u53f2\u8bb0\u5f55 =====\nfunction loadHistory() {\n  const saved = localStorage.getItem('weatherHistory');\n  if (saved) {\n    searchHistory = JSON.parse(saved);\n    updateHistoryDisplay();\n  }\n}\n\n\/\/ ===== \u4e8b\u4ef6\u76d1\u542c =====\nsearchBtn.addEventListener('click', () =&gt; {\n  const city = cityInput.value.trim();\n  if (city) {\n    getWeather(city);\n  } else {\n    showError('\u8bf7\u8f93\u5165\u57ce\u5e02\u540d\u79f0');\n  }\n});\n\n\/\/ \u56de\u8f66\u952e\u641c\u7d22\ncityInput.addEventListener('keypress', (e) =&gt; {\n  if (e.key === 'Enter') {\n    searchBtn.click();\n  }\n});\n\n\/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u6062\u590d\u5386\u53f2\u8bb0\u5f55\nloadHistory();\n\n\/\/ \u805a\u7126\u8f93\u5165\u6846\ncityInput.focus();\n<\/code><\/pre>\n<h3>\u5982\u4f55\u83b7\u53d6API\u5bc6\u94a5<\/h3>\n<ol>\n<li>\u8bbf\u95ee https:\/\/openweathermap.org\/api<\/li>\n<li>\u6ce8\u518c\u8d26\u53f7\uff08\u514d\u8d39\uff09<\/li>\n<li>\u5728API keys\u9875\u9762\u83b7\u53d6\u5bc6\u94a5<\/li>\n<li>\u5c06\u4ee3\u7801\u4e2d\u7684<code>YOUR_OPENWEATHERMAP_API_KEY<\/code>\u66ff\u6362\u4e3a\u4f60\u7684\u5bc6\u94a5<\/li>\n<\/ol>\n<h2>\u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n<h3>1. CORS\uff08\u8de8\u57df\u8d44\u6e90\u5171\u4eab\uff09<\/h3>\n<p><strong>\u4ec0\u4e48\u662fCORS\uff1f<\/strong><br \/>\n\u6d4f\u89c8\u5668\u7684\u5b89\u5168\u7b56\u7565\uff0c\u9650\u5236\u7f51\u9875\u5411\u4e0d\u540c\u57df\u7684\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u3002<\/p>\n<p><strong>\u5e38\u89c1CORS\u9519\u8bef<\/strong>\uff1a<\/p>\n<pre><code>Access to fetch at 'https:\/\/api.example.com' from origin 'https:\/\/yoursite.com'\nhas been blocked by CORS policy\n<\/code><\/pre>\n<p><strong>\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a<\/p>\n<ul>\n<li>\u670d\u52a1\u5668\u7aef\u8bbe\u7f6e\u6b63\u786e\u7684CORS\u5934<\/li>\n<li>\u4f7f\u7528\u4ee3\u7406\u670d\u52a1\u5668<\/li>\n<li>\u5f00\u53d1\u73af\u5883\u53ef\u4ee5\u4f7f\u7528CORS\u63d2\u4ef6\uff08\u4ec5\u7528\u4e8e\u6d4b\u8bd5\uff09<\/li>\n<\/ul>\n<h3>2. \u9519\u8bef\u5904\u7406\u6700\u4f73\u5b9e\u8df5<\/h3>\n<pre><code class=\"language-javascript\">async function fetchWithErrorHandling(url, options = {}) {\n  try {\n    const response = await fetch(url, options);\n\n    \/\/ \u68c0\u67e5HTTP\u72b6\u6001\u7801\n    if (!response.ok) {\n      const errorData = await response.json().catch(() =&gt; ({}));\n      throw new Error(\n        errorData.message || `HTTP ${response.status}: ${response.statusText}`\n      );\n    }\n\n    \/\/ \u68c0\u67e5Content-Type\n    const contentType = response.headers.get('content-type');\n    if (!contentType || !contentType.includes('application\/json')) {\n      throw new Error('\u54cd\u5e94\u4e0d\u662fJSON\u683c\u5f0f');\n    }\n\n    return await response.json();\n\n  } catch (error) {\n    \/\/ \u7f51\u7edc\u9519\u8bef\u6216JSON\u89e3\u6790\u9519\u8bef\n    if (error instanceof TypeError) {\n      throw new Error('\u7f51\u7edc\u8fde\u63a5\u5931\u8d25');\n    }\n    throw error;\n  }\n}\n\n\/\/ \u4f7f\u7528\u793a\u4f8b\nfetchWithErrorHandling('https:\/\/api.example.com\/data')\n  .then(data =&gt; console.log(data))\n  .catch(error =&gt; console.error('\u9519\u8bef:', error.message));\n<\/code><\/pre>\n<h3>3. \u8bf7\u6c42\u8d85\u65f6\u5904\u7406<\/h3>\n<pre><code class=\"language-javascript\">function fetchWithTimeout(url, options = {}, timeout = 5000) {\n  return Promise.race([\n    fetch(url, options),\n    new Promise((_, reject) =&gt;\n      setTimeout(() =&gt; reject(new Error('\u8bf7\u6c42\u8d85\u65f6')), timeout)\n    ),\n  ]);\n}\n\n\/\/ \u4f7f\u7528\u793a\u4f8b\nfetchWithTimeout('https:\/\/api.example.com\/data', {}, 3000)\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data))\n  .catch(error =&gt; console.error('\u9519\u8bef:', error.message));\n<\/code><\/pre>\n<h3>4. \u53d6\u6d88\u8bf7\u6c42\uff08AbortController\uff09<\/h3>\n<pre><code class=\"language-javascript\">const controller = new AbortController();\n\n\/\/ 5\u79d2\u540e\u81ea\u52a8\u53d6\u6d88\nsetTimeout(() =&gt; controller.abort(), 5000);\n\nfetch('https:\/\/api.example.com\/data', {\n  signal: controller.signal\n})\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data))\n  .catch(error =&gt; {\n    if (error.name === 'AbortError') {\n      console.log('\u8bf7\u6c42\u5df2\u53d6\u6d88');\n    } else {\n      console.error('\u5176\u4ed6\u9519\u8bef:', error);\n    }\n  });\n\n\/\/ \u624b\u52a8\u53d6\u6d88\n\/\/ controller.abort();\n<\/code><\/pre>\n<h3>5. API\u5bc6\u94a5\u5b89\u5168<\/h3>\n<p><strong>\u26a0\ufe0f \u6c38\u8fdc\u4e0d\u8981\u5728\u524d\u7aef\u4ee3\u7801\u4e2d\u786c\u7f16\u7801\u654f\u611f\u7684API\u5bc6\u94a5\uff01<\/strong><\/p>\n<p><strong>\u4e3a\u4ec0\u4e48\uff1f<\/strong><\/p>\n<ul>\n<li>\u524d\u7aef\u4ee3\u7801\u5bf9\u6240\u6709\u4eba\u53ef\u89c1<\/li>\n<li>\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u67e5\u770b\u6e90\u4ee3\u7801\u7a83\u53d6\u5bc6\u94a5<\/li>\n<\/ul>\n<p><strong>\u6b63\u786e\u505a\u6cd5<\/strong>\uff1a<\/p>\n<ul>\n<li>\u4f7f\u7528\u4ee3\u7406\u670d\u52a1\u5668\u8f6c\u53d1\u8bf7\u6c42<\/li>\n<li>\u670d\u52a1\u5668\u7aef\u4fdd\u5b58\u5bc6\u94a5<\/li>\n<li>\u524d\u7aef\u53ea\u8bf7\u6c42\u81ea\u5df1\u7684\u670d\u52a1\u5668<\/li>\n<\/ul>\n<p><strong>\u793a\u4f8b<\/strong>\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u274c \u9519\u8bef\u505a\u6cd5\nconst API_KEY = 'sk-1234567890abcdef';\nfetch('https:\/\/api.example.com\/data?key=' + API_KEY);\n\n\/\/ \u2705 \u6b63\u786e\u505a\u6cd5\nfetch('\/api\/weather?city=Beijing');\n\/\/ \u670d\u52a1\u5668\u7aef\u8f6c\u53d1\u8bf7\u6c42\uff0c\u6dfb\u52a0\u5bc6\u94a5\n<\/code><\/pre>\n<h3>6. \u8282\u6d41\u548c\u9632\u6296<\/h3>\n<p><strong>\u8282\u6d41\uff08Throttle\uff09<\/strong>\uff1a\u9650\u5236\u51fd\u6570\u6267\u884c\u9891\u7387<\/p>\n<pre><code class=\"language-javascript\">function throttle(func, delay) {\n  let lastCall = 0;\n  return function(...args) {\n    const now = new Date().getTime();\n    if (now - lastCall &lt; delay) return;\n    lastCall = now;\n    return func.apply(this, args);\n  };\n}\n\n\/\/ \u4f7f\u7528\u793a\u4f8b\uff1a\u9650\u5236\u641c\u7d22\u9891\u7387\nconst throttledSearch = throttle((city) =&gt; {\n  getWeather(city);\n}, 1000); \/\/ \u6700\u5c11\u95f4\u96941\u79d2\n<\/code><\/pre>\n<p><strong>\u9632\u6296\uff08Debounce\uff09<\/strong>\uff1a\u5ef6\u8fdf\u6267\u884c\uff0c\u53ea\u5728\u6700\u540e\u4e00\u6b21\u89e6\u53d1\u540e\u6267\u884c<\/p>\n<pre><code class=\"language-javascript\">function debounce(func, delay) {\n  let timeoutId;\n  return function(...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() =&gt; {\n      func.apply(this, args);\n    }, delay);\n  };\n}\n\n\/\/ \u4f7f\u7528\u793a\u4f8b\uff1a\u8f93\u5165\u505c\u6b62\u540e\u624d\u641c\u7d22\nconst debouncedSearch = debounce((city) =&gt; {\n  if (city) getWeather(city);\n}, 500); \/\/ \u505c\u6b62\u8f93\u5165500ms\u540e\u6267\u884c\n<\/code><\/pre>\n<h2>\u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n<h3>\u57fa\u7840\u7ec3\u4e60<\/h3>\n<ol>\n<li>\n<p><strong>\u7ec3\u4e60fetch\u8bf7\u6c42<\/strong><\/p>\n<ul>\n<li>\u4f7f\u7528JSONPlaceholder API\u7ec3\u4e60GET\u8bf7\u6c42<\/li>\n<li>\u5c1d\u8bd5\u83b7\u53d6\u7528\u6237\u5217\u8868\u3001\u6587\u7ae0\u5217\u8868<\/li>\n<li>\u663e\u793a\u83b7\u53d6\u7684\u6570\u636e<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u9519\u8bef\u5904\u7406\u7ec3\u4e60<\/strong><\/p>\n<ul>\n<li>\u6545\u610f\u8f93\u5165\u9519\u8bef\u7684URL<\/li>\n<li>\u5b9e\u73b0\u5b8c\u6574\u7684\u9519\u8bef\u5904\u7406\u903b\u8f91<\/li>\n<li>\u663e\u793a\u53cb\u597d\u7684\u9519\u8bef\u63d0\u793a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u8fdb\u9636\u7ec3\u4e60<\/h3>\n<ol start=\"3\">\n<li>\n<p><strong>\u5b9e\u73b0\u8282\u6d41\u548c\u9632\u6296<\/strong><\/p>\n<ul>\n<li>\u4e3a\u641c\u7d22\u6846\u6dfb\u52a0\u9632\u6296\u529f\u80fd<\/li>\n<li>\u4f18\u5316\u7528\u6237\u4f53\u9a8c\uff0c\u51cf\u5c11API\u8bf7\u6c42<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u6dfb\u52a0\u52a0\u8f7d\u72b6\u6001<\/strong><\/p>\n<ul>\n<li>\u5728\u8bf7\u6c42\u671f\u95f4\u663e\u793a\u52a0\u8f7d\u52a8\u753b<\/li>\n<li>\u7981\u7528\u641c\u7d22\u6309\u94ae\u9632\u6b62\u91cd\u590d\u70b9\u51fb<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u5b9e\u6218\u7ec3\u4e60<\/h3>\n<ol start=\"5\">\n<li>\n<p><strong>\u6269\u5c55\u5929\u6c14\u5e94\u7528<\/strong><\/p>\n<ul>\n<li>\u6dfb\u52a0\u672a\u67655\u5929\u5929\u6c14\u9884\u62a5<\/li>\n<li>\u663e\u793a\u5929\u6c14\u56fe\u8868\uff08\u6e29\u5ea6\u53d8\u5316\u8d8b\u52bf\uff09<\/li>\n<li>\u652f\u6301\u591a\u57ce\u5e02\u5bf9\u6bd4<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u521b\u5efa\u5176\u4ed6API\u5e94\u7528<\/strong><\/p>\n<ul>\n<li>GitHub\u7528\u6237\u641c\u7d22<\/li>\n<li>\u7535\u5f71\u4fe1\u606f\u67e5\u8be2\uff08TMDB API\uff09<\/li>\n<li>\u65b0\u95fb\u9605\u8bfb\u5668<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>\ud83c\udf93 \u4eca\u65e5\u6311\u6218<\/h2>\n<h3>\u6311\u6218\u4efb\u52a1\uff1a\u589e\u5f3a\u7248\u5929\u6c14\u5e94\u7528<\/h3>\n<p><strong>\u9700\u6c42<\/strong>\uff1a<\/p>\n<ol>\n<li>\u652f\u6301\u7528\u6237\u5f53\u524d\u4f4d\u7f6e\u81ea\u52a8\u5b9a\u4f4d<\/li>\n<li>\u6dfb\u52a0\u591a\u57ce\u5e02\u7ba1\u7406\uff08\u4fdd\u5b58\u504f\u597d\u57ce\u5e02\uff09<\/li>\n<li>\u5b9e\u73b0\u5929\u6c14\u9884\u8b66\u529f\u80fd<\/li>\n<li>\u6dfb\u52a0\u5929\u6c14\u5206\u4eab\u529f\u80fd\uff08\u751f\u6210\u5206\u4eab\u94fe\u63a5\uff09<\/li>\n<\/ol>\n<p><strong>\u63d0\u793a<\/strong>\uff1a<\/p>\n<ul>\n<li>\u4f7f\u7528Geolocation API\u83b7\u53d6\u5f53\u524d\u4f4d\u7f6e<\/li>\n<li>\u4f7f\u7528localStorage\u4fdd\u5b58\u57ce\u5e02\u5217\u8868<\/li>\n<li>\u67e5\u9605\u5929\u6c14API\u6587\u6863\u83b7\u53d6\u9884\u8b66\u6570\u636e<\/li>\n<\/ul>\n<h2>\ud83d\udca1 \u5e38\u89c1\u95ee\u9898 FAQ<\/h2>\n<h3>Q1: fetch\u548caxios\u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n<p><strong>Fetch API<\/strong>:<\/p>\n<ul>\n<li>\u539f\u751f\u6d4f\u89c8\u5668API\uff0c\u65e0\u9700\u5b89\u88c5<\/li>\n<li>\u57fa\u4e8ePromise\u8bbe\u8ba1<\/li>\n<li>\u9700\u8981\u624b\u52a8\u5904\u7406\u67d0\u4e9b\u7ec6\u8282\uff08\u5982\u8d85\u65f6\u3001\u53d6\u6d88\uff09<\/li>\n<\/ul>\n<p><strong>Axios<\/strong>:<\/p>\n<ul>\n<li>\u7b2c\u4e09\u65b9\u5e93\uff0c\u9700\u8981\u5f15\u5165<\/li>\n<li>\u81ea\u52a8\u8f6c\u6362JSON\u6570\u636e<\/li>\n<li>\u5185\u7f6e\u8bf7\u6c42\/\u54cd\u5e94\u62e6\u622a\u5668<\/li>\n<li>\u66f4\u597d\u7684\u9519\u8bef\u5904\u7406<\/li>\n<li>\u652f\u6301\u8bf7\u6c42\u8d85\u65f6\u914d\u7f6e<\/li>\n<\/ul>\n<p><strong>\u9009\u62e9\u5efa\u8bae<\/strong>\uff1a<\/p>\n<ul>\n<li>\u5c0f\u9879\u76ee\uff1a\u4f7f\u7528fetch\uff08\u8f7b\u91cf\uff09<\/li>\n<li>\u5927\u9879\u76ee\uff1a\u4f7f\u7528axios\uff08\u529f\u80fd\u5b8c\u5584\uff09<\/li>\n<\/ul>\n<h3>Q2: \u5982\u4f55\u5904\u7406\u6587\u4ef6\u4e0a\u4f20\uff1f<\/h3>\n<pre><code class=\"language-javascript\">const fileInput = document.getElementById('fileInput');\nconst file = fileInput.files[0];\n\nconst formData = new FormData();\nformData.append('file', file);\nformData.append('description', 'My file');\n\nfetch('https:\/\/api.example.com\/upload', {\n  method: 'POST',\n  body: formData,\n})\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log('\u4e0a\u4f20\u6210\u529f:', data));\n<\/code><\/pre>\n<h3>Q3: \u5982\u4f55\u8bbe\u7f6e\u8bf7\u6c42\u8d85\u65f6\uff1f<\/h3>\n<p>\u53c2\u89c1\u4e0a\u9762\u7684&quot;\u8bf7\u6c42\u8d85\u65f6\u5904\u7406&quot;\u7ae0\u8282\uff0c\u4f7f\u7528<code>Promise.race()<\/code>\u5b9e\u73b0\u3002<\/p>\n<h3>Q4: \u5982\u4f55\u5e76\u884c\u53d1\u9001\u591a\u4e2a\u8bf7\u6c42\uff1f<\/h3>\n<pre><code class=\"language-javascript\">\/\/ Promise.all - \u6240\u6709\u8bf7\u6c42\u90fd\u6210\u529f\nPromise.all([\n  fetch('https:\/\/api.example.com\/users'),\n  fetch('https:\/\/api.example.com\/posts'),\n  fetch('https:\/\/api.example.com\/comments'),\n])\n  .then(responses =&gt; Promise.all(responses.map(r =&gt; r.json())))\n  .then(([users, posts, comments]) =&gt; {\n    console.log('\u7528\u6237:', users);\n    console.log('\u6587\u7ae0:', posts);\n    console.log('\u8bc4\u8bba:', comments);\n  });\n\n\/\/ Promise.allSettled - \u7b49\u5f85\u6240\u6709\u8bf7\u6c42\u5b8c\u6210\uff08\u4e0d\u7ba1\u6210\u529f\u6216\u5931\u8d25\uff09\nPromise.allSettled([\n  fetch('https:\/\/api.example.com\/users'),\n  fetch('https:\/\/api.example.com\/posts'),\n])\n  .then(results =&gt; {\n    results.forEach((result, i) =&gt; {\n      if (result.status === 'fulfilled') {\n        console.log(`\u8bf7\u6c42${i + 1}\u6210\u529f:`, result.value);\n      } else {\n        console.error(`\u8bf7\u6c42${i + 1}\u5931\u8d25:`, result.reason);\n      }\n    });\n  });\n<\/code><\/pre>\n<h2>\ud83d\udcda \u62d3\u5c55\u9605\u8bfb<\/h2>\n<h3>\u63a8\u8350\u8d44\u6e90<\/h3>\n<ol>\n<li>\n<p><strong>MDN &#8211; Fetch API<\/strong>:<br \/>\nhttps:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/API\/Fetch_API<\/p>\n<\/li>\n<li>\n<p><strong>HTTP\u534f\u8bae\u8be6\u89e3<\/strong>:<br \/>\nhttps:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/HTTP<\/p>\n<\/li>\n<li>\n<p><strong>RESTful API\u8bbe\u8ba1\u6307\u5357<\/strong>:<br \/>\nhttps:\/\/restfulapi.net\/<\/p>\n<\/li>\n<li>\n<p><strong>\u514d\u8d39API\u8d44\u6e90<\/strong>:<\/p>\n<ul>\n<li>JSONPlaceholder: https:\/\/jsonplaceholder.typicode.com\/<\/li>\n<li>OpenWeatherMap: https:\/\/openweathermap.org\/api<\/li>\n<li>GitHub API: https:\/\/docs.github.com\/en\/rest<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u4e0b\u4e00\u6b65\u5b66\u4e60<\/h3>\n<ul>\n<li><strong>Day 30<\/strong>: \u9879\u76ee6-\u5929\u6c14\u67e5\u8be2\u5e94\u7528\uff08\u5b8c\u6574\u5b9e\u73b0\uff09<\/li>\n<li><strong>async\/await\u6df1\u5165<\/strong><\/li>\n<li><strong>WebSocket\u5b9e\u65f6\u901a\u4fe1<\/strong><\/li>\n<li><strong>GraphQL API<\/strong><\/li>\n<\/ul>\n<hr>\n<p><strong>\u4e0b\u4e00\u6b65\u5b66\u4e60<\/strong>: <a href=\"..\/09-%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98\/Day-30-%E9%A1%B9%E7%9B%AE6-%E5%A4%A9%E6%B0%94%E6%9F%A5%E8%AF%A2%E5%BA%94%E7%94%A8.md\">Day 30: \u9879\u76ee6-\u5929\u6c14\u67e5\u8be2\u5e94\u7528<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Day 29: API\u8bf7\u6c42fetch \ud83c\udfaf \u5b66\u4e60\u76ee\u6807 \u7406\u89e3\u4ec0\u4e48\u662fAPI\u4ee5\u53caHTTP\u534f\u8bae\u57fa\u7840 \u638c\u63e1fetch AP &#8230; <a title=\"Day-29-API\u8bf7\u6c42fetch\" class=\"read-more\" href=\"https:\/\/www.resilence.cn\/?p=302\" aria-label=\"\u7ee7\u7eed\u9605\u8bfbDay-29-API\u8bf7\u6c42fetch\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-302","post","type-post","status-publish","format-standard","hentry","category-studycoding"],"_links":{"self":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=302"}],"version-history":[{"count":1,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/302\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/302\/revisions\/303"}],"wp:attachment":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}