From 74db9d525e97bd65cff79a0d75887c702f1e81f3 Mon Sep 17 00:00:00 2001
From: HomWang <516310460@qq.com>
Date: Mon, 5 Sep 2022 15:42:15 +0800
Subject: [PATCH] docs(api): add example for fetch interceptors (#7180)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
---
 docs/content/3.api/1.composables/use-fetch.md | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-fetch.md b/docs/content/3.api/1.composables/use-fetch.md
index 065e19dbb14..3997659d4cb 100644
--- a/docs/content/3.api/1.composables/use-fetch.md
+++ b/docs/content/3.api/1.composables/use-fetch.md
@@ -72,12 +72,31 @@ If you have not fetched data on the server (for example, with `server: false`),
 ## Example
 
 ```ts
-const { data, pending, error, refresh } = await useFetch(
-  'https://api.nuxtjs.dev/mountains',
-  {
+const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
     pick: ['title']
+})
+```
+
+Using [interceptors](https://github.com/unjs/ohmyfetch#%EF%B8%8F-interceptors):
+
+```ts
+const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
+  onRequest({ request, options }) {
+    // Set the request headers
+    options.headers = options.headers || {}
+    options.headers.authorization = '...'
+  },
+  onRequestError({ request, options, error }) {
+    // Handle the request errors
+  },
+  onResponse({ request, response, options }) {
+    // Process the response data
+    return response._data
+  },
+  onResponseError({ request, response, options }) {
+    // Pandle the response errors
   }
-)
+})
 ```
 
 :ReadMore{link="/guide/features/data-fetching"}