Fetch API介绍及简单的使用
前端  /  管理员 发布于 2年前   1382
现代浏览器对ES6语法的支持趋于完善,用Promise对象处理异步请求被越来越多的开发者应用。
为了更好地处理异步请求,作为对现有的XMLHttpRequest方法的替代,
JavaScript引入了fetch方法,基于Promise处理异步请求。
更多关于fetch的介绍,可以参考MDN关于fetch的介绍。
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
简单的一个fetch 使用demo
测试控制器(我这是在go语言中的beego框架里面 一个用户列表)
//使用原生sql进行列表数据查询
func (c *UserController) InfoList() {
o := orm.NewOrm()
var maps []orm.Params
sql := `select * from users`
o.Raw(sql).Values(&maps)
c.Data["json"] = maps
c.ServeJSON()
}
测试返回数据
视图 (中间代码我就去掉了)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
</head>
<body>
....
<script>
fetch('http://127.0.0.1:8080/infolist')
.then(res => res.json())
.then(json => console.log(json))
</script>
</body>
</html>
这是一个最简单的fetch,fetch默认使用的是GET方法;
请注意,这里我们调用了then方法2次,在第一个then中,我们得到了一个Response对象,
我们调用它的.json()方法,
来获取服务器响应中的数据,需要注意的是,res.json()返回的是一个Promise对象,而不是JSON化的数据
在这里,res.json()返回了一个Promise对象,
在这个Promise对象的then方法中我们可以访问到被解析成JSON格式的数据,
这时候我们才可以使用这些数据,因此要一个Promise链,总共调用两次then方法。
async/await语法的写法 (效果跟上面一样)
(async () => {
const res = await fetch('http://127.0.0.1:8080/infolist');
const json = await res.json();
console.log(json);
})();
如果你想了解async/await相关的知识:
https://es6.ruanyifeng.com/?search=fetch&x=0&y=0#docs/async
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号