{"id":1171,"date":"2020-08-10T20:18:24","date_gmt":"2020-08-10T12:18:24","guid":{"rendered":"https:\/\/jimmyswebnote.com\/?p=1171"},"modified":"2021-08-23T14:58:44","modified_gmt":"2021-08-23T06:58:44","slug":"use-javascript-to-connect-api-with-unsplash","status":"publish","type":"post","link":"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/","title":{"rendered":"\u3010JavaScript\u700f\u89bd\u5668\u3011\uff1a\u5be6\u4f5c\u4e32\u63a5 API (1) \u23e4 Unsplash API"},"content":{"rendered":"\n<p>\u56e0\u70ba\u5c0d\u7528 JavaScript \u4e32\u63a5 API \u6eff\u4e0d\u719f\u6089\u7684\uff0c\u518d\u52a0\u4e0a\u6700\u8fd1\u770b\u4e86\u4e9b\u8077\u7f3a\u7528 JavaScript \u4e32\u63a5 API \u53c8\u662f\u5fc5\u5099\u6280\u80fd\uff0c\u6240\u4ee5\u6c7a\u5b9a\u4f86\u82b1\u9ede\u6642\u9593\u597d\u597d\u641e\u61c2\u9019\u584a\uff0c\u9806\u4fbf\u7df4\u7fd2\u5be6\u4f5c\uff0c\u6bd4\u8f03\u5bb9\u6613\u767c\u73fe\u554f\u984c\u51fa\u5728\u54ea\u88e1\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u4f60\u5c0d API \u9084\u6c92\u6709\u4efb\u4f55\u6982\u5ff5\uff0c\u6b61\u8fce\u53c3\u8003\u6211\u7684\u53e6\u4e00\u7bc7\u6587\u7ae0\uff1a<a aria-label=\" (opens in a new tab)\" href=\"https:\/\/jimmyswebnote.com\/what-is-api\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">API \u662f\u4ec0\u9ebc ? \u6700\u9069\u5408\u524d\u7aef\u521d\u5b78\u8005\u7684 API \u6982\u5ff5\u89e3\u91cb<\/a>\uff01<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-662f79fc87a31\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-662f79fc87a31\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#1_%E4%BB%80%E9%BA%BC%E6%98%AF_API\" title=\"1. \u4ec0\u9ebc\u662f API\">1. \u4ec0\u9ebc\u662f API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#2_%E4%B8%B2%E6%8E%A5_API_%E7%9A%84%E6%AD%A5%E9%A9%9F\" title=\"2. \u4e32\u63a5 API \u7684\u6b65\u9a5f\">2. \u4e32\u63a5 API \u7684\u6b65\u9a5f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#21_%E7%80%8F%E8%A6%BD_API_%E6%96%87%E4%BB%B6\" title=\"2.1 \u700f\u89bd API \u6587\u4ef6\">2.1 \u700f\u89bd API \u6587\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#22_%E6%80%9D%E8%80%83%E8%A6%81%E7%94%A8%E9%80%99%E4%BA%9B%E8%B3%87%E6%96%99%E5%81%9A%E4%BB%80%E9%BA%BC%E4%BA%8B%E6%83%85\" title=\"2.2 \u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5\">2.2 \u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#23_%E7%94%A8_JavaScript_%E4%B8%B2%E6%8E%A5_API_%EF%BC%8C%E5%8F%96%E5%BE%97%E5%8B%95%E6%85%8B%E8%B3%87%E6%96%99\" title=\"2.3 \u7528 JavaScript \u4e32\u63a5 API \uff0c\u53d6\u5f97\u52d5\u614b\u8cc7\u6599\">2.3 \u7528 JavaScript \u4e32\u63a5 API \uff0c\u53d6\u5f97\u52d5\u614b\u8cc7\u6599<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#24_%E9%96%8B%E5%A7%8B%E5%88%87%E7%89%88\" title=\"2.4 \u958b\u59cb\u5207\u7248\">2.4 \u958b\u59cb\u5207\u7248<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#3_%E5%AF%A6%E4%BD%9C_Unsplash_API\" title=\"3. \u5be6\u4f5c Unsplash API\">3. \u5be6\u4f5c Unsplash API<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#31_%E7%80%8F%E8%A6%BD_Unsplash_%E7%9A%84_API_%E6%96%87%E4%BB%B6\" title=\"3.1 \u700f\u89bd Unsplash \u7684 API \u6587\u4ef6\">3.1 \u700f\u89bd Unsplash \u7684 API \u6587\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#32_%E6%80%9D%E8%80%83%E8%A6%81%E7%94%A8%E9%80%99%E4%BA%9B%E8%B3%87%E6%96%99%E5%81%9A%E4%BB%80%E9%BA%BC%E4%BA%8B%E6%83%85\" title=\"3.2 \u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5\">3.2 \u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#33_%E9%96%8B%E5%A7%8B%E7%94%A8_JavaScript_%E4%B8%B2%E6%8E%A5_API\" title=\"3.3 \u958b\u59cb\u7528 JavaScript \u4e32\u63a5 API\">3.3 \u958b\u59cb\u7528 JavaScript \u4e32\u63a5 API<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#331_%E7%99%BB%E9%8C%84_Application_%3E_%E5%8F%96%E5%BE%97_Access_key%E3%80%81Secret_key\" title=\"3.3.1 \u767b\u9304 Application =&gt; \u53d6\u5f97 Access key\u3001Secret key\">3.3.1 \u767b\u9304 Application =&gt; \u53d6\u5f97 Access key\u3001Secret key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#332_%E5%B0%87_Access_key_%E6%94%BE%E5%88%B0_request_%E7%9A%84_url_%E4%B8%AD\" title=\"3.3.2 \u5c07 Access key \u653e\u5230 request \u7684 url \u4e2d\">3.3.2 \u5c07 Access key \u653e\u5230 request \u7684 url \u4e2d<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/#34_%E9%96%8B%E5%A7%8B%E5%88%87%E7%89%88\" title=\"3.4 \u958b\u59cb\u5207\u7248\">3.4 \u958b\u59cb\u5207\u7248<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_%E4%BB%80%E9%BA%BC%E6%98%AF_API\"><\/span>1. \u4ec0\u9ebc\u662f API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>API \u7684\u5168\u540d\u662f Application Programming Interface \uff0c\u4e2d\u6587\u70ba\u300c\u61c9\u7528\u7a0b\u5f0f\u4ecb\u9762\u300d\u3002 API \u7684\u61c9\u7528\u53ca\u7bc4\u570d\u975e\u5e38\u5ee3\u6cdb\uff0c\u5728\u9019\u7bc7\u6587\u7ae0\u4e2d\u6211\u6240\u8ac7\u5230\u7684 API \u6307\u7684\u662f\u61c9\u7528\u5728\u7db2\u9801\u7684 API \u3002<\/p>\n\n\n\n<p>\u90a3\u9ebc\u5728\u5beb\u7db2\u9801\u7684\u904e\u7a0b\u4e2d\u4ec0\u9ebc\u6642\u5019\u6703\u7528\u5230 API \u5462\uff1f\u7576\u4f60\u9700\u8981\u5f9e\u5f8c\u7aef(\u4f3a\u670d\u5668)\u53d6\u5f97\u8cc7\u6599\u6642\uff0c\u5c31\u9700\u8981\u4e32\u63a5\u5f8c\u7aef\u6240\u63d0\u4f9b\u7684 API \uff0c\u6216\u662f\u7576\u4f60\u9700\u8981\u7b2c\u4e09\u65b9\u7db2\u9801\u3001 APP \u7b49\u7b49\u63d0\u4f9b\u4e00\u4e9b\u8cc7\u6599\u6216\u670d\u52d9\u6642(ex: Google Map)\uff0c\u5c31\u5fc5\u9808\u53bb\u770b\u7b2c\u4e09\u65b9\u7db2\u9801\u7684 API \u6587\u4ef6\u4f86\u7528 JavaScript \u4e32\u63a5 API \u3002<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"2_%E4%B8%B2%E6%8E%A5_API_%E7%9A%84%E6%AD%A5%E9%A9%9F\"><\/span>2. \u4e32\u63a5 API \u7684\u6b65\u9a5f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"21_%E7%80%8F%E8%A6%BD_API_%E6%96%87%E4%BB%B6\"><\/span>2.1 \u700f\u89bd API \u6587\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u4e32\u63a5API\u7684\u7b2c\u4e00\u500b\u6b65\u9a5f\u8981\u5148\u5230\u8a72\u7db2\u7ad9\u700f\u89bd API \u6587\u4ef6\uff0c\u901a\u5e38\u8a72\u6587\u4ef6\u6703\u63cf\u8ff0 API \u63d0\u4f9b\u4e86\u54ea\u4e9b\u8cc7\u6599\uff0c\u4ee5\u53ca API \u7684\u4f7f\u7528\u65b9\u6cd5\u3001\u6ce8\u610f\u4e8b\u9805\u7b49\u7b49\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"22_%E6%80%9D%E8%80%83%E8%A6%81%E7%94%A8%E9%80%99%E4%BA%9B%E8%B3%87%E6%96%99%E5%81%9A%E4%BB%80%E9%BA%BC%E4%BA%8B%E6%83%85\"><\/span>2.2 \u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u700f\u89bd\u904e API \u6587\u4ef6\u5f8c\u5c31\u53ef\u4ee5\u958b\u59cb\u601d\u8003\u8981\u4f7f\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"23_%E7%94%A8_JavaScript_%E4%B8%B2%E6%8E%A5_API_%EF%BC%8C%E5%8F%96%E5%BE%97%E5%8B%95%E6%85%8B%E8%B3%87%E6%96%99\"><\/span>2.3 \u7528 JavaScript \u4e32\u63a5 API \uff0c\u53d6\u5f97\u52d5\u614b\u8cc7\u6599<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u518d\u4f86\u5c31\u662f\u7528 AJAX \u7684\u65b9\u5f0f\uff0c\u5229\u7528\u700f\u89bd\u5668 send http request \u4f86\u4e32\u63a5\u5f8c\u7aef\u6216\u662f\u7b2c\u4e09\u65b9\u7db2\u9801\u7684 API \uff0c\u53d6\u5f97 JSON \u683c\u5f0f\u7684\u8cc7\u6599\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"24_%E9%96%8B%E5%A7%8B%E5%88%87%E7%89%88\"><\/span>2.4 \u958b\u59cb\u5207\u7248<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u53d6\u5f97 JSON \u683c\u5f0f\u7684\u8cc7\u6599\u5f8c\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u6bcf\u500b\u8cc7\u6599\u5c0d\u61c9\u5230\u7684 Key \uff0c\u6700\u5f8c\u76f4\u63a5\u7528 JavaScript \u628a\u8cc7\u6599\u5beb\u9032 HTML \uff0c\u4e4b\u5f8c\u7db2\u9801\u7684\u5167\u5bb9\u5c31\u6703\u6839\u64da\u5f8c\u7aef\u7684\u8cc7\u6599\u4f86\u505a\u8b8a\u66f4\uff0c\u800c\u4e0d\u7528\u81ea\u5df1\u53bb\u6539\u524d\u7aef\u7684 code \u3002<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"3_%E5%AF%A6%E4%BD%9C_Unsplash_API\"><\/span>3. \u5be6\u4f5c Unsplash API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Unspalsh \u662f\u4e00\u500b\u514d\u8cbb\u7684\u76f8\u7247\u5171\u4eab\u7db2\u7ad9\uff0c\u8a72\u7db2\u7ad9\u5b8c\u5168\u514d\u8cbb\uff0c\u53ea\u8981\u5728\u5206\u4eab\u76f8\u7247\u7684\u5e73\u53f0\u4e0a\u6a19\u6ce8 Unsplash \u548c\u651d\u5f71\u5e2b\u540d\u5b57\u5373\u53ef\uff0c\u672c\u90e8\u843d\u683c\u7684\u90e8\u5206\u6587\u7ae0\u9996\u5716\u5c31\u662f\u53d6\u81ea <a aria-label=\"Unsplash (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/unsplash.com\/\" target=\"_blank\" class=\"rank-math-link\">Unsplash<\/a> \u7684\u76f8\u7247\u54e6\uff01\u525b\u597d\u767c\u73fe Unsplash \u6709\u63d0\u4f9b API \u7684\u670d\u52d9\uff0c\u6240\u4ee5\u5c31\u6c7a\u5b9a\u62ff\u4ed6\u7576\u7b2c\u4e00\u500b\u7df4\u7fd2\u5566\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"31_%E7%80%8F%E8%A6%BD_Unsplash_%E7%9A%84_API_%E6%96%87%E4%BB%B6\"><\/span>3.1 \u700f\u89bd Unsplash \u7684 API \u6587\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Unsplash \u7684\u9996\u9801\u4e2d\u5c31\u53ef\u4ee5\u627e\u5230 API\/Developers \u7684\u9078\u9805\uff0c\u5982\u4e0b\u5716\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041.png\"><img loading=\"lazy\" width=\"1024\" height=\"481\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041-1024x481.png\" alt=\"API\u4e32\u63a5\" class=\"wp-image-1176\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041-1024x481.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041-300x141.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041-768x361.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041-1536x722.png 1536w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-041.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u9ede\u9032\u53bb\u9801\u9762\u5f8c\u53ef\u4ee5\u5148\u9078\u64c7\u300cRegister as a developer\u300d\uff0c\u8a3b\u518a\u70ba\u958b\u767c\u4eba\u54e1\uff0c\u4e5f\u53ef\u4ee5\u9ede\u9078\u4e0a\u65b9\u7684\u300cdocument\u300d\u5148\u700f\u89bd API \u6587\u4ef6\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042.png\"><img loading=\"lazy\" width=\"1024\" height=\"481\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042-1024x481.png\" alt=\"\" class=\"wp-image-1177\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042-1024x481.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042-300x141.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042-768x361.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042-1536x722.png 1536w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-042.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u901a\u5e38 API \u6587\u4ef6\u4e0a\u6703\u63cf\u8ff0\u8a72 API \u63d0\u4f9b\u4e86\u54ea\u4e9b\u8cc7\u6599\u4ee5\u53ca\u4f7f\u7528\u65b9\u6cd5\uff0c Unsplash \u63d0\u4f9b\u7684 API \u53ef\u4ee5\u8b93\u4f60\uff1a<\/p>\n\n\n\n<ul><li>\u7528\u95dc\u9375\u5b57\u641c\u5c0b\u7167\u7247<\/li><li>\u986f\u793a\u96a8\u6a5f\u7167\u7247<\/li><li>\u986f\u793a\u6700\u65b0\u4e0a\u50b3\u5230 Unspalsh \u7684\u7167\u7247<\/li><\/ul>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"32_%E6%80%9D%E8%80%83%E8%A6%81%E7%94%A8%E9%80%99%E4%BA%9B%E8%B3%87%E6%96%99%E5%81%9A%E4%BB%80%E9%BA%BC%E4%BA%8B%E6%83%85\"><\/span>3.2 \u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u77e5\u9053\u63d0\u4f9b\u54ea\u4e9b\u8cc7\u6599\u5f8c\u5c31\u53ef\u4ee5\u958b\u59cb\u601d\u8003\u8981\u7528\u9019\u4e9b\u8cc7\u6599\u505a\u4ec0\u9ebc\u4e8b\u60c5\u4e86\u3002<\/p>\n\n\n\n<p>\u56e0\u70ba\u9019\u7bc7\u6587\u7ae0\u55ae\u7d14\u7d00\u9304\u4e32\u63a5 API \u7684\u7df4\u7fd2\uff0c\u6240\u4ee5\u6211\u5c31\u55ae\u7d14\u986f\u793a\u51fa API \u6293\u5230\u7684\u5716\u7247\uff0c\u4e0d\u7279\u5225\u505a\u5207\u7248\u4e86\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"33_%E9%96%8B%E5%A7%8B%E7%94%A8_JavaScript_%E4%B8%B2%E6%8E%A5_API\"><\/span>3.3 \u958b\u59cb\u7528 JavaScript \u4e32\u63a5 API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"331_%E7%99%BB%E9%8C%84_Application_%3E_%E5%8F%96%E5%BE%97_Access_key%E3%80%81Secret_key\"><\/span>3.3.1 \u767b\u9304 Application =&gt; \u53d6\u5f97 Access key\u3001Secret key<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>\u6839\u64da Unsplash \u7684\u6587\u4ef6\uff0c\u8981\u4e32\u63a5 API \u4e4b\u524d\uff0c\u8981\u5148\u8a3b\u518a\u70ba\u958b\u767c\u4eba\u54e1\u5f8c\uff0c\u518d\u767b\u9304 Application \u624d\u80fd\u53d6\u5f97 Access key \u548c Secret key \uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043.png\"><img loading=\"lazy\" width=\"1024\" height=\"481\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043-1024x481.png\" alt=\"\" class=\"wp-image-1178\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043-1024x481.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043-300x141.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043-768x361.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043-1536x722.png 1536w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-043.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"332_%E5%B0%87_Access_key_%E6%94%BE%E5%88%B0_request_%E7%9A%84_url_%E4%B8%AD\"><\/span>3.3.2 \u5c07 Access key \u653e\u5230 request \u7684 url \u4e2d<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>\u6839\u64da\u6587\u4ef6\uff0c\u53ea\u8981\u76f4\u63a5\u5c07\u5c07 Access key \u653e\u5230 request \u7684 url \u4e2d\uff0c\u5c31\u53ef\u4ee5\u6536\u5230 JSON \u683c\u5f0f\u7684 require\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044.png\"><img loading=\"lazy\" width=\"1024\" height=\"481\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044-1024x481.png\" alt=\"\" class=\"wp-image-1179\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044-1024x481.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044-300x141.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044-768x361.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044-1536x722.png 1536w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-044.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u7b2c\u4e00\u7a2e\u5beb\u6cd5\uff08\u53c3\u8003<a href=\"http:\/\/youmightnotneedjquery.com\/\" target=\"_blank\" aria-label=\"You might&nbsp;not need&nbsp;jQuery (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">You might&nbsp;not need&nbsp;jQuery<\/a>\uff09\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">let xhr = new XMLHttpRequest();\nlet url = 'https:\/\/api.unsplash.com\/photos\/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk'\nxhr.open('GET', url, true);\nxhr.onload = function() {\n    if(this.status &gt;= 200 &amp;&amp; this.status &lt; 400) {\n        let response = JSON.parse(this.response)\n        console.log(response)\n};\nxhr.onerror = function() {\n};\nxhr.send();<\/code><\/pre>\n\n\n\n<p>\u7b2c\u4e8c\u7a2e\u5beb\u6cd5\uff08<a href=\"https:\/\/lidemy.com\/courses\/185961\/lectures\/2831400\" target=\"_blank\" aria-label=\"\u53c3\u8003[FE210] \u5f9e\u65b0\u624b\u5230\u4e2d\u624b\uff1a\u524d\u7aef\u5de5\u7a0b\u52a0\u5f37\u73ed\u4f5c\u696d4 (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">\u53c3\u8003[FE210] \u5f9e\u65b0\u624b\u5230\u4e2d\u624b\uff1a\u524d\u7aef\u5de5\u7a0b\u52a0\u5f37\u73ed\u4f5c\u696d4<\/a>\uff09\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">let url= \"https:\/\/api.unsplash.com\/photos\/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk\";\nlet xhr = new XMLHttpRequest();\nxhr.open('GET',url,true);\nxhr.send();\nxhr.onreadystatechange = function(){\n if(this.readyState === 4 &amp;&amp; this.status === 200){\n let response = JSON.parse(this.response);\n console.log(response);\n }\n};<\/code><\/pre>\n\n\n\n<p>\u7b2c\u4e09\u7a2e\u5beb\u6cd5\uff08\u53c3\u8003<a href=\"https:\/\/ithelp.ithome.com.tw\/articles\/10193506\" target=\"_blank\" aria-label=\"\u6211\u6bcf\u5929\u90fd\u63a5\u4e00\u500bAPI\u7cfb\u5217 \u7b2c&nbsp;6&nbsp;\u7bc7 (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">\u6211\u6bcf\u5929\u90fd\u63a5\u4e00\u500bAPI\u7cfb\u5217 \u7b2c&nbsp;6&nbsp;\u7bc7<\/a>\uff09\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">let url = \"https:\/\/api.unsplash.com\/photos\/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk\";\n\nfunction makeRequest() {\n  xhr = new XMLHttpRequest();\n  xhr.onload = function() {\n    let response = JSON.parse(this.response);\n    console.log(response)\n    }\n  ;\n  xhr.open(\"GET\", url, true);\n\n  xhr.send();\n}\nmakeRequest();<\/code><\/pre>\n\n\n\n<p>\u5c07 response \u7684 JSON \u6587\u4ef6\u7528 JSON.parse \u8f49\u70ba\u9663\u5217\u5f8c\u7684\u8cc7\u6599\u5982\u4e0b\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"242\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-045-1024x242.png\" alt=\"\" class=\"wp-image-1180\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-045-1024x242.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-045-300x71.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-045-768x181.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2020\/08\/\u5716\u7247-045.png 1432w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u5982\u6b64\u4e00\u4f86\u5c31\u53ef\u4ee5\u770b\u5230\u6240\u6709\u7684\u8cc7\u6599\u4e86\uff01<\/p>\n\n\n\n<p>\u4ee5\u4e0a\u4e09\u7a2e\u90fd\u662f\u7528 xhr \u4f86 send http request \uff0cES6 \u4e4b\u5f8c\uff0c\u700f\u89bd\u5668\u63d0\u4f9b\u4e86 fetch API \u4f86 send http request \uff0c\u76f8\u8f03\u65bc xhr \u4f86\u8aaa\uff0c\u7a0b\u5f0f\u78bc\u53ef\u4ee5\u5beb\u5f97\u66f4\u7c21\u6f54\u4e00\u9ede\uff01<\/p>\n\n\n\n<p>\u7b2c\u56db\u7a2e\u5beb\u6cd5\uff1a\u4f7f\u7528 fetch API\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">fetch(\"https:\/\/api.unsplash.com\/photos\/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk\")\n  .then((res) =&gt; {\n    const data = res.json();\n    return data;\n  })\n  .then((data) =&gt; {\n    console.log(data);\n  });<\/code><\/pre>\n\n\n\n<p>\u4e00\u6a23\u53ef\u4ee5\u7372\u5f97\u4e0a\u9762 console \u51fa\u4f86\u7684 array\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"34_%E9%96%8B%E5%A7%8B%E5%88%87%E7%89%88\"><\/span>3.4 \u958b\u59cb\u5207\u7248<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u73fe\u5728\u77e5\u9053\u6709\u4ec0\u9ebc\u8cc7\u6599\u53ef\u4ee5\u62ff\u4e4b\u5f8c\uff0c\u53ef\u4ee5\u5148\u7528 HTML \u5207\u7248\uff1a<\/p>\n\n\n\n<p>\u4e0d\u904e\u9019\u908a\u91cd\u9ede\u662f\u7df4\u7fd2\u4e32 API \uff0c\u6240\u4ee5\u5c31\u5148\u66ab\u6642\u4e0d\u5207\u7248\u4e86\uff0c\u76f4\u63a5\u7d66 HTML \u4e00\u500b class = container \u7684 div \u5c31\u597d\uff0c\u518d\u9650\u5236\u4e00\u4e0b img \u7684\u5bec\u5ea6\u70ba 250 px \uff0c\u6700\u5f8c\u518d\u7528 JavaScript \u628a\u5716\u7247\u653e\u5230\u9019\u500b div \u88e1\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\" \/&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;style&gt;\n    img {\n      width: 250px;\n    }\n  &lt;\/style&gt;\n  &lt;body&gt;\n    &lt;div class=\"container\"&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n  &lt;script&gt;\n    fetch(\"https:\/\/api.unsplash.com\/photos\/?client_id=XeMLEo-cG4umamAaRPxahF5CC7nhdSYGtbKlmU1O7Sk\")\n      .then((res) =&gt; {\n        const data = res.json();\n        return data;\n      })\n      .then((data) =&gt; {\n        console.log(data);\n        for (let i = 0; i &lt; data.length; i++) {\n          let container = document.querySelector(\".container\");\n          let img = document.createElement(\"img\");\n          img.setAttribute(\"src\", data[i].urls.small);\n          container.append(img);\n        }\n      });\n  &lt;\/script&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>\u9019\u6a23\u5c31\u5b8c\u6210\u4e86\u7c21\u55ae\u7684 API \u4e32\u63a5\uff0c\u6210\u679c\u5982\u4e0b\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1.png\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1-1024x576.png\" alt=\"\u4e32\u63a5 API\" class=\"wp-image-1589\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1-1024x576.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1-300x169.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1-768x432.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1-1536x864.png 1536w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2021\/03\/\u4e32\u63a5-API-1.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u518d\u524d\u7aef\u4e32\u63a5\u5b8c API \u5f8c\uff0c\u53ef\u4ee5\u8a66\u8457\u81ea\u5df1\u5728\u5f8c\u7aef\u5beb API\uff0c\u53ef\u4ee5\u53c3\u8003\uff1a<br><a href=\"https:\/\/jimmyswebnote.com\/restful-api-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u524d\u7aef\u5de5\u7a0b\u5e2b\u9081\u5411\u5f8c\u7aef\u4e4b\u8def 6 \u2013 \u8a2d\u8a08 RESTful API<\/a><br><a href=\"https:\/\/jimmyswebnote.com\/node-js-restful-api-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u524d\u7aef\u5de5\u7a0b\u5e2b\u9081\u5411\u5f8c\u7aef\u4e4b\u8def 7 \u2013 \u5be6\u4f5c Node.js RESTful API<\/a><\/p>\n\n\n\n\n\n<p>\u5982\u679c\u89ba\u5f97\u6211\u7684\u6587\u7ae0\u6709\u5e6b\u52a9\u7684\u8a71\uff0c\u6b61\u8fce\u5e6b\u6211\u7684\u7c89\u5c08\u6309\u8b9a\u54e6~\u8b1d\u8b1d\u4f60\uff01<br><\/p>\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fjimmyswebnote&amp;tabs=timeline&amp;width=340&amp;height=500&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId\" width=\"340\" height=\"500\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"><\/iframe>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u56e0\u70ba\u5c0d\u7528 JavaScript \u4e32\u63a5 API \u6eff\u4e0d\u719f\u6089\u7684\uff0c\u518d\u52a0\u4e0a\u6700\u8fd1\u770b\u4e86\u4e9b\u8077\u7f3a\u7528 JavaScript \u4e32\u63a5 API \u53c8\u662f\u5fc5\u5099\u6280\u80fd\uff0c\u6240\u4ee5\u6c7a\u5b9a\u4f86\u82b1\u9ede\u6642\u9593\u597d\u597d\u641e\u61c2\u9019\u584a\uff0c\u9806\u4fbf\u7df4\u7fd2\u5be6\u4f5c\uff0c\u6bd4\u8f03\u5bb9\u6613\u767c\u73fe\u554f\u984c\u51fa\u5728\u54ea\u88e1\u3002 \u5982\u679c\u4f60\u5c0d &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/jimmyswebnote.com\/use-javascript-to-connect-api-with-unsplash\/\"> <span class=\"screen-reader-text\">\u3010JavaScript\u700f\u89bd\u5668\u3011\uff1a\u5be6\u4f5c\u4e32\u63a5 API (1) \u23e4 Unsplash API<\/span> Read More \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":1181,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[66,19],"tags":[73,67],"_links":{"self":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/1171"}],"collection":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/comments?post=1171"}],"version-history":[{"count":0,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/1171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media\/1181"}],"wp:attachment":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media?parent=1171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/categories?post=1171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/tags?post=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}