简单的Fetch请求案例

  • 一个基本的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修饰一下，得到自己想要的样子
在这里插入图片描述

版权声明：本文为qq_43601059原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。