新题目

[sunshineLixun]

基本信息

# 题目难度
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>

[github-actions]

#397 - PR 已更新