新题目 #396
Description
基本信息
# 题目难度
difficulty: # medium
# 题目标题
title: 这个挑战开始,我们将尝试实现一个响应式的数据请求方式
# 题目标签
tags: union, array # separate by comma题目
这个挑战开始,我们将尝试实现一个响应式的数据请求方式
题目模版
filename: App.vue
<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>