简单的Fetch请求案例

最新推荐文章于 2025-06-19 21:06:24 发布

FIRE

最新推荐文章于 2025-06-19 21:06:24 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_43601059/article/details/90550615

vue 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了一个基本的fetch请求设置，在控制台获取返回的数据，仅提取其中的name字段并将数据显示出来，最后使用CSS进行修饰，以达到想要的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个基本的fetch请求设置

fetch('https://api.github.com/users/Fire-zy/repos')
		.then(function(response){
		return response.json();
	})
		.then(function(myJson){
		console.log(myJson);
});

控制台得到返回的数据
在这里插入图片描述

将得到的数据显示出来，我只取了name，其它内容没取

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple example</title>
  </head>
  <body>
  	<ul id="repo"></ul>
      <script>
		fetch('https://api.github.com/users/Fire-zy/repos')
		.then(function(response){
			return response.json();
		})
		.then(function(myJson){
			let content='';
			for(let repo of myJson){
				content+=`<li>
					<span>
						${repo.name}
					</span>
				</li>`
			}
			document.querySelector('#repo').innerHTML=content;
			console.log(myJson);
		});
    </script>
  </body>
</html>

得到下面这样
在这里插入图片描述
最后添加css修饰一下，得到自己想要的样子