From bfb3ddca891800a73b6a11b0cc18ff72911ea3fc Mon Sep 17 00:00:00 2001
From: Hello Li <15700015+sunshineLixun@users.noreply.github.com>
Date: Fri, 8 Jul 2022 03:22:12 +0000
Subject: [PATCH] =?UTF-8?q?feat(question):=20add=20#396=20-=20=E8=BF=99?=
 =?UTF-8?q?=E4=B8=AA=E6=8C=91=E6=88=98=E5=BC=80=E5=A7=8B,=E6=88=91?=
 =?UTF-8?q?=E4=BB=AC=E5=B0=86=E5=B0=9D=E8=AF=95=E5=AE=9E=E7=8E=B0=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=E5=93=8D=E5=BA=94=E5=BC=8F=E7=9A=84=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../App.vue                                   | 44 +++++++++++++++++++
 .../README.md                                 |  9 ++++
 .../README.zh-CN.md                           |  9 ++++
 .../info.yml                                  |  9 ++++
 .../info.zh-CN.yml                            |  7 +++
 5 files changed, 78 insertions(+)
 create mode 100644 questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/App.vue
 create mode 100644 questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.md
 create mode 100644 questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.zh-CN.md
 create mode 100644 questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.yml
 create mode 100644 questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.zh-CN.yml

diff --git a/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/App.vue b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/App.vue
new file mode 100644
index 0000000..f248fb9
--- /dev/null
+++ b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/App.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, Ref } from 'vue'
+  
+/**
+ * 实现一个请求的Hooks
+*/
+function useRequest(url: string | Ref<string>) {
+	const data = ref(null)
+  const error = ref(null)
+  const loading = ref(false)
+  
+  /**
+  	你的实现
+  */
+  
+  return {
+    data,
+    error,
+    loading
+  }
+}
+  
+// 这里提供了一个基准的url，您可以以这个为基准创建响应式的url
+// string url
+const baseUrl = 'https://jsonplaceholder.typicode.com/todos/'
+
+// Ref<string> url
+/**
+  你的实现
+*/
+
+const { data, error, loading } = useRequest(baseUrl)
+  
+</script>
+
+<template>
+  <button v-for="i in 5" @click="id = i">{{ i }}</button>
+  
+  <div v-if="error">{{ error.message }}</div>
+  <div v-else-if="data">
+    <pre>{{ data }}</pre>
+  </div>
+  <div v-else-if="loading">Loading...</div>
+</template>
\ No newline at end of file
diff --git a/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.md b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.md
new file mode 100644
index 0000000..6e2bb7e
--- /dev/null
+++ b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.md
@@ -0,0 +1,9 @@
+<!--info-header-start-->
+<!--info-header-end-->
+
+
+At the beginning of this challenge, we will try to implement a response data request method
+
+
+<!--info-footer-start-->
+<!--info-footer-end-->
diff --git a/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.zh-CN.md b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.zh-CN.md
new file mode 100644
index 0000000..29fb722
--- /dev/null
+++ b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/README.zh-CN.md
@@ -0,0 +1,9 @@
+<!--info-header-start-->
+<!--info-header-end-->
+
+
+这个挑战开始,我们将尝试实现一个响应式的数据请求方式
+
+
+<!--info-footer-start-->
+<!--info-footer-end-->
diff --git a/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.yml b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.yml
new file mode 100644
index 0000000..8baf46d
--- /dev/null
+++ b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.yml
@@ -0,0 +1,9 @@
+difficulty: null
+title: >-
+  At the beginning of this challenge, we will try to implement a response data
+  request method
+tags: union, array
+author:
+  github: sunshineLixun
+  name: Hello Li
+
diff --git a/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.zh-CN.yml b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.zh-CN.yml
new file mode 100644
index 0000000..e7649d6
--- /dev/null
+++ b/questions/396-zhe-ge-tiao-zhan-kai-shi-wo-men-jiang-chang-shi-shi-xian-yi-ge-xiang-ying-shi-de-shu-ju-qing-qiu-fang-shi/info.zh-CN.yml
@@ -0,0 +1,7 @@
+difficulty: null
+title: 这个挑战开始,我们将尝试实现一个响应式的数据请求方式
+tags: union, array
+author:
+  github: sunshineLixun
+  name: Hello Li
+