03_Network.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "ad553522-1da9-4706-82d7-daaab26f27c6",
   "metadata": {},
   "source": [
    "# Network\n",
    "\n",
    "## HTTP Requests\n",
    "\n",
    "This example demonstrates how to make a HTTP request to a server."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "30d422e4-415a-4795-a82d-5b8b6dd47a73",
   "metadata": {},
   "source": [
    "To make a request to a server, you use the `fetch` API. The response is a `Response` object. This contains the status code, headers, and the body."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "45b3fcd5-4baf-4b5e-835c-698b1f69ec0d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Response {\n",
       "  body: ReadableStream { locked: \u001b[33mfalse\u001b[39m },\n",
       "  bodyUsed: \u001b[33mfalse\u001b[39m,\n",
       "  headers: Headers {\n",
       "    \u001b[32m\"accept-ranges\"\u001b[39m: \u001b[32m\"bytes\"\u001b[39m,\n",
       "    age: \u001b[32m\"374147\"\u001b[39m,\n",
       "    \u001b[32m\"cache-control\"\u001b[39m: \u001b[32m\"max-age=604800\"\u001b[39m,\n",
       "    \u001b[32m\"content-type\"\u001b[39m: \u001b[32m\"text/html; charset=UTF-8\"\u001b[39m,\n",
       "    date: \u001b[32m\"Fri, 17 May 2024 17:46:14 GMT\"\u001b[39m,\n",
       "    etag: \u001b[32m'\"3147526947\"'\u001b[39m,\n",
       "    expires: \u001b[32m\"Fri, 24 May 2024 17:46:14 GMT\"\u001b[39m,\n",
       "    \u001b[32m\"last-modified\"\u001b[39m: \u001b[32m\"Thu, 17 Oct 2019 07:18:26 GMT\"\u001b[39m,\n",
       "    server: \u001b[32m\"ECAcc (sac/2568)\"\u001b[39m,\n",
       "    vary: \u001b[32m\"Accept-Encoding\"\u001b[39m,\n",
       "    \u001b[32m\"x-cache\"\u001b[39m: \u001b[32m\"HIT\"\u001b[39m\n",
       "  },\n",
       "  ok: \u001b[33mtrue\u001b[39m,\n",
       "  redirected: \u001b[33mfalse\u001b[39m,\n",
       "  status: \u001b[33m200\u001b[39m,\n",
       "  statusText: \u001b[32m\"OK\"\u001b[39m,\n",
       "  url: \u001b[32m\"https://example.com/\"\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "let resp = await fetch(\"https://example.com\");\n",
    "resp"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6c6461eb-bffa-4570-be71-ee2cda52b4ac",
   "metadata": {},
   "source": [
    "The response body can also be streamed in chunks."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "6ba9deb2-3ade-41e2-aa52-6153d8891074",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "ArrayBuffer {\n",
       "  \u001b[36m[Uint8Contents]\u001b[39m: <3c 21 64 6f 63 74 79 70 65 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 3e 0a 3c 68 65 61 64 3e 0a 20 20 20 20 3c 74 69 74 6c 65 3e 45 78 61 6d 70 6c 65 20 44 6f 6d 61 69 6e 3c 2f 74 69 74 6c 65 3e 0a 0a 20 20 20 20 3c 6d 65 74 61 20 63 68 61 72 73 65 74 3d 22 75 74 66 2d 38 22 20 2f 3e 0a 20 20 20 20 3c 6d ... 1156 more bytes>,\n",
       "  byteLength: \u001b[33m1256\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "resp = await fetch(\"https://example.com\");\n",
    "await resp.arrayBuffer();"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "58aeb965-8020-412f-a1a6-b6a81ee7a019",
   "metadata": {},
   "source": [
    "When making a request, you can also specify the method, headers, and a body."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "a2e8ef76-6f41-4128-8c50-e0713de2e2e5",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "chunk Uint8Array(1256) [\n",
      "   \u001b[33m60\u001b[39m,  \u001b[33m33\u001b[39m, \u001b[33m100\u001b[39m, \u001b[33m111\u001b[39m,  \u001b[33m99\u001b[39m, \u001b[33m116\u001b[39m, \u001b[33m121\u001b[39m, \u001b[33m112\u001b[39m, \u001b[33m101\u001b[39m,  \u001b[33m32\u001b[39m, \u001b[33m104\u001b[39m, \u001b[33m116\u001b[39m,\n",
      "  \u001b[33m109\u001b[39m, \u001b[33m108\u001b[39m,  \u001b[33m62\u001b[39m,  \u001b[33m10\u001b[39m,  \u001b[33m60\u001b[39m, \u001b[33m104\u001b[39m, \u001b[33m116\u001b[39m, \u001b[33m109\u001b[39m, \u001b[33m108\u001b[39m,  \u001b[33m62\u001b[39m,  \u001b[33m10\u001b[39m,  \u001b[33m60\u001b[39m,\n",
      "  \u001b[33m104\u001b[39m, \u001b[33m101\u001b[39m,  \u001b[33m97\u001b[39m, \u001b[33m100\u001b[39m,  \u001b[33m62\u001b[39m,  \u001b[33m10\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m60\u001b[39m, \u001b[33m116\u001b[39m,\n",
      "  \u001b[33m105\u001b[39m, \u001b[33m116\u001b[39m, \u001b[33m108\u001b[39m, \u001b[33m101\u001b[39m,  \u001b[33m62\u001b[39m,  \u001b[33m69\u001b[39m, \u001b[33m120\u001b[39m,  \u001b[33m97\u001b[39m, \u001b[33m109\u001b[39m, \u001b[33m112\u001b[39m, \u001b[33m108\u001b[39m, \u001b[33m101\u001b[39m,\n",
      "   \u001b[33m32\u001b[39m,  \u001b[33m68\u001b[39m, \u001b[33m111\u001b[39m, \u001b[33m109\u001b[39m,  \u001b[33m97\u001b[39m, \u001b[33m105\u001b[39m, \u001b[33m110\u001b[39m,  \u001b[33m60\u001b[39m,  \u001b[33m47\u001b[39m, \u001b[33m116\u001b[39m, \u001b[33m105\u001b[39m, \u001b[33m116\u001b[39m,\n",
      "  \u001b[33m108\u001b[39m, \u001b[33m101\u001b[39m,  \u001b[33m62\u001b[39m,  \u001b[33m10\u001b[39m,  \u001b[33m10\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m60\u001b[39m, \u001b[33m109\u001b[39m, \u001b[33m101\u001b[39m,\n",
      "  \u001b[33m116\u001b[39m,  \u001b[33m97\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m99\u001b[39m, \u001b[33m104\u001b[39m,  \u001b[33m97\u001b[39m, \u001b[33m114\u001b[39m, \u001b[33m115\u001b[39m, \u001b[33m101\u001b[39m, \u001b[33m116\u001b[39m,  \u001b[33m61\u001b[39m,  \u001b[33m34\u001b[39m,\n",
      "  \u001b[33m117\u001b[39m, \u001b[33m116\u001b[39m, \u001b[33m102\u001b[39m,  \u001b[33m45\u001b[39m,  \u001b[33m56\u001b[39m,  \u001b[33m34\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m47\u001b[39m,  \u001b[33m62\u001b[39m,  \u001b[33m10\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,\n",
      "   \u001b[33m32\u001b[39m,  \u001b[33m32\u001b[39m,  \u001b[33m60\u001b[39m, \u001b[33m109\u001b[39m,\n",
      "  ... 1156 more items\n",
      "]\n"
     ]
    }
   ],
   "source": [
    "resp = await fetch(\"https://example.com\");\n",
    "for await (const chunk of resp.body!) {\n",
    "  console.log(\"chunk\", chunk);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "29c7fa31-e8eb-44fe-976b-448d03f5f9c0",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Response {\n",
       "  body: ReadableStream { locked: \u001b[33mfalse\u001b[39m },\n",
       "  bodyUsed: \u001b[33mfalse\u001b[39m,\n",
       "  headers: Headers {\n",
       "    \u001b[32m\"accept-ranges\"\u001b[39m: \u001b[32m\"bytes\"\u001b[39m,\n",
       "    \u001b[32m\"cache-control\"\u001b[39m: \u001b[32m\"max-age=604800\"\u001b[39m,\n",
       "    \u001b[32m\"content-length\"\u001b[39m: \u001b[32m\"1256\"\u001b[39m,\n",
       "    \u001b[32m\"content-type\"\u001b[39m: \u001b[32m\"text/html; charset=UTF-8\"\u001b[39m,\n",
       "    date: \u001b[32m\"Fri, 17 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    etag: \u001b[32m'\"3147526947\"'\u001b[39m,\n",
       "    expires: \u001b[32m\"Fri, 24 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    \u001b[32m\"last-modified\"\u001b[39m: \u001b[32m\"Thu, 17 Oct 2019 07:18:26 GMT\"\u001b[39m,\n",
       "    server: \u001b[32m\"EOS (vny/044F)\"\u001b[39m\n",
       "  },\n",
       "  ok: \u001b[33mtrue\u001b[39m,\n",
       "  redirected: \u001b[33mfalse\u001b[39m,\n",
       "  status: \u001b[33m200\u001b[39m,\n",
       "  statusText: \u001b[32m\"OK\"\u001b[39m,\n",
       "  url: \u001b[32m\"https://example.com/\"\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "const body = `{\"name\": \"Deno\"}`;\n",
    "resp = await fetch(\"https://example.com\", {\n",
    "  method: \"POST\",\n",
    "  headers: {\n",
    "    \"Content-Type\": \"application/json\",\n",
    "    \"X-API-Key\": \"foobar\",\n",
    "  },\n",
    "  body,\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "c6b0c366-efaa-46ee-862e-d7b443787203",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Response {\n",
       "  body: ReadableStream { locked: \u001b[33mfalse\u001b[39m },\n",
       "  bodyUsed: \u001b[33mfalse\u001b[39m,\n",
       "  headers: Headers {\n",
       "    \u001b[32m\"cache-control\"\u001b[39m: \u001b[32m\"max-age=604800\"\u001b[39m,\n",
       "    \u001b[32m\"content-length\"\u001b[39m: \u001b[32m\"0\"\u001b[39m,\n",
       "    \u001b[32m\"content-type\"\u001b[39m: \u001b[32m\"text/html; charset=UTF-8\"\u001b[39m,\n",
       "    date: \u001b[32m\"Fri, 17 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    expires: \u001b[32m\"Fri, 24 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    server: \u001b[32m\"EOS (vny/044F)\"\u001b[39m\n",
       "  },\n",
       "  ok: \u001b[33mfalse\u001b[39m,\n",
       "  redirected: \u001b[33mfalse\u001b[39m,\n",
       "  status: \u001b[33m405\u001b[39m,\n",
       "  statusText: \u001b[32m\"Method Not Allowed\"\u001b[39m,\n",
       "  url: \u001b[32m\"https://example.com/\"\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "const req = new Request(\"https://example.com\", {\n",
    "  method: \"DELETE\",\n",
    "});\n",
    "resp = await fetch(req);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "87b491d7-7cf2-4981-af23-15952125886e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Request {\n",
       "  bodyUsed: \u001b[33mfalse\u001b[39m,\n",
       "  headers: Headers { \u001b[32m\"content-type\"\u001b[39m: \u001b[32m\"application/x-www-form-urlencoded;charset=UTF-8\"\u001b[39m },\n",
       "  method: \u001b[32m\"POST\"\u001b[39m,\n",
       "  redirect: \u001b[32m\"follow\"\u001b[39m,\n",
       "  url: \u001b[32m\"https://example.com/\"\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "const url = \"https://example.com\";\n",
    "new Request(url, {\n",
    "  method: \"POST\",\n",
    "  body: new Uint8Array([1, 2, 3]),\n",
    "});\n",
    "new Request(url, {\n",
    "  method: \"POST\",\n",
    "  body: new Blob([\"Hello, World!\"]),\n",
    "});\n",
    "new Request(url, {\n",
    "  method: \"POST\",\n",
    "  body: new URLSearchParams({ \"foo\": \"bar\" }),\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "87ef33ca-9b3a-49eb-adde-9b2f5d398c3e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Response {\n",
       "  body: ReadableStream { locked: \u001b[33mfalse\u001b[39m },\n",
       "  bodyUsed: \u001b[33mfalse\u001b[39m,\n",
       "  headers: Headers {\n",
       "    \u001b[32m\"accept-ranges\"\u001b[39m: \u001b[32m\"bytes\"\u001b[39m,\n",
       "    \u001b[32m\"cache-control\"\u001b[39m: \u001b[32m\"max-age=604800\"\u001b[39m,\n",
       "    \u001b[32m\"content-length\"\u001b[39m: \u001b[32m\"1256\"\u001b[39m,\n",
       "    \u001b[32m\"content-type\"\u001b[39m: \u001b[32m\"text/html; charset=UTF-8\"\u001b[39m,\n",
       "    date: \u001b[32m\"Fri, 17 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    etag: \u001b[32m'\"3147526947\"'\u001b[39m,\n",
       "    expires: \u001b[32m\"Fri, 24 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    \u001b[32m\"last-modified\"\u001b[39m: \u001b[32m\"Thu, 17 Oct 2019 07:18:26 GMT\"\u001b[39m,\n",
       "    server: \u001b[32m\"EOS (vny/044F)\"\u001b[39m\n",
       "  },\n",
       "  ok: \u001b[33mtrue\u001b[39m,\n",
       "  redirected: \u001b[33mfalse\u001b[39m,\n",
       "  status: \u001b[33m200\u001b[39m,\n",
       "  statusText: \u001b[32m\"OK\"\u001b[39m,\n",
       "  url: \u001b[32m\"https://example.com/\"\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "const formData = new FormData();\n",
    "formData.append(\"name\", \"Deno\");\n",
    "formData.append(\"file\", new Blob([\"Hello, World!\"]), \"hello.txt\");\n",
    "resp = await fetch(\"https://example.com\", {\n",
    "  method: \"POST\",\n",
    "  body: formData,\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "9c557247-84ab-499f-9445-2614c6152659",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Response {\n",
       "  body: ReadableStream { locked: \u001b[33mfalse\u001b[39m },\n",
       "  bodyUsed: \u001b[33mfalse\u001b[39m,\n",
       "  headers: Headers {\n",
       "    \u001b[32m\"accept-ranges\"\u001b[39m: \u001b[32m\"bytes\"\u001b[39m,\n",
       "    \u001b[32m\"cache-control\"\u001b[39m: \u001b[32m\"max-age=604800\"\u001b[39m,\n",
       "    \u001b[32m\"content-length\"\u001b[39m: \u001b[32m\"1256\"\u001b[39m,\n",
       "    \u001b[32m\"content-type\"\u001b[39m: \u001b[32m\"text/html; charset=UTF-8\"\u001b[39m,\n",
       "    date: \u001b[32m\"Fri, 17 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    etag: \u001b[32m'\"3147526947\"'\u001b[39m,\n",
       "    expires: \u001b[32m\"Fri, 24 May 2024 17:46:15 GMT\"\u001b[39m,\n",
       "    \u001b[32m\"last-modified\"\u001b[39m: \u001b[32m\"Thu, 17 Oct 2019 07:18:26 GMT\"\u001b[39m,\n",
       "    server: \u001b[32m\"EOS (vny/044F)\"\u001b[39m\n",
       "  },\n",
       "  ok: \u001b[33mtrue\u001b[39m,\n",
       "  redirected: \u001b[33mfalse\u001b[39m,\n",
       "  status: \u001b[33m200\u001b[39m,\n",
       "  statusText: \u001b[32m\"OK\"\u001b[39m,\n",
       "  url: \u001b[32m\"https://example.com/\"\u001b[39m\n",
       "}"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "const bodyStream = new ReadableStream({\n",
    "  start(controller) {\n",
    "    controller.enqueue(new TextEncoder().encode(\"Hello, World!\"));\n",
    "    controller.close();\n",
    "  },\n",
    "});\n",
    "resp = await fetch(\"https://example.com\", {\n",
    "  method: \"POST\",\n",
    "  body: bodyStream,\n",
    "});"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Deno",
   "language": "typescript",
   "name": "deno"
  },
  "language_info": {
   "codemirror_mode": "typescript",
   "file_extension": ".ts",
   "mimetype": "text/x.typescript",
   "name": "typescript",
   "nbconvert_exporter": "script",
   "pygments_lexer": "typescript",
   "version": "5.4.5"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}