#396 - 这个挑战开始,我们将尝试实现一个响应式的数据请求方式

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>

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-->

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-->

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
+

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
+