docs: add initial examples (#288)

examples/README.md

@@ -0,0 +1,5 @@
+# ofetch examples
+
+In this directory you can find some examples of how to use ofetch.
+
+<!-- To learn more, you can read the [ofetch first hand tutorial on unjs.io](https://unjs.io/resources/learn/ofetch-101-first-hand). -->

examples/body.mjs

@@ -0,0 +1,11 @@
+import { ofetch } from "ofetch";
+
+const response = await ofetch("https://api.github.com/markdown", {
+  method: "POST",
+  // To provide a body, we need to use the `body` option and just use an object.
+  body: {
+    text: "UnJS is **awesome**!\n\nCheck out their [website](https://unjs.io).",
+  },
+});
+
+console.log(response);

examples/error-handling.mjs

@@ -0,0 +1,13 @@
+import { ofetch } from "ofetch";
+
+try {
+  await ofetch("https://api.github.com", {
+    method: "POST",
+  });
+} catch (error) {
+  // Error will be pretty printed
+  console.error(error);
+
+  // This allow us to access the error body
+  console.log(error.data);
+}

examples/first-request.mjs

@@ -0,0 +1,5 @@
+import { ofetch } from "ofetch";
+
+const data = await ofetch("https://ungh.cc/repos/unjs/ofetch");
+
+console.log(data);

examples/headers.mjs

@@ -0,0 +1,19 @@
+import { ofetch } from "ofetch";
+
+const response = await ofetch("https://api.github.com/gists", {
+  method: "POST",
+  headers: {
+    Authorization: `token ${process.env.GH_TOKEN}`,
+  },
+  body: {
+    description: "This is a gist created by ofetch.",
+    public: true,
+    files: {
+      "unjs.txt": {
+        content: "UnJS is awesome!",
+      },
+    },
+  },
+}); // Be careful, we use the GitHub API directly.
+
+console.log(response.url);

examples/methods.mjs

@@ -0,0 +1,7 @@
+import { ofetch } from "ofetch";
+
+const response = await ofetch("https://api.github.com/gists", {
+  method: "POST",
+}); // Be careful, we use the GitHub API directly.
+
+console.log(response);

examples/query-string.mjs

@@ -0,0 +1,9 @@
+import { ofetch } from "ofetch";
+
+const response = await ofetch("https://api.github.com/repos/unjs/ofetch/tags", {
+  query: {
+    per_page: 2,
+  },
+}); // Be careful, we use the GitHub API directly.
+
+console.log(response);

examples/type-safety.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import { ofetch } from "ofetch";
+
+interface Repo {
+  id: number;
+  name: string;
+  repo: string;
+  description: string;
+  stars: number;
+}
+
+async function main() {
+  const { repo } = await ofetch<{ repo: Repo }>(
+    "https://ungh.cc/repos/unjs/ofetch"
+  );
+
+  console.log(`The repo ${repo.name} has ${repo.stars} stars.`); // The repo object is now strongly typed.
+}
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+main().catch(console.error);

package.json

@@ -62,8 +62,8 @@
   "scripts": {
     "build": "unbuild",
     "dev": "vitest",
-    "lint": "eslint --ext .ts . && prettier -c src test playground",
-    "lint:fix": "eslint --fix --ext .ts . && prettier -w src test playground",
+    "lint": "eslint --ext .ts . && prettier -c src test playground examples",
+    "lint:fix": "eslint --fix --ext .ts . && prettier -w src test playground examples",
     "prepack": "pnpm build",
     "play": "jiti playground/index.ts",
     "release": "pnpm test && changelogen --release && npm publish && git push --follow-tags",
@@ -91,5 +91,5 @@
     "unbuild": "2.0.0",
     "vitest": "^0.34.6"
   },
-  "packageManager": "pnpm@8.8.0"
-}
+  "packageManager": "pnpm@8.9.2"
+}

playground/index.mjs

@@ -4,7 +4,9 @@ async function main() {
   await $fetch("http://google.com/404");
 }
 
-main().catch((err) => {
-  console.error(err);
+// eslint-disable-next-line unicorn/prefer-top-level-await
+main().catch((error) => {
+  console.error(error);
+  // eslint-disable-next-line unicorn/no-process-exit
   process.exit(1);
 });